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!