Node.jsで始める Modern JavaScript Framework

夏のJAWS-UG三都物語 2014

2014.7.5

自己紹介

• かみやん (Twitter@kamiyam)

http://nantokaworks.com

• Engineer

• たまにカメラの人

コミュニティ紹介

• Node.js Osaka

2,3ヶ月に一度テーマを設けて

発表・シェアする勉強会

近頃、Node.jsどうよ？

JavaScriptが流行っているので

全部Node.jsで構築するのか？？？

それはない個人的には実装しているけど…

ServerSideがJavaScriptだから

出来ることもある

Modernな実装パターン

バックエンドはデータを返すだけの APIサーバとして実装し、フロントエンドでデータの表示を行う仕組み

Sails.js + Vue.js

Sails.js

サーバサイド処理を行う

MVC JavaScript Framework

http://sailsjs.org/

Sails.js• Ruby on Railsに影響を受けたフレームワーク

• Controller/View + Routing

• Sails.io (Socket.io v0.9系  バンドル)

• CRUD 対応

• v0.9.16（開発版: v0.10.0-rc8）

Sails.js DEMO

Vue.js

フロントエンド処理を行う

MVVM JavaScript Framework

http://vuejs.org/

Vue.js• 軽量

• シンプル

• MVVMフレームワーク 

• データバインディング

• v0.10.5 

DataServer DOM1234

Front

DataServer DOM1234

Front

DataServer DOM1234

1234

Front

DataServer DOM1234

1234

Front

DataServer DOM1234

1234

1234

Front

DataServer DOM1234

1234

1234

Front

それぞれの情報を 保持している

FrontDataServer DOM

1234

1234

12345 5 5

FrontDataServer DOM

1234

12

4

12345 5 5

FrontDataServer DOM

1234

12

4

12345 5 5

FrontDataServer DOM

12

4

12

4

12345 5 5

FrontDataServer DOM

12

4

12

4

12

45 5 5

FrontDataServer DOM

12

4

12

4

12

45 5 5

FrontDataServer DOM

12

12

4

12

45 5 5

FrontDataServer DOM

12

12

4

12

45 5 5

FrontDataServer DOM

12

12

12

45 5 5

FrontDataServer DOM

12

12

12

45 5 5

それぞれの段階で 操作を行う

DataとDOMは情報を双方向で同期（バインディグ）したい

FrontDataServer DOM

12345

FrontDataServer DOM

12345

FrontDataServer DOM

1234

1234

12345 5 5

FrontDataServer DOM

12

4

12

4

12345 5 5

FrontDataServer DOM

12

12

12345 5 5

Vue.js DEMO

まとめ

• JSON •データバインディング

•データ駆動

参考• TodoMVC

http://todomvc.com/

• 軽量でパワフルなデータバインディングMVVM, vue.jsで遊んでみた 

http://mizchi.hatenablog.com/entry/2014/02/13/153742

• お前自分ちのページャUIが本当に速いと思ってんの？

https://speakerdeck.com/mizchi/oqian-zi-fen-tifalsepeziyauigaben-dang-nisu-itosi-tutenfalse

ご清聴ありがとうございました