Skip to content

Instantly share code, notes, and snippets.

@fujimura

fujimura/Rakefile

Last active August 29, 2015 14:01
Show Gist options
  • Save fujimura/a42c78e8979a0ab480f3 to your computer and use it in GitHub Desktop.
Save fujimura/a42c78e8979a0ab480f3 to your computer and use it in GitHub Desktop.
Download ZIP
2014年版フロントエンド開発のあたりまえ @ EdTech CTO Night!
Raw
edtech_cto_night.md

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

自己紹介

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

Quipperとは

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

Quipperのテクノロジースタック

さて

去年のプロジェクト

. . .

$ git ls-files | grep coffee | xargs wc -l | tail -1
   11024 total

. . .

今年のプロジェクト

. . .

$ git ls-files | grep coffee | xargs wc -l | tail -1
   15557 total

. . .

この発表では、27000行のCoffeeScriptでたどり着いた、2014年、Quipperのフロントエンド開発のあたりまえを紹介します。

(1) クライアントの永続化レイヤーを使い倒す

. . .

Why: 画面描画の度にリクエストを発行していると遅い

  • WebSQL、IndexedDB、LocalStorageなどを使い倒す
  • 初回アクセス時にコンテンツをダウンロードして格納している
  • サーバーとの通信なしで殆どの画面が表示できる
  • オフラインアプリ化しやすい
  • (RESTとは何だったのか…)

(2) 非同期処理はPromiseにする

. . .

Why: コールバック地獄回避

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

(3) テンプレート展開はしない

. . .

Why: バグの温床になる

  • モデルの状態と描画されたDOMの乖離が起こりがち
  • テンプレートにロジックが書けると、つい書いてしまう
  • DOMのイベントが剥がれたりもする
  • Backboneのデータバインディングライブラリを使い倒す
  • Vue.jsあたりに注目している

FAQ: HTML5だと結局遅くてネイティブにするんじゃないの？

. . .

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

まとめ

. . .

  • クライアントの永続化レイヤーを使って表示を早くしよう

. . .

  • 非同期処理はPromiseにして制御フローを綺麗にしよう

. . .

  • テンプレート展開はバグりやすいのでやめよう

. . .

  • HTML5で出来る事は全部やろう

. . .

  • ネイティブとうまく分担をしよう

ありがとうございました！

エンジニア募集中です！

Raw
Rakefile
task :compile do
`pandoc -t slidy -s edtech_cto_night.md -o slide.html`
end
task :open do
`open slide.html`
end
task :watch do
require 'listen'
listener = Listen.to('./', only: /\.md$/) do |modified, added, removed|
`rake`
end
listener.start # not blocking
sleep
end
task default: [:compile, :open]
Raw
slide.html
<?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>もしくは [email protected] にメール下さい</li>
</ul>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment