javascript mvc入門
TRANSCRIPT
第参回 JavaScript勉強会
小倉 大樹
Modern JavaScript Dev The Beginners' CourseEcosystem Node, npm, glup……
jshint Lint, Style Format
Modularize Rule Style Tool
前回のあらすじ
Server-side JavaScriptProcessor Node.js (fork: io.js) and others PackageManager npm, bower
BuildTool Grunt or Gulp Module DependencyManagement RequireJS, browserify, component, WebPack
ecosystem on
JSHint
• detect errors and potential problems
• enforce your team's coding conventions
• very flexible
No check, No commit!
The History and Future
そして、次のバージョンであるECMAScript6には
言語の機能そのものにモジュールの仕組みが……!
当初のJavaScriptにはモジュールや名前空間にあたる仕組みがなかった
それを補うためにいくつかのツールやライブラリが考案された 代表的な仕様がCommonJSである
CommonJSとはサーバ、クライアント、その他環境での標準的な仕様を定めるもの その中でモジュールの仕様も策定された
JavaScript Moduleまとめ• ES6が標準化するまでの辛抱(IE?)
• 中規模以上ならモジュール化は必須、小規模でも必須
• 規模感や求めるクオリティが標準程度なら学習コストはペイする(はず)
• 複数環境や高圧縮Minifierに耐えるコードを書く場合はさらに大変
• もっとよく知りたい人はgithubのリポジトリやuupa氏のドキュメントを読むここまでやりました
アーキテクチャMMVM
入門
MVC モ
ナ
ド
の
価
値
Promiseパターン
Shadow DOMObserver
リアクティブプログラミング
今回予定していた内容
ECMAScriptStudy
episode: 3
Architecture
Observer Pattern観察
状態の変化を観察し、通知する。 イベント駆動モデルを理解するための基礎。
GUIを組み上げる為のプログラミングに 不可欠なデザインパターンである。
Live Coding…
Observer Pattern総括状態の変化を観察し、イベントを通知する。
汎用性を持たせつつ、オブジェクトの 相互依存
を排除できる。
通知されたイベントに対する振る舞いを Callbackで登録する。
Observer Pattern総括使われている例: • JavaScriptのaddEventListener • Node.jsのEventEmitter • C#のevent • Objective-CのKVO
!
とか色々
MVC
Model:データ、ビジネスロジック、なんか色々
ControllerViewModel
View:ユーザの為にモデルを表示する
Controller:モデルの操作、Viewへの命令
GUIアプリケーションの為に作られた設計指針
派生が色々ある
MVC, MTV, MVP, PM, MVVM, MVX…… それぞれなんか色々言ってるし、お互いに批判してるしそもそもよくわかんない…
なんか全般的にフワッとしてる…
MVC
世の中に広く知られたのはRailsの功績が大きい。 が、Webアプリが世界の全てではない。むしろ亜流。
ControllerViewModel
セントラルドグマみたいなもの。
ステートレスなHTTPに乗っかる実装と ステートフルなクライアントアプリケーション の方針が異なるのは当たり前。
思想と基本方針を理解するのが大事。
MVC Architecture
M
V CNotify
ControlProject
Control
Observe
概観IndependentlyNot Only ORM
So Fat, So Complex
Thin
MVVMViewModelViewModel
ViewModel
Two-way Data Binding Event Observe
中核となる考え方はMVCと変わらないし、 フレームワークごとに実装が違ったりするので こまけぇこたぁいいんだよの精神が大事。
View - ViewModel
View ViewModel同期
状態の表示状態の保持 Modelへの伝達
Two-way Databinding
Shinji Ikari
Male
14
……
……
View ViewModel
Pilot { “name”: “Shinji Ikari”, “sex”: Male, “age”: 14, “…”: …… }
Binded
疑似コード
Event Observe
Shinji Ikari
Male
14
更新
View ViewModel
Pilot { // properties } Pilot .updateButton .onClick = (self) => { $m.save(self.props); }
Binded
・・・
疑似コード
MVC on JavaScript
実演
MVVM
ViewModelとViewの双方向データバインディングは フレームワークの機構に頼ることになる。
Backbone.js, Ember.js, knockout.js, AngularJS, Vue.js……
状態の管理とその反映をより宣言的に行えるパラダイム。
React.jsはちょっと違う新しいライブラリ。
jQueryでDOMをゴチャゴチャいじる時代ではない。
Frameworks
フレームワークは超乱立してるけど、 Backboneとかの有名大手も枯れているし全然現役。
面白そうなんで僕はReactでFlux使っていきます。
ややこしい……けど
MVCとかその派生とか、さらに新しいFluxアーキテクチャとか色々あるけど 根底にあるのは
• Observerパターンを使い • 各イベントを処理して • 状態をちゃんと管理
すること。
それだけのことだけども、大規模化しても破綻しないための方法論やライブラリが
今色々あるアレとかソレとかです。
仕組みは大体Observerパターン
jQueryだけで頑張るより便利楽最高
おしまい