Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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(...
Sails.js DEMO
Vue.js
フロントエンド処理を行う
MVVM JavaScript Framework
http://vuejs.org/
Vue.js
• 軽量
• シンプル
• MVVMフレームワーク 
• データバインディング
• v0.10.5 
DataServer DOM
1
2
3
4
Front
DataServer DOM
1
2
3
4
Front
DataServer DOM
1
2
3
4
1
2
3
4
Front
DataServer DOM
1
2
3
4
1
2
3
4
Front
DataServer DOM
1
2
3
4
1
2
3
4
1
2
3
4
Front
DataServer DOM
1
2
3
4
1
2
3
4
1
2
3
4
Front
それぞれの情報を
保持している
Front
DataServer DOM
1
2
3
4
1
2
3
4
1
2
3
4
5 5 5
Front
DataServer DOM
1
2
3
4
1
2
4
1
2
3
4
5 5 5
Front
DataServer DOM
1
2
3
4
1
2
4
1
2
3
4
5 5 5
Front
DataServer DOM
1
2
4
1
2
4
1
2
3
4
5 5 5
Front
DataServer DOM
1
2
4
1
2
4
1
2
4
5 5 5
Front
DataServer DOM
1
2
4
1
2
4
1
2
4
5 5 5
Front
DataServer DOM
1
2
1
2
4
1
2
4
5 5 5
Front
DataServer DOM
1
2
1
2
4
1
2
4
5 5 5
Front
DataServer DOM
1
2
1
2
1
2
4
5 5 5
Front
DataServer DOM
1
2
1
2
1
2
4
5 5 5
それぞれの段階で
操作を行う
DataとDOMは情報を双方向で
同期(バインディグ)したい
Front
DataServer DOM
1
2
3
4
5
Front
DataServer DOM
1
2
3
4
5
Front
DataServer DOM
1
2
3
4
1
2
3
4
1
2
3
4
5 5 5
Front
DataServer DOM
1
2
4
1
2
4
1
2
3
4
5 5 5
Front
DataServer DOM
1
2
1
2
1
2
3
4
5 5 5
Vue.js DEMO
まとめ
• JSON
• データバインディング
• データ駆動
参考
• TodoMVC

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

http://mizchi.hatenablog.com/entry/2014/02/13/...
ご清聴ありがとうございました
Node.jsで始める Modern JavaScript Framework
Upcoming SlideShare
Loading in …5
×

Node.jsで始める Modern JavaScript Framework

2,546 views

Published on

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

Published in: Technology
  • Be the first to comment

Node.jsで始める Modern JavaScript Framework

  1. 1. Node.jsで始める Modern JavaScript Framework 夏のJAWS-UG三都物語 2014 2014.7.5
  2. 2. 自己紹介 • かみやん (Twitter@kamiyam)
 http://nantokaworks.com • Engineer • たまにカメラの人
  3. 3. コミュニティ紹介 • Node.js Osaka
 2,3ヶ月に一度テーマを設けて
 発表・シェアする勉強会
  4. 4. 近頃、Node.jsどうよ?
  5. 5. JavaScriptが流行っているので 全部Node.jsで構築するのか???
  6. 6. それはない個人的には実装しているけど…
  7. 7. ServerSideがJavaScriptだから 出来ることもある
  8. 8. Modernな実装パターン バックエンドはデータを返すだけ の APIサーバとして実装し、フロ ントエンドでデータの表示を行う 仕組み
  9. 9. Sails.js + Vue.js
  10. 10. Sails.js サーバサイド処理を行う MVC JavaScript Framework http://sailsjs.org/
  11. 11. Sails.js • Ruby on Railsに影響を受けたフレームワーク • Controller/View + Routing • Sails.io (Socket.io v0.9系  バンドル) • CRUD 対応 • v0.9.16(開発版: v0.10.0-rc8)
  12. 12. Sails.js DEMO
  13. 13. Vue.js フロントエンド処理を行う MVVM JavaScript Framework http://vuejs.org/
  14. 14. Vue.js • 軽量 • シンプル • MVVMフレームワーク  • データバインディング • v0.10.5 
  15. 15. DataServer DOM 1 2 3 4 Front
  16. 16. DataServer DOM 1 2 3 4 Front
  17. 17. DataServer DOM 1 2 3 4 1 2 3 4 Front
  18. 18. DataServer DOM 1 2 3 4 1 2 3 4 Front
  19. 19. DataServer DOM 1 2 3 4 1 2 3 4 1 2 3 4 Front
  20. 20. DataServer DOM 1 2 3 4 1 2 3 4 1 2 3 4 Front それぞれの情報を 保持している
  21. 21. Front DataServer DOM 1 2 3 4 1 2 3 4 1 2 3 4 5 5 5
  22. 22. Front DataServer DOM 1 2 3 4 1 2 4 1 2 3 4 5 5 5
  23. 23. Front DataServer DOM 1 2 3 4 1 2 4 1 2 3 4 5 5 5
  24. 24. Front DataServer DOM 1 2 4 1 2 4 1 2 3 4 5 5 5
  25. 25. Front DataServer DOM 1 2 4 1 2 4 1 2 4 5 5 5
  26. 26. Front DataServer DOM 1 2 4 1 2 4 1 2 4 5 5 5
  27. 27. Front DataServer DOM 1 2 1 2 4 1 2 4 5 5 5
  28. 28. Front DataServer DOM 1 2 1 2 4 1 2 4 5 5 5
  29. 29. Front DataServer DOM 1 2 1 2 1 2 4 5 5 5
  30. 30. Front DataServer DOM 1 2 1 2 1 2 4 5 5 5 それぞれの段階で 操作を行う
  31. 31. DataとDOMは情報を双方向で 同期(バインディグ)したい
  32. 32. Front DataServer DOM 1 2 3 4 5
  33. 33. Front DataServer DOM 1 2 3 4 5
  34. 34. Front DataServer DOM 1 2 3 4 1 2 3 4 1 2 3 4 5 5 5
  35. 35. Front DataServer DOM 1 2 4 1 2 4 1 2 3 4 5 5 5
  36. 36. Front DataServer DOM 1 2 1 2 1 2 3 4 5 5 5
  37. 37. Vue.js DEMO
  38. 38. まとめ • JSON • データバインディング • データ駆動
  39. 39. 参考 • 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
  40. 40. ご清聴ありがとうございました

×