A SUSTAINABLE
WEB FRONTEND
2017/11/30
eureka Meetup #07 -フロントエンドエンジニアリング-
s5ot
Who is
-
太田 宗吾
-
Pairs事業部
-
エンジニア
-
@s5ot
持続可能な成長
高速に
質の高い価値を
届け続ける
持続可能な成長が
必要
Pairs
Webフロントエンドの持続可能な成長へ
向けた取り組み
2015年 初夏
PHPアプリから
SPAへの
フルスクラッチ中
AngularJS
+
TypeScript
-
PC
-
SP
-
NativeアプリのWebView
jQueryには
馴染みがあるが
本格的なSPAの
構築経験はないメンバー
直面する課題
直面する課題
AngularJSに
振り回される
AngularJSの学習曲線
(当時の)AngularJSの問題点
-
Scopeの扱いが厄介
-
大規模アプリを開発するための明確な指針・制約がない
Scopeの扱いが厄介
大規模アプリを開発するための明確な指針がない
-
レイヤー構成
-
UIコンポーネントの切り方
-
ReactにおけるReduxのような基盤になるものがない
治安をよくしなければ・・・
1ページ
1コントローラー的な
実装
1ページ
1コントローラー的な
実装
機能は一通り完成
しかしもっさりして
遅い
Webフロントエンド
といえば・・・?
Webフロントエンド
といえば・・・?
-
APIリクエスト削減
-
HTMLテンプレートキャッシュ
-
データキャッシュ
ついにリリース
高速な価値を提供を
継続していくぞ!!
しかし・・・
Pairsは大きなアプリ
複雑化
このままで持続可能な成長できるんだろうか・・
軸になるアーキテクチャが
必要では・・・
Flux
Flux
Flux
- 一方向のデータフロー
- 状態(データ)をStoreに集中
Flux
Flux
Flux
Flux
Flux
Flux
持続可能な成長のために
-
Flux
-
Webpack
足回りは整った!!
これから
-
高速化
-
AngularJSからの脱却
-
PWA
高速化
高速化
読み込み時間が0.1秒減ると、売上が1%増加
(Amazon.com)
高速化
(Amazon.com)
高速化
(Amazon.com)
-
画像最適化
-
ログイン画面CSSのインライン化
-
CSSファイルの非同期ロード
-
JS/CSSファイルのlong term caching
高速化
(Amazon.com)
高速化
高速化 is Happy
高速化
高速化 is Money
AngularJSからの脱却
AngularJSからの脱却
(気持ち)
AngularJSからの脱却
Angularへの移行が定石と思ってます
(高速化にもつながる)
PWA
PWA
ServiceWorkerによる
高速化の先にPWAはある
PWA
iOS SafariでService Worker
が動くようになる気配
PWA
まずはService Worker
を使いこなしていきたい
つまるところ
高速化
につながる
We’re Hiring!
a sustainable web-frontend
By Sogo Ohta
a sustainable web-frontend
- 173