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

Transcript

1. 2014
   年版フロントエンド開発のあたりまえ
   Quipper, Ltd.
   藤村大介
   May 13, 2014 @ EdTech CTO Night!
   

   View Slide

2. 自己紹介
   藤村大介(@ffu_, github.com/fujimura)
   Quipper, Ltd. Japan Office
   の開発リー
   ダー
   主にJavaScript
   でSingle Page Application(
   以下SPA)
   を書いている
   プロジェクトの進行、
   各種調整、
   人事などもやっている
   Ruby
   とHaskell
   が好き
   PureScript
   に注目している
   

   View Slide

3. Quipper
   とは
   Est. 2010 in London, United Kingdom
   知の流通革命を目指している
   ロンドン、
   東京、
   マニラに物理的なオフィスがある
   合計40
   人弱、
   エンジニアは20
   人ほど
   学習プラットフォー
   ムを作っている。
   具体的にはコンテンツ作成
   システムとAPI、
   アプリケー
   ション
   アジアの先生向けの宿題管理ツー
   ルQuipper School、
   日本の企業
   研修にQuipper Training、
   ベネッセさんと実証実験プロジェクト
   

   View Slide

4. Quipper
   のテクノロジー
   スタック
   バックエンドはRuby on Rails + MongoDB
   CircleCI
   でビルドしてHeroku
   にデプロイ。
   デー
   タベー
   スは
   MongoLab
   要はだいたい外部にお任せ
   クライアントはHTML5
   のSPA
   が多い。
   主にBackbone.js
   僕のいるプロジェクトではChaplin.js
   を使っている
   

   View Slide

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
   のフロントエンド開発のあたりまえを紹介します。
   

   View Slide

6. (1)
   クライアントの永続化レイヤー
   を使
   い倒す
   Why:
   画面描画の度にリクエストを発行していると遅い
   WebSQL、IndexedDB、LocalStorage
   などを使い倒す
   初回アクセス時にコンテンツをダウンロー
   ドして格納している
   サー
   バー
   との通信なしで殆どの画面が表示できる
   オフラインアプリ化しやすい
   (REST
   とは何だったのか…)
   

   View Slide

7. (2)
   非同期処理はPromise
   にする
   Why:
   コー
   ルバック地獄回避
   非同期処理はPromise
   に統一して、
   同じAPI
   で扱う
   制御フロー
   がコー
   ルバック渡しよりも柔軟
   o
   n
   (
   '
   c
   l
   i
   c
   k
   '
   )
   等のイベントハンドラもPromise
   にする
   アニメー
   ションの裏でリクエストを飛ばしておく、
   なんかも簡単
   にできる
   例外処理など、
   面倒な部分はある
   

   View Slide

8. (3)
   テンプレー
   ト展開はしない
   Why:
   バグの温床になる
   モデルの状態と描画されたDOM
   の乖離が起こりがち
   テンプレー
   トにロジックが書けると、
   つい書いてしまう
   DOM
   のイベントが剥がれたりもする
   Backbone
   のデー
   タバインディングライブラリを使い倒す
   Quipper
   ではbackbone.stickit
   を使っている
   Vue.js
   あたりに注目している
   

   View Slide

9. FAQ: HTML5
   だと結局遅くてネイティ
   ブにするんじゃないの？
   ネイティブにすれば速いと思ったら大間違い
   HTML5
   で当たり前のチュー
   ニングをすれば速度は出る
   速度で問題にならない限りネイティブにはしない
   HTML+CSS
   はGUI
   ツー
   ルキットとして生産性が高い
   ボトルネックになった部分はネイティブで全力で作る
   例えばバッテリ残量、Wifi
   強度、
   ポップアップ、
   永続化などはネ
   イティブ担当
   ネイティブとHTML5
   の力を総動員する
   

   View Slide

10. まとめ
    クライアントの永続化レイヤー
    を使って表示を早くしよう
    非同期処理はPromise
    にして制御フロー
    を綺麗にしよう
    テンプレー
    ト展開はバグりやすいのでやめよう
    HTML5
    で出来る事は全部やろう
    ネイティブとうまく分担をしよう
    

    View Slide

11. ありがとうございました！
    エンジニア募集中です！
    https://www.wantedly.com/projects/6602
    もしくは daisuke@quipper.com
    にメー
    ル下さい
    

    View Slide