front_server20131218

フロント & サーバ同時開発のメリット~ Amebaの開発現場から ~サイバーエージェント原一成

12/18/2013 @DeNAKazunari Hara

原一成 Hara Kazunari@herablogWeb Developer


2008年



HTML/CSS/JavaScript

http://books.shoeisha.co.jp/book/b109516.html



background-‐color: #6cf;background-‐image: linear-‐gradient( to right, #ff9 50%, transparent 50% );background-‐size: 1em;

Repeat

1em

セレクタ flexboxリストタグ・パンくず図形フォーム・表・グラフ設計パフォーマンスプリプロセッサスタイルガイドなど全81項目のサンプル集




Designer Front Server

Webサイト制作あるある

コーダーとエンジニアが分かれていて時間がかかる・確認が大変だ

エンジニアの書いたマークアップがひどい

コーダーの書いた条件分岐が効率悪い

Front Server

Front Server

・一貫性のある開発・クオリティ向上・開発スピード向上

Front Server

Amebaでの実現方法

AJAX

複数リクエストをひとつにまとめて返す

複数のAPIにアクセス通信を少なくする (できれば1本)

データ周りは専門家が担当する

サーバーエンジニアフロントエンドエンジニア

リリースまでの流れ

Idea

Idea

IdeaDesign

ServerFront FrontDataData

UIを作る (CSS3)

UIを作る (CSS3)

ページを作る (JavaScript)

chikuwa.js

0

10

20

30

40

jqMobi Chikuwa jQuery

6KB5KB

31KB



var notiCount = getNotiCount();tag(‘header’).tag(‘button.menu’).gat().tag(‘h1’).text(‘Ameba’).gat().tag(‘button.noti’).tag(‘span.counter’).text(notiCount).gat()

.gat();

<header><button class=”menu”></button><h1>Ameba</h1><button class=”noti”><span class=”counter”>1</span>

</button></header>

Chikuwa HTML


$.views({‘group.top’ : {init: function(data) {this.data = data || {};

},render: function() {return tag(‘div’);

}}

});

$.routes(‘group’, {‘/’: {name: ‘top’, action: ‘top’},‘/:groupId/info’: {name: ‘info’, action: ‘info’}

});

View Routing

Actionfunction top(vars) {var view = $.view(‘group.top’);page.replace(view);

}

データのやり取りをする

node.js (中継サーバ)

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); } });});

リクエストを受けて、複数のAPIからデータを取得し、ひとつにまとめて返すだけの役割

Git

Release

デメリット

・サーバーリソースの扱い方に不慣れだった・メモリ、キャッシュなど

・コードそのものの品質へのこだわり・テスト不十分

・サーバーリソースの扱い方に不慣れだった・コードそのものの品質へのこだわり→ 今後の改善ポイント

・サーバーリソースの扱い方に不慣れだった・コードそのものの品質へのこだわり→ 今後の改善ポイント

フロント & サーバ同時開発のメリット~ 終 ~

12/18/2013 @DeNAKazunari Hara@herablog

Technology

front_server20131218