Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. 自己紹介 藤村大介(@ffu_, github.com/fujimura) Quipper, Ltd. Japan Office の開発リー ダー 主にJavaScript

    でSingle Page Application( 以下SPA) を書いている プロジェクトの進行、 各種調整、 人事などもやっている Ruby とHaskell が好き PureScript に注目している
  2. Quipper とは Est. 2010 in London, United Kingdom 知の流通革命を目指している ロンドン、

    東京、 マニラに物理的なオフィスがある 合計40 人弱、 エンジニアは20 人ほど 学習プラットフォー ムを作っている。 具体的にはコンテンツ作成 システムとAPI、 アプリケー ション アジアの先生向けの宿題管理ツー ルQuipper School、 日本の企業 研修にQuipper Training、 ベネッセさんと実証実験プロジェクト
  3. Quipper のテクノロジー スタック バックエンドはRuby on Rails + MongoDB CircleCI でビルドしてHeroku

    にデプロイ。 デー タベー スは MongoLab 要はだいたい外部にお任せ クライアントはHTML5 のSPA が多い。 主にBackbone.js 僕のいるプロジェクトではChaplin.js を使っている
  4. さて 去年のプロジェクト $ 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 のフロントエンド開発のあたりまえを紹介します。
  5. (2) 非同期処理はPromise にする Why: コー ルバック地獄回避 非同期処理はPromise に統一して、 同じAPI で扱う

    制御フロー がコー ルバック渡しよりも柔軟 o n ( ' c l i c k ' ) 等のイベントハンドラもPromise にする アニメー ションの裏でリクエストを飛ばしておく、 なんかも簡単 にできる 例外処理など、 面倒な部分はある
  6. (3) テンプレー ト展開はしない Why: バグの温床になる モデルの状態と描画されたDOM の乖離が起こりがち テンプレー トにロジックが書けると、 つい書いてしまう

    DOM のイベントが剥がれたりもする Backbone のデー タバインディングライブラリを使い倒す Quipper ではbackbone.stickit を使っている Vue.js あたりに注目している
  7. FAQ: HTML5 だと結局遅くてネイティ ブにするんじゃないの? ネイティブにすれば速いと思ったら大間違い HTML5 で当たり前のチュー ニングをすれば速度は出る 速度で問題にならない限りネイティブにはしない HTML+CSS

    はGUI ツー ルキットとして生産性が高い ボトルネックになった部分はネイティブで全力で作る 例えばバッテリ残量、Wifi 強度、 ポップアップ、 永続化などはネ イティブ担当 ネイティブとHTML5 の力を総動員する