2014年版フロントエンド開発のあたりまえ @ EdTech CTO Night!

Transcript

1. 2014 年版フロントエンド開発のあたりまえ Quipper, Ltd. 藤村大介 May 13, 2014 @ EdTech CTO Night!
2. 自己紹介 藤村大介(@ffu_, github.com/fujimura) Quipper, Ltd. Japan Office の開発リー ダー 主にJavaScript でSingle Page Application( 以下SPA) を書いている プロジェクトの進行、 各種調整、 人事などもやっている Ruby とHaskell が好き PureScript に注目している
3. Quipper とは Est. 2010 in London, United Kingdom 知の流通革命を目指している ロンドン、 東京、 マニラに物理的なオフィスがある 合計40 人弱、 エンジニアは20 人ほど 学習プラットフォー ムを作っている。 具体的にはコンテンツ作成 システムとAPI、 アプリケー ション アジアの先生向けの宿題管理ツー ルQuipper School、 日本の企業 研修にQuipper Training、 ベネッセさんと実証実験プロジェクト
4. Quipper のテクノロジー スタック バックエンドはRuby on Rails + MongoDB CircleCI でビルドしてHeroku にデプロイ。 デー タベー スは MongoLab 要はだいたい外部にお任せ クライアントはHTML5 のSPA が多い。 主にBackbone.js 僕のいるプロジェクトではChaplin.js を使っている
5. さて 去年のプロジェクト $ g i t l s - f i l e s | g r e p c o f f e e | x a r g s w c - l | t a i l - 1 1 1 0 2 4 t o t a l 今年のプロジェクト $ g i t l s - f i l e s | g r e p c o f f e e | x a r g s w c - l | t a i l - 1 1 5 5 5 7 t o t a l この発表では、27000 行のCoffeeScript でたどり着いた、2014 年、 Quipper のフロントエンド開発のあたりまえを紹介します。
6. (1) クライアントの永続化レイヤー を使 い倒す Why: 画面描画の度にリクエストを発行していると遅い WebSQL、IndexedDB、LocalStorage などを使い倒す 初回アクセス時にコンテンツをダウンロー ドして格納している サー バー との通信なしで殆どの画面が表示できる オフラインアプリ化しやすい (REST とは何だったのか…)
7. (2) 非同期処理はPromise にする Why: コー ルバック地獄回避 非同期処理はPromise に統一して、 同じAPI で扱う 制御フロー がコー ルバック渡しよりも柔軟 o n ( ' c l i c k ' ) 等のイベントハンドラもPromise にする アニメー ションの裏でリクエストを飛ばしておく、 なんかも簡単 にできる 例外処理など、 面倒な部分はある
8. (3) テンプレー ト展開はしない Why: バグの温床になる モデルの状態と描画されたDOM の乖離が起こりがち テンプレー トにロジックが書けると、 つい書いてしまう DOM のイベントが剥がれたりもする Backbone のデー タバインディングライブラリを使い倒す Quipper ではbackbone.stickit を使っている Vue.js あたりに注目している
9. FAQ: HTML5 だと結局遅くてネイティ ブにするんじゃないの？ ネイティブにすれば速いと思ったら大間違い HTML5 で当たり前のチュー ニングをすれば速度は出る 速度で問題にならない限りネイティブにはしない HTML+CSS はGUI ツー ルキットとして生産性が高い ボトルネックになった部分はネイティブで全力で作る 例えばバッテリ残量、Wifi 強度、 ポップアップ、 永続化などはネ イティブ担当 ネイティブとHTML5 の力を総動員する
10. まとめ クライアントの永続化レイヤー を使って表示を早くしよう 非同期処理はPromise にして制御フロー を綺麗にしよう テンプレー ト展開はバグりやすいのでやめよう HTML5 で出来る事は全部やろう ネイティブとうまく分担をしよう
11. ありがとうございました！ エンジニア募集中です！ https://www.wantedly.com/projects/6602 もしくは daisuke@quipper.com にメー ル下さい