|
<?xml version="1.0" encoding="utf-8"?> |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
|
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
|
<html xmlns="http://www.w3.org/1999/xhtml"> |
|
<head> |
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|
<meta http-equiv="Content-Style-Type" content="text/css" /> |
|
<meta name="generator" content="pandoc" /> |
|
<meta name="author" content="藤村大介" /> |
|
<title>2014年版フロントエンド開発のあたりまえ</title> |
|
<style type="text/css">code{white-space: pre;}</style> |
|
<link rel="stylesheet" type="text/css" media="screen, projection, print" |
|
href="http://www.w3.org/Talks/Tools/Slidy2/styles/slidy.css" /> |
|
<script src="http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js" |
|
charset="utf-8" type="text/javascript"></script> |
|
</head> |
|
<body> |
|
<div class="slide titlepage"> |
|
<h1 class="title">2014年版フロントエンド開発のあたりまえ</h1> |
|
<p class="author"> |
|
藤村大介 |
|
</p> |
|
<p class="date">May 13, 2014 @ EdTech CTO Night!</p> |
|
</div> |
|
<div id="自己紹介" class="slide section level1"> |
|
<h1>自己紹介</h1> |
|
<ul> |
|
<li>藤村大介(<a href="https://twitter.com/ffu_"><span class="citation">@ffu</span>_</a>, <a href="https://github.com/fujimura">github.com/fujimura</a>)</li> |
|
<li>Quipper, Ltd. Japan Officeの開発リーダー</li> |
|
<li>主にJavaScriptでSingle Page Application(以下SPA)を書いている</li> |
|
<li>プロジェクトの進行、各種調整、人事などもやっている</li> |
|
<li>RubyとHaskellが好き</li> |
|
<li><a href="http://purescript.org">PureScript</a>に注目している</li> |
|
</ul> |
|
</div> |
|
<div id="quipperとは" class="slide section level1"> |
|
<h1>Quipperとは</h1> |
|
<ul> |
|
<li>Est. 2010 in London, United Kingdom</li> |
|
<li>知の流通革命を目指している</li> |
|
<li>ロンドン、東京、マニラに物理的なオフィスがある</li> |
|
<li>合計40人弱、エンジニアは20人ほど</li> |
|
<li>学習プラットフォームを作っている。具体的にはコンテンツ作成システムとAPI、アプリケーション</li> |
|
<li>アジアの先生向けの宿題管理ツール<a href="http://www.quipperschool.com/">Quipper School</a>、日本の企業研修に<a href="http://www.quippertraining.com/ja/">Quipper Training</a>、ベネッセさんと<a href="http://itpro.nikkeibp.co.jp/article/NCD/20140421/551904/">実証実験プロジェクト</a></li> |
|
</ul> |
|
</div> |
|
<div id="quipperのテクノロジースタック" class="slide section level1"> |
|
<h1>Quipperのテクノロジースタック</h1> |
|
<ul> |
|
<li>バックエンドはRuby on Rails + MongoDB</li> |
|
<li><a href="http://blog.madoro.org/mn/95">CircleCIでビルドしてHerokuにデプロイ</a>。<a href="http://blog.kyanny.me/entry/2013/07/28/%E3%83%AB%E3%83%BC%E3%82%AF%E3%80%81_MongoLab_%E3%82%92%E4%BD%BF%E3%81%88%EF%BC%81">データベースはMongoLab</a></li> |
|
<li>要はだいたい外部にお任せ</li> |
|
<li>クライアントはHTML5のSPAが多い。主にBackbone.js</li> |
|
<li>僕のいるプロジェクトでは<a href="http://chaplinjs.org/">Chaplin.js</a>を使っている</li> |
|
</ul> |
|
</div> |
|
<div id="さて" class="slide section level1"> |
|
<h1>さて</h1> |
|
<div class="incremental"> |
|
<p>去年のプロジェクト</p> |
|
</div> |
|
<div class="incremental"> |
|
<pre><code>$ git ls-files | grep coffee | xargs wc -l | tail -1 |
|
11024 total</code></pre> |
|
</div> |
|
<div class="incremental"> |
|
<p>今年のプロジェクト</p> |
|
</div> |
|
<div class="incremental"> |
|
<pre><code>$ git ls-files | grep coffee | xargs wc -l | tail -1 |
|
15557 total</code></pre> |
|
</div> |
|
<div class="incremental"> |
|
<p>この発表では、27000行のCoffeeScriptでたどり着いた、2014年、Quipperのフロントエンド開発のあたりまえを紹介します。</p> |
|
</div> |
|
</div> |
|
<div id="クライアントの永続化レイヤーを使い倒す" class="slide section level1"> |
|
<h1>(1) クライアントの永続化レイヤーを使い倒す</h1> |
|
<div class="incremental"> |
|
</div> |
|
<div class="incremental"> |
|
<h3 id="why-画面描画の度にリクエストを発行していると遅い">Why: 画面描画の度にリクエストを発行していると遅い</h3> |
|
<ul> |
|
<li>WebSQL、IndexedDB、LocalStorageなどを使い倒す</li> |
|
<li>初回アクセス時にコンテンツをダウンロードして格納している</li> |
|
<li>サーバーとの通信なしで殆どの画面が表示できる</li> |
|
<li>オフラインアプリ化しやすい</li> |
|
<li>(RESTとは何だったのか…)</li> |
|
</ul> |
|
</div> |
|
</div> |
|
<div id="非同期処理はpromiseにする" class="slide section level1"> |
|
<h1>(2) 非同期処理はPromiseにする</h1> |
|
<div class="incremental"> |
|
</div> |
|
<div class="incremental"> |
|
<h3 id="why-コールバック地獄回避">Why: コールバック地獄回避</h3> |
|
<ul> |
|
<li>非同期処理はPromiseに統一して、同じAPIで扱う</li> |
|
<li>制御フローがコールバック渡しよりも柔軟</li> |
|
<li><code>on('click')</code>等のイベントハンドラもPromiseにする</li> |
|
<li>アニメーションの裏でリクエストを飛ばしておく、なんかも簡単にできる</li> |
|
<li>例外処理など、面倒な部分はある</li> |
|
</ul> |
|
</div> |
|
</div> |
|
<div id="テンプレート展開はしない" class="slide section level1"> |
|
<h1>(3) テンプレート展開はしない</h1> |
|
<div class="incremental"> |
|
</div> |
|
<div class="incremental"> |
|
<h3 id="why-バグの温床になる">Why: バグの温床になる</h3> |
|
<ul> |
|
<li>モデルの状態と描画されたDOMの乖離が起こりがち</li> |
|
<li>テンプレートにロジックが書けると、つい書いてしまう</li> |
|
<li>DOMのイベントが剥がれたりもする</li> |
|
<li>Backboneのデータバインディングライブラリを使い倒す</li> |
|
<li>Quipperでは<a href="http://nytimes.github.io/backbone.stickit/">backbone.stickit</a>を使っている</li> |
|
<li><a href="http://vuejs.org/">Vue.js</a>あたりに注目している</li> |
|
</ul> |
|
</div> |
|
</div> |
|
<div id="faq-html5だと結局遅くてネイティブにするんじゃないの" class="slide section level1"> |
|
<h1>FAQ: HTML5だと結局遅くてネイティブにするんじゃないの？</h1> |
|
<div class="incremental"> |
|
</div> |
|
<div class="incremental"> |
|
<ul> |
|
<li>ネイティブにすれば速いと思ったら大間違い</li> |
|
<li>HTML5で当たり前のチューニングをすれば速度は出る</li> |
|
<li>速度で問題にならない限りネイティブにはしない</li> |
|
<li>HTML+CSSはGUIツールキットとして生産性が高い</li> |
|
<li>ボトルネックになった部分はネイティブで全力で作る</li> |
|
<li>例えばバッテリ残量、Wifi強度、ポップアップ、永続化などはネイティブ担当</li> |
|
<li>ネイティブとHTML5の力を総動員する</li> |
|
</ul> |
|
</div> |
|
</div> |
|
<div id="まとめ" class="slide section level1"> |
|
<h1>まとめ</h1> |
|
<div class="incremental"> |
|
</div> |
|
<div class="incremental"> |
|
<ul> |
|
<li>クライアントの永続化レイヤーを使って表示を早くしよう</li> |
|
</ul> |
|
</div> |
|
<div class="incremental"> |
|
<ul> |
|
<li>非同期処理はPromiseにして制御フローを綺麗にしよう</li> |
|
</ul> |
|
</div> |
|
<div class="incremental"> |
|
<ul> |
|
<li>テンプレート展開はバグりやすいのでやめよう</li> |
|
</ul> |
|
</div> |
|
<div class="incremental"> |
|
<ul> |
|
<li>HTML5で出来る事は全部やろう</li> |
|
</ul> |
|
</div> |
|
<div class="incremental"> |
|
<ul> |
|
<li>ネイティブとうまく分担をしよう</li> |
|
</ul> |
|
</div> |
|
</div> |
|
<div id="ありがとうございました" class="slide section level1"> |
|
<h1>ありがとうございました！</h1> |
|
<h3 id="エンジニア募集中です">エンジニア募集中です！</h3> |
|
<ul> |
|
<li><a href="https://www.wantedly.com/projects/6602">https://www.wantedly.com/projects/6602</a></li> |
|
<li>もしくは daisuke@quipper.com にメール下さい</li> |
|
</ul> |
|
</div> |
|
</body> |
|
</html> |
