개시하다

유지 보수가 높은 자바스크립트 애플리케이션, Chaplin을 만들고 싶습니다.도착했습니다.
설명을 너무 많이 쓰면 실패할 수 있기 때문에 설명을 많이 쓰지 않고 그대로 하면 채플린으로 웹 애플리케이션을 만들 수 있을 것 같다.
이 기사는 연재를 예정하고 있으며, 결국 나는 간단한 노트북 프로그램을 완성하고 싶다.이미지는 Simplenote입니다.

Chaplin.js？

백본.랩으로 만든 자바스크립트 MVC 프레임.
왜?js라고 하면 Backbone.js가 너무 작아서 문제에 직면하게 됐어요.

의외로 정상적으로 필요하지 않아 자제고를 많이 써야 했다.

구성 등 최선의 실천은 아직 결정되지 않아 사람에 따라 다를 수 있다.

특히 후자는 Chaplin이다.js라면 최선의 실천을 규정했기 때문에 이 규칙에 따라 하면 누구나 좋은 느낌을 받을 수 있습니다.

시스템 구성

프런트엔드는 Chaplin, 백엔드는 Rails로 완전히 다른 애플리케이션입니다.
Rails는 프런트엔드 애플리케이션에서 활용할 수 있는 API를 제공합니다.
분리된 원인은 클라이언트 라이브러리의 관리와 구축이다.
라일스의 asset pipeline과 bower-rails를 사용하고 싶은데 라일스가 잘하는 부분이 아니라 좀 억지다.
그래서 사용Chaplin.js.Brunch는 프런트엔드 응용프로그램의 초기 자동 생성, 라이브러리 관리, 구축, 테스트를 모두 진행하는 프런트엔드 응용프로그램의 구축 도구이다.
이 덕분에 앱을 분리하기로 마음먹었다고 해도 과언이 아니다.이렇게 되면 전방 응용 개발의 궤도가 더욱 안정되고 생산성과 유지보수성도 높아질 것이다.

프런트엔드 환경 구축 프로그램

첫 번째는 전방 환경 구축이다.
Brunch를 사용하여 트위터 Bootstrap의 example을 표시할 때까지 Chaplin 응용 프로그램의 초기 형태를 만듭니다.
미리js와 npm를 설치하십시오.
brunch 설치

$ npm install -g brunch

generator에 scaffolt 설치
(이걸 사용하면 rails generate처럼 될 수 있다)

$ npm install -g scaffolt

git 창고를 제작합니다.

$ mkdir noteapp-chaplin-example
$ cd noteapp-chaplin-example
$ git init

다음 목록으로 구성될 예정입니다.

noteapp-chaplin-example
├── frontend
└── backend

chapling 응용 프로그램의 초기 제작

$ brunch new gh:paulmillr/brunch-with-chaplin frontend
$ cd frontend

다음 디렉토리를 완료합니다.
app는 응용 프로그램의 주체입니다. 보시다시피 한눈에 초기화 처리가 여기 있는 컨트롤러도 이해하기 쉽습니다.

.
├── README.md
├── app
│   ├── application.coffee
│   ├── assets
│   │   ├── images
│   │   └── index.html
│   ├── controllers
│   │   ├── base
│   │   └── home-controller.coffee
│   ├── initialize.coffee
│   ├── lib
│   │   ├── utils.coffee
│   │   └── view-helper.coffee
│   ├── mediator.coffee
│   ├── models
│   │   └── base
│   ├── routes.coffee
│   └── views
│       ├── base
│       ├── home
│       ├── site-view.coffee
│       ├── styles
│       └── templates
├── bower.json
├── bower_components
├── config.coffee
├── generators
├── node_modules
└── package.json

운전해 봐.

$ brunch w -s

localhost:3333에 액세스하면 다음 화면이 표시됩니다.
Brunch
git에 제출할게요.

$ git add .
$ git commit -m "フロントアプリの雛形作成"

Twitter Bootstrap 설치
라이브러리 관리 사용.

$ bower install bootstrap --save

Twitter Bootstrap의 Starter template 샘플을 마이그레이션합니다.
bower_다음 파일의 내용을 입력하십시오

index.html
starter-template.css

다음 파일로 마이그레이션합니다.
Brunch로 구성된 Chaplin.js에서는 템플릿 엔진bower, CSS ProcessorHandlebars.js를 사용합니다.
또 사스가 말한 컴포아스Stylus의 문서도 보면서 개발할 예정이다.

app/views/home/styles/header.styl
app/views/home/styles/home-page.styl
app/views/home/templates/header.hbs
app/views/home/templates/home.hbs
app/views/styles/application.styl
app/views/templates/site.hbs

localhost:3333에 다시 액세스하면 Twitter Bootstrap의 Starter template가 표시됩니다.
nib

결산과 다음 예고.

최근에는 이번 구성처럼 전단과 후단을 완전히 다른 응용 프로그램으로 분리하는 것이 각자의 장점을 발휘할 수 있을까 하는 생각을 하고 있다.
여기까지의 소스는 모두 지티허브에 올라왔다.

다음에는 데이터를 저장하지 않는 노트북 앱을 가져가세요.

참조 링크

https://github.com/atskimura/noteapp-chaplin-example/tree/article_1

Chaplin | HTML5 application architecture

Backbone.js

Brunch | ultra-fast HTML5 build tool

명령 목록 찾아보기

paulmillr/scaffolt

BOWER: A package manager for the web

Stylus

nib - CSS3 extensions for Stylus