요사미

Yosami는 Mithril.js를 기반으로 한 SSR + SPA 프레임 워크입니다.

Mithril.js라고 하면 경량 & 고속의 프레임워크(참고: 가장 빠른 MVC 프레임 워크 Mithril.js의 속도 비밀 )입니다만,
그 Mithril.js를 코어에 사용해 경량 & 고속의 혜택을 받으면서, Rails의 기본 이념 「DRY 원칙과 CoC 원칙」에 따라서 코드를 쓸 수 있도록 한, 이른바 Mithril on Rails입니다.

이번은 Hello! World 적인 프로젝트를 만들면서, yosami의 촉감을 조금만 소개합니다.

가정 환경

node 9.x 이상 설치

기사 쓰기 환경 (debian9.0/node9.2.0)

설치

단 몇 단계만으로 설치가 완료됩니다.

# インストール先ディレクトリの作成と移動
mkdir example-yosami && cd example-yosami

# yosamiパッケージのインストール
npm init -y && npm install --save-dev yosami

# yosamiのインストール
./node_modules/.bin/yosami

설치가 완료되면 이러한 rails 감도는 구성이 됩니다.

페이지 만들기

rails 로 말한다 rails g scaffold 적인 명령으로, 페이지를 만들어 갑니다.

npm run generate controller hello

Hello! World를 표시하기 위한 컨트롤러, 루트, 뷰, 테스트 등이 자동으로 정의됩니다.

시작해보기

즉시 다음 명령으로 개발 서버를 시작합니다.

npm run dev

http://localhost:3001/hello로 이동하면 방금 만든 hello 페이지가 나타납니다.



일부 환경에서는 처음 컴파일하는 데 시간이 걸립니다.

프로덕션 서버에서 시작

다음은 SSR + SPA 로 동작하는 프로덕션 서버를 기동해 봅니다.

npm start # `npm run build && npm run prod` と同等

액세스하고 코드를 확인하면 태그가 렌더링되는지 확인할 수 있다고 생각합니다.

프로덕션 서버는 캐시 기구나, js/css의 압축, CSS를 자동으로 인라인화하는 구조가 포함되어 있어 PageSpeed ​​Insights로 고득점을 노리는 구성으로 되어 있습니다.

이 최적화 기법은 과거와 관련된 여러 제품에서 사용되었으며 GTM과 같은 집계 태그가 포함되어 있어도 높은 점수를 얻습니다.



(외부 벤더의 집계용 태그가 없으면 100점을 취할 수 있습니다.)

페이지를 다시 작성해 봅니다.

좀 더 Hello!World다운 페이지로 갑니다.

그건 그렇고, 개발하는 동안 개발 서버를 시작하십시오. JS는 LiveReload, CSS는 HMR로 수정이 자동 반영됩니다.

표시 내용과 제목 변경

app/views/controllers/hello.js 를 편집합니다.

module.exports = function(controller, pipe, _yield) {
  pipe.title = 'YOSAMI PAGE';
  return (
<div class='controllers/hello'>
  Hello! yosami
</div>
  );
};

pipe 에서 상위 레이어( views/controllers/appliation.js )에 데이터를 전달하여 제목 변경 합니다.

루트 편집

/ 에서 페이지가 표시되도록 config/route.js 를 편집합니다.

TrackRouter.configure(() => {
  get('/', {to: 'hello', as: 'hello'});
});

스타일 수정

app/assets/styles/controllers/hello.scss 를 편집합니다.

.controllers\/hello {
  color: #333;
  font-size: 24px;
  font-weight: bold;
};

위의 변경 사항을 추가하여 http://localhost:3001/에 액세스하면 수정 사항이 반영되는지 확인할 수 있다고 생각합니다.

클릭으로 인사

Hello! yosami 를 클릭하면 인사를 내고 인사 횟수를 표시해 봅니다.

뷰 모델 편집

app/view_models/controllers/hello.js 에 인사 횟수 저장 greetings 속성을 추가합니다.

module.exports = class Hello extends ApplicationViewModel {
  static definer() {
    name('hello');
    accessor('greetings');
  }
}

컨트롤러 편집

app/controllers/hello_controller.js 에 인사 표시 및 횟수를 계산하는 greet 함수를 추가합니다.

module.exports = class HelloController extends ApplicationController {
  static definer() {
    name('hello');
  }

  greet() {
    alert('Hello!');
    this.vm.greetings = (this.vm.greetings || 0) + 1;
  }
}

뷰 편집

app/views/controllers/hello.js 에 onclick 이벤트 설정과 인사 횟수를 표시하는 코드를 추가합니다.

module.exports = function(controller, pipe, _yield) {
  pipe.title = 'YOSAMI PAGE';
  return (
<div class='controllers/hello' onclick={controller.greet.bind(controller)}>
  Hello! yosami
  <p>{ (this.greetings || 0) }greetings</p>
</div>
  );
};

수정이 완료되면 Hello! yosami 를 클릭해 봅시다!



잘 움직였습니까?
여기까지의 내용은 이 커밋 입니다.

미래에 대해

끝까지 교제 해 주셔서 감사합니다.

이번은 정말로 만질 정도의 내용이었습니다만, 문서를 쓰면서, 기능 소개의 기사를 써 가면 된다고 생각하고 있습니다.

그렇다면 시험해보십시오

yosami-framework/yosami