• Like
front_server20131218
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

front_server20131218

  • 349 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
349
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
4
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. フロント & サーバ同時開発のメリット Amebaの開発現場から サイバーエージェント 原 一成 12/18/2013 @DeNA Kazunari Hara
  • 2. 原 一成 Hara Kazunari @herablog Web Developer
  • 3. 原 一成 Hara Kazunari @herablog Web Developer 2008年
  • 4. 原 一成 Hara Kazunari @herablog Web Developer
  • 5. 原 一成 Hara Kazunari @herablog Web Developer HTML/CSS/JavaScript
  • 6. Repeat 1em background-­‐color:  #6cf; background-­‐image:    linear-­‐gradient(        to  right,        #ff9  50%,        transparent  50%    ); background-­‐size:  1em;
  • 7. セレクタ flexbox リスト タグ・パンくず 図形 フォーム・ 表・グラフ 設計 パフォーマンス プリプロセッサ スタイルガイド など 全81項目のサンプル集
  • 8. Designer Front Server
  • 9. Webサイト制作あるある
  • 10. コーダーとエンジニアが分かれていて 時間がかかる・確認が大変だ
  • 11. エンジニアの書いたマークアップがひどい
  • 12. コーダーの書いた条件分岐が効率悪い
  • 13. Front Server
  • 14. Front Server
  • 15. ・一貫性のある開発 Front Server ・クオリティ向上 ・開発スピード向上
  • 16. Amebaでの実現方法
  • 17. AJAX
  • 18. 複数リクエストをひ とつにまとめて返す 通信を少なくする (できれば1本) 複数のAPIにアクセス
  • 19. データ周りは専門家 が担当する
  • 20. フロントエンドエンジニア サーバーエンジニア
  • 21. リリースまでの流れ
  • 22. Idea Design Idea Idea Front Data Front Server Data
  • 23. UIを作る (CSS3)
  • 24. UIを作る (CSS3)
  • 25. ページを作る (JavaScript) chikuwa.js
  • 26. ページを作る (JavaScript) 40 31KB 30 20 10 0 5KB 6KB jqMobi Chikuwa jQuery
  • 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. ページを作る (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. データのやり取りをする
  • 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. Git
  • 32. Release
  • 33. デメリット
  • 34. ・サーバーリソースの扱い方に不慣れ だった ・メモリ、キャッシュなど
  • 35. ・コードそのものの品質へのこだわり ・テスト不十分
  • 36. ・サーバーリソースの扱い方に不慣れだった ・コードそのものの品質へのこだわり → 今後の改善ポイント
  • 37. ・サーバーリソースの扱い方に不慣れだった ・コードそのものの品質へのこだわり → 今後の改善ポイント
  • 38. フロント & サーバ同時開発のメリット 終 12/18/2013 @DeNA Kazunari Hara @herablog