front_server20131218

769 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

front_server20131218

  1. 1. フロント & サーバ同時開発のメリット Amebaの開発現場から サイバーエージェント 原 一成 12/18/2013 @DeNA Kazunari Hara
  2. 2. 原 一成 Hara Kazunari @herablog Web Developer
  3. 3. 原 一成 Hara Kazunari @herablog Web Developer 2008年
  4. 4. 原 一成 Hara Kazunari @herablog Web Developer
  5. 5. 原 一成 Hara Kazunari @herablog Web Developer HTML/CSS/JavaScript
  6. 6. Repeat 1em background-­‐color:  #6cf; background-­‐image:    linear-­‐gradient(        to  right,        #ff9  50%,        transparent  50%    ); background-­‐size:  1em;
  7. 7. セレクタ flexbox リスト タグ・パンくず 図形 フォーム・ 表・グラフ 設計 パフォーマンス プリプロセッサ スタイルガイド など 全81項目のサンプル集
  8. 8. Designer Front Server
  9. 9. Webサイト制作あるある
  10. 10. コーダーとエンジニアが分かれていて 時間がかかる・確認が大変だ
  11. 11. エンジニアの書いたマークアップがひどい
  12. 12. コーダーの書いた条件分岐が効率悪い
  13. 13. Front Server
  14. 14. Front Server
  15. 15. ・一貫性のある開発 Front Server ・クオリティ向上 ・開発スピード向上
  16. 16. Amebaでの実現方法
  17. 17. AJAX
  18. 18. 複数リクエストをひ とつにまとめて返す 通信を少なくする (できれば1本) 複数のAPIにアクセス
  19. 19. データ周りは専門家 が担当する
  20. 20. フロントエンドエンジニア サーバーエンジニア
  21. 21. リリースまでの流れ
  22. 22. Idea Design Idea Idea Front Data Front Server Data
  23. 23. UIを作る (CSS3)
  24. 24. UIを作る (CSS3)
  25. 25. ページを作る (JavaScript) chikuwa.js
  26. 26. ページを作る (JavaScript) 40 31KB 30 20 10 0 5KB 6KB jqMobi Chikuwa jQuery
  27. 27. ページを作る (JavaScript) Chikuwa HTML var notiCount = getNotiCount(); <header> tag( header ) <button class= menu ></button> .tag( button.menu ).gat() <h1>Ameba</h1> .tag( h1 ).text( Ameba ).gat() <button class= noti > .tag( button.noti ) .tag( span.counter ) .text(notiCount).gat() .gat(); <span class= counter >1</span> </button> </header>
  28. 28. ページを作る (JavaScript) View Routing $.views({ $.routes( group , { /: group.top : { /:groupId/info : {name: info , action: info } init: function(data) { this.data = data ¦¦ {}; }, render: function() { return tag( div ); }); Action function top(vars) { var view = $.view( group.top ); } page.replace(view); } }); {name: top , action: top }, }
  29. 29. データのやり取りをする
  30. 30. node.js (中継サーバ) リクエストを受けて、複数の APIからデータを取得し、ひと つにまとめて返すだけの役割 app.get( /api/:userId , function(req, res) { var userId = req.param( userId ); api.get( / + userId, function(err, result) { if (err) { res.send(err); } else { res.json(result); } }); });
  31. 31. Git
  32. 32. Release
  33. 33. デメリット
  34. 34. ・サーバーリソースの扱い方に不慣れ だった ・メモリ、キャッシュなど
  35. 35. ・コードそのものの品質へのこだわり ・テスト不十分
  36. 36. ・サーバーリソースの扱い方に不慣れだった ・コードそのものの品質へのこだわり → 今後の改善ポイント
  37. 37. ・サーバーリソースの扱い方に不慣れだった ・コードそのものの品質へのこだわり → 今後の改善ポイント
  38. 38. フロント & サーバ同時開発のメリット 終 12/18/2013 @DeNA Kazunari Hara @herablog

×