how to develop a huge single page application
TRANSCRIPT
- How to develop a Huge SPA using TypeScript & AngularJS -
Developers Summit 2016
2016.02.18
自己紹介
俺の名前を言ってみろ
- Introduce myself -
山田 直樹 @wakamsha
自己紹介
株式会社リクルートマーケティングパートナーズ ( 2014年7月 ～ ) フロントエンドエンジニア
Naoki YAMADA
リクルートマーケティングパートナーズの エンジニア、デザイナー、スクラムマスターたちが
発信する Web 開発情報メディア
http://tech.recruit-mp.co.jp
NET BIZ DIV. TECH BLOG
https://eigosapuri.jp
英語サプリ
• 『聴く力』『話す力』の向上に特化した学習サービス
• ドラマ仕立てのストーリーに登場するキャラになりきって会話の練習
• 音声認識機能により発音の解析・フィードバックをリアルタイムに表示
• 聞き取れなかった発音とその原因を自動検知し、一人ひとりの原因に合ったトレーニングを提供
2015年 4月上旬- April 2015 early -
新規サービス作るんですよ。 しかも iOS、Android、Web のマルチプラットフォーム展開で！エンジニア A
wakamsha
へぇ～…
せっかくなので Swift、Kotlin、Scala、TypeScript と全部型推論な言語で作ってやろうかなと考えて
都内某所 とある呑み会にて
せっかくなので Swift、Kotlin、Scala、TypeScript と全部型推論な言語で作ってやろうかなと考えています！
エンジニア A
あ、サーバーサイドは API しか返さないような仕様にしたいので、Web は SPA になっちゃいますね
wakamsha
へー、すごいじゃないですか。 完全 SPA なんて実現したらリクルート史上初なんじゃないですかね？
都内某所 とある呑み会にて
じゃ、Web 版のフロントエンド開発 おねがいしますね
エンジニア A
wakamsha
ファッ！？
都内某所 とある呑み会にて
当時の スキルセット
HTML CSS ( SCSS )
JavaScript ( CoffeeScript ) Vue.js GRUNT MIDDLEMAN RoR
当時の スキルセット
HTML CSS ( SCSS )
JavaScript ( CoffeeScript ) Vue.js GRUNT MIDDLEMAN RoR
• HTML、CSS はそれなりに自信あり
• JavaScript は人並み程度 ( CoffeeScript をメインに使う )
• JavaScript フレームワークは Vue.js を実務で使ったことあり
• 元々 Flash ディベロッパーだったが、ActionScript は殆ど忘れてしまっている
当時の スキルセット
HTML CSS ( SCSS )
JavaScript ( CoffeeScript ) Vue.js GRUNT MIDDLEMAN RoR
SPA やったことない
2015年 5月- May 2015 -
リリース日は決まっているが仕様は白紙状態
あるのは PO ( プロダクトオーナー ) の 壮大な夢が書かれた社内 Wiki くらい
- これまでに無い新しい英語学習サービス - リスニング力とスピーキング力の訓練に特化 - 音声認識テクノロジーを使いたい - 著名な先生方にも出演いただきたいよね！ - ユーザーごとに最適な学習方法を提案しよう - その他にもたくさん…
？
とりあえず SPA を作るための
技術調査をはじめることに
SinglePageApplication なので JavaScript が大規模になるのは必然
- Too Fat Front-end Code -
• Microsoft が開発した AltJS ( トランスパイラ )
• JavaScript のスーパーセット ( 完全上位互換 )
• 静的型付け言語
• 型推論あり
• 圧倒的多機能 • Class, Interface, Arrow func, Generic, Module, Namespace …
TypeScript
• Google が開発したフルスタック JS フレームワーク
• 圧倒的多機能 • Data binding, Routing, Custom directive, D.I, Promise, and more…
• 特に強力なルーティング機能は SPA にうってつけ
AngularJS
• 軽量・高速なタスクランナー
• チェーンメソッド風にタスクを定義するのが特徴
• GRUNT と違い、よりプログラマブルに定義できる
• 複雑なタスクもプロダクションコードを書くノリで押し切る事ができる
Gulp
etc …
• 調査した内容はすべて弊社ブログにて公開済み
• 情報の出し惜しみはしない
• アウトプットまでやってはじめて技術調査
http://tech.recruit-mp.co.jp
NET BIZ DIV. TECH BLOG
これでいこう ( かな )
2015年 6月上旬- June 2015 early -
仕様が一向に決まらない…
どうして仕様が決まらない？
• PO はとある事情から現場と距離を置いてしまっている
• 現場リーダーがチーム内の意向をまとめて PO に報告するにも、微妙にお互いの認識が合わず衝突の繰り返し
• 日に日に憔悴していく現場リーダー (́・ω・`)
• 傍観する
2015年 6月下旬- June 2015 in late -
仕様が一向に決まらない…
シャレになってないので二回言いました
• 全員で仕様策定のためのカンヅメを敢行
• 朝から晩まで会議室に篭もり、全員で仕様を決める
• PO にも会議に参加してもらい、スクラム開発の一員として動いてもらう
• およそ 2週間で 80％ ほどの仕様が固まる
2015年 7月- July 2015 -
メンバーも増えていよいよ本開発スタート
- Two man cell Front-end engineers -
New Comer
2 DAYS
1 WEEK
極めた！
フロントエンド
この仕組みだとダメっすね…
wakamsha
え…？
New Comer
設計は何度でも見直す
これがヤバイ１
New Comer
これがヤバイ２
これがヤバイ３
設計は何度でも見直す
ちょっと先輩 そんなんで大丈夫っすかｗｗｗNew Comer
wakamsha
がががが、頑張ります！
設計は何度でも見直す
UI Router 導入
The companion suite(s) to the AngularJS framework.
コードの品質に妥協しない
プルリクエストは優先的に対応
分からなければ即座に教えを請う
開発ポリシー
2015年 10月下旬- October 2015 in late -
放置していた細かいバグが大量に積み上がる
iOS & Android エンジニアも Web に参戦
分からないところがあれば、 プルリクレビュー や ペアプロでカバー
佳境に差し掛かったので総力戦
2015年 11月下旬- November 2015 in late -
リリース直前になって問題発生
IE よ、お前はどれだけ我々を苦しめれば気が済むんだ…
IE 9 のみで発生するクロスドメイン問題
API 疎通がどうしても出来ない…
これもう無理っすよ。 時間もないことですし、 IE9 のサポート切りましょうよ！
wakamsha
くっ、もはやこれまでか…
New Comer
マジか～。
IE9 のみで発生するクロスドメイン問題
PO
データ解析班
マジか～。 ちなみにさ、他の弊社サービスにおける IE9 の 利用率ってどれくらいなの？
えーと…
現在 約 8% ですね
IE9 のみで発生するクロスドメイン問題
PO
んじゃ、 ひとまず切り捨てよう！
wakamsha
うおおおおおおおおおおおおおおおおおおおおおおおーっ！！！！
New Comer
うおおおおおおおおおおおおおおおおおおおおおおおーっ！！！！
IE9 のみで発生するクロスドメイン問題
PO
んじゃ、 ひとまず切り捨てよう！
wakamsha
うおおおおおおおおおおおおおおおおおおおおおおおーっ！！！！
New Comer
うおおおおおおおおおおおおおおおおおおおおおおおーっ！！！！
IE9 のみで発生するクロスドメイン問題
• 一応この問題はリリース後に改修済み
• ただし Windows7 ~ 10 の場合、IE11 未満はサポート対象外となるため、今後 IE9 のサポートは消極的になると思われ
2015年 11月30日- November 30, 2015 -
英語サプリ Web 版リリース
• リリース2日前までは何かとアーキテクチャの見直しを敢行
• リファクタリングの手も最後まで止めなかった
• リリース直前は比較的穏やか
• この頃になると残業もほぼナシ
• 振り返ってみれば開発期間中の休日出勤はゼロ
数字で振り返ってみる
36CUSTOM
DIRECTIVEARCHITECTURE
8 2 171 5STEP COUNT
,
学び 1/3
• TypeScript に救われた • 型は正義
• 冗長・コード量が増えるというのであれば、それは使用しているテキストエディタを見直すチャンス
• JavaScript が苦手という人にこそオススメしたい
学び 2/3
• AngularJS の採用は正解だった • 学習コストは高いが、その代償を払う価値は充分にある
• ハードルが高いというのであれば、Vue.js から入るのもアリ
• UI Router は積極的に採用していきたい
学び 3/3
• コードの品質に満足せず、絶えずリファクタリングを
• プルリクエストは溜め込まず優先的に捌く
• どんな小さなことでも分からなければ訊く
• PO ( ステークホルダー ) とはいつでもどこでもコミュニケーションを取れるようなチーム体制を築く
最後に
• Twitter やブログなどで感想をいただけると非常に励みになります
• 弊社のテックブログを御覧いただいた方はシェアなどしていただけると最高に嬉しいです
Thank you :)