2014.7.5 夏のJAWS-UG三都物語 2014 Trac4 Node.js Osaka コミュニティ

1. Node.jsで始める
Modern JavaScript Framework
夏のJAWS-UG三都物語 2014
2014.7.5

2. 自己紹介
• かみやん (Twitter@kamiyam)
http://nantokaworks.com
• Engineer
• たまにカメラの人

3. コミュニティ紹介
• Node.js Osaka
2,3ヶ月に一度テーマを設けて
発表・シェアする勉強会

5. 近頃、Node.jsどうよ？

6. JavaScriptが流行っているので
全部Node.jsで構築するのか？？？

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

8. ServerSideがJavaScriptだから
出来ることもある

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

10. Sails.js + Vue.js

11. Sails.js
サーバサイド処理を行う
MVC JavaScript Framework
http://sailsjs.org/

12. Sails.js
• Ruby on Railsに影響を受けたフレームワーク
• Controller/View + Routing
• Sails.io (Socket.io v0.9系 バンドル)
• CRUD 対応
• v0.9.16（開発版: v0.10.0-rc8）

13. Sails.js DEMO

14. Vue.js
フロントエンド処理を行う
MVVM JavaScript Framework
http://vuejs.org/

15. Vue.js
• 軽量
• シンプル
• MVVMフレームワーク
• データバインディング
• v0.10.5

16. DataServer DOM
1
2
3
4
Front

17. DataServer DOM
1
2
3
4
Front

18. DataServer DOM
1
2
3
4
1
2
3
4
Front

19. DataServer DOM
1
2
3
4
1
2
3
4
Front

20. DataServer DOM
1
2
3
4
1
2
3
4
1
2
3
4
Front

21. DataServer DOM
1
2
3
4
1
2
3
4
1
2
3
4
Front
それぞれの情報を
保持している

22. Front
DataServer DOM
1
2
3
4
1
2
3
4
1
2
3
4
5 5 5

23. Front
DataServer DOM
1
2
3
4
1
2
4
1
2
3
4
5 5 5

24. Front
DataServer DOM
1
2
3
4
1
2
4
1
2
3
4
5 5 5

25. Front
DataServer DOM
1
2
4
1
2
4
1
2
3
4
5 5 5

26. Front
DataServer DOM
1
2
4
1
2
4
1
2
4
5 5 5

27. Front
DataServer DOM
1
2
4
1
2
4
1
2
4
5 5 5

28. Front
DataServer DOM
1
2
1
2
4
1
2
4
5 5 5

29. Front
DataServer DOM
1
2
1
2
4
1
2
4
5 5 5

30. Front
DataServer DOM
1
2
1
2
1
2
4
5 5 5

31. Front
DataServer DOM
1
2
1
2
1
2
4
5 5 5
それぞれの段階で
操作を行う

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

33. Front
DataServer DOM
1
2
3
4
5

34. Front
DataServer DOM
1
2
3
4
5

35. Front
DataServer DOM
1
2
3
4
1
2
3
4
1
2
3
4
5 5 5

36. Front
DataServer DOM
1
2
4
1
2
4
1
2
3
4
5 5 5

37. Front
DataServer DOM
1
2
1
2
1
2
3
4
5 5 5

38. Vue.js DEMO

39. まとめ
• JSON
• データバインディング
• データ駆動

40. 参考
• 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

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