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,488 views

Published on

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

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,488
On SlideShare
0
From Embeds
0
Number of Embeds
1,056
Actions
Shares
0
Downloads
6
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

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. ご清聴ありがとうございました

×