$30 off During Our Annual Pro Sale. View Details »

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

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

Fujimura Daisuke

May 13, 2014
Tweet

More Decks by Fujimura Daisuke

Other Decks in Programming

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
    もしくは [email protected]
    にメー
    ル下さい

    View Slide