Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How to develop a huge Single Page Application

2,400 views

Published on

Developers Summit 2016 ( http://event.shoeisha.jp/devsumi/20160218/ ) の一日目ランチセッションにて発表した資料です。

Published in: Engineering

How to develop a huge Single Page Application

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

×