More Related Content
Similar to 地に足をつけたフロントエンドの改善 (20)
More from Recruit Lifestyle Co., Ltd. (20)
地に足をつけたフロントエンドの改善
- 2. Ryo Tezuka @inureo 来歴 ? 2009年04月 デザイナーとしてWeb制作会社に入社 ? 2013年10月 エンジニアとしてnanapiに入社 ? 2015年09月 リクルートライフスタイルに入社 ? 新規事業開発チームで開発責任者担当 ? 美容事業配属後、カスタマサポートや事業部を巻 き込んだ生産性向上プロジェクトの立ち上げ ? 現在リプレイスプロジェクト担当
- 4. 今日話すこと?話(さ|せ)ないこと ? 話すこと ? 大規模な事業?組織で仕事する上での観点 ? 改善をなぜやるか/どうやるか/なにをやるか ? 話(さ|せ)ないこと ? 具体的な技術のこと ? 改善にどういう効果があったか
- 5. 早速ですが
- 9. しかし事業は成長し続けている 株式会社リクルートホールディングス 2018年03月期 決算資料より引用 ? 事業成長が著しいため、機能開発要望がどんどんでる ? なんとか早くリリースしたい企画者 ? それを叶えようとしつづけた開発者 ? みんなが事業成長のために開発をした結果、、
- 10. Quality Cost Delivery ? Delivery優先で負債が残るような形での開発 ? 負債を返済する間もなく、次の機能開発へ ? このままだと負債により開発速度が鈍化してしまう Delivery > Quality
- 13. フロントエンドも負債が表面化 IE Chrome Safari Firefox 改善前 4,300ms 1,400ms 2,600ms 2,400ms 改善後 1,200ms 630ms 1,200ms 1,000ms ? Extensionの影響で予期せぬ挙動 (RequireJS起因) ? HTMLタグ数がボトルネックとなりブラウザの レンダリング時間増加、リフロー?リペイント が重すぎて操作が不可能な状況 => 急遽リファクタリングが必要となった 改善前 改善後 Google Calendar HTMLタグ数 9,432個 2,343個 1,135個 フロントエンドも 改善せねば…
- 16. フロントエンドの改善 ? なぜやるのか ? 更なる事業成長を実現するため ? どうやるのか
- 17. フロントエンドの改善 ? なぜやるのか ? 更なる事業成長を実現するため ? どうやるのか ? コーディングルール/ガイドラインを整備して コード品質を安定化 ? 新しい技術の恩恵を受けられる ? 保守?運用?拡張しやすいコード
- 18. フロントエンドの現状 ? コーディングルール/ガイドラインを整備して コード品質を安定化 ? 特にルールのない無秩序なコード ? 静的解析ツールやフォーマッタを使っていない ? 新しい技術の恩恵を受けられる ? ES5、生CSS、jspテンプレートの運用 ? トランスパイル以前にminifyすらされていない ? 保守?運用?拡張しやすいコード ? CSS内に!importantが1,590個存在している リプレイスを進めているアプリケーションではあてはまらないものもあります
- 19. 改善するためになにをやるのか
- 20. 改善するためになにをやるのか ? 尘颈苍颈蹿测と静的コンテンツリリースの闯辞产化 ? JS/CSSのｍinify対応 ? 静的コンテンツリリースをJob化する ? 顿翱惭构造リニューアルの设计 ? コンポーネント設計?実装 ? ルール整備?静的解析?フォーマッタ導入 ? HTML/CSS/JS取り込みフローの改善 ? 本番装着のための運用設計
- 21. 改善するためになにをやるのか ? 尘颈苍颈蹿测と静的コンテンツリリースの闯辞产化 ? JS/CSSのｍinify対応 ? 静的コンテンツリリースをJob化する ? 顿翱惭构造リニューアルの设计 ? コンポーネント設計?実装 ? ルール整備?静的解析?フォーマッタ導入 ? HTML/CSS/JS取り込みフローの改善 ? 本番装着のための運用設計 ビルドフローを整備し 後々手を加えやすく 現状、静的解析や 品質管理が難しい ので整備する
- 22. ただハレーションが起きるので地道に ? 尘颈苍颈蹿测と静的コンテンツリリースの闯辞产化 ? JS/CSSのｍinify対応 ? 静的コンテンツリリースをJob化する ? 顿翱惭构造リニューアルの设计 ? コンポーネント設計?実装 ? ルール整備?静的解析?フォーマッタ導入 ? HTML/CSS/JS取り込みフローの改善 ? 本番装着のための運用設計 コンポーネント化したとして、 プロダクトの装着はどうする？ コンポーネントが更新された時の 影響?反映フローは？ 既存フローの変更影響は？ minifyすることでNewRelic BrowserでのJS Error検知が できなくなるが？
- 26. 尘颈苍颈蹿测と静的コンテンツリリースの闯辞产化 開発T GhE Webサーバ ???? ?? 3.rsync プライベートクラウド As-Is 2.git pull1.git push 作業サーバ 運用Tが作業用サーバに ログインして手作業でリリース
- 27. 尘颈苍颈蹿测と静的コンテンツリリースの闯辞产化 開発T GhE Webサーバ ???? ?? 3.rsync プライベートクラウド 2.git pull1.git push As-Is 運用Tが作業用サーバに ログインして手作業でリリース 作業サーバ RHEL5(現状) Java6
- 28. 開発T GhE 作業サーバ Webサーバ ???? ?? 3.rsync プライベートクラウド 開発T GhE Jenkinsサーバ Webサーバ ???? ?? プライベートクラウド 2.git pull1.git push 1.git push 2.git pull 3.minify ( Java6で ) 5.rsync 尘颈苍颈蹿测と静的コンテンツリリースの闯辞产化 As-Is To-Be 開発者 Job???? 運用Tが作業用サーバに ログインして手作業でリリース RHEL5(現状) Java6
- 29. 開発T GhE Webサーバ ???? ?? 3.rsync2.git pull1.git push プライベートクラウド 開発T GhE Webサーバ ???? ?? 1.git push プライベートクラウド 2.git pull 4. source map 紐付け To-Be minifyされたコードで エラーを追うため 3.minify ( Java6で ) 5.rsync 尘颈苍颈蹿测と静的コンテンツリリースの闯辞产化 As-Is 作業サーバ Jenkinsサーバ 開発者 Job???? 運用Tが作業用サーバに ログインして手作業でリリース RHEL5(現状) Java6
- 30. 開発T GhE サーバ Webサーバ 運用Tが手作業でリリース ???? ?? 3.rsync2.git pull1.git push プライベートクラウド 開発T GhE サーバ Webサーバ ???? ?? 1.git push プライベートクラウド 2.git pull 4. source map 紐付け Before After RHEL5, Java6 といった縛り minifyされても エラーを追うため 3.minify ( Java6で ) 5.rsync 尘颈苍颈蹿测と静的コンテンツリリースの闯辞产化NewRelic Browserに SourceMapを連携すると、こんな感じになります
- 31. プライベートクラウド 開発T GhE Webサーバ ???? ?? 3.minify ( Java6で ) 5.rsync1.git push 2.git pull 4. source map 紐付け ? 既に存在しているJava6を利用したminify方法を選択 （google-closure-compiler） ? 既存と同じレベルのエラートラッキングを継続するた めにSourceMapを連携させる ? 風呂敷を広げすぎず、必要な範囲の変更をやりきる minifyされたコードで エラーを追うため 尘颈苍颈蹿测と静的コンテンツリリースの闯辞产化 まとめ Jenkinsサーバ 開発者 Job????
- 32. 顿翱惭构造リニューアルの设计
- 33. 顿翱惭构造リニューアルの设计 ? コンポーネントの設計と実装 ? ルール整備?静的解析?フォーマッタ導入 ? HTML/CSS/JS取り込みフローの改善 ? 本番装着のための運用設計
- 34. 顿翱惭构造リニューアルの设计 ? コンポーネントの設計と実装 ? ルール整備?静的解析?フォーマッタ導入 ? HTML/CSS/JS取り込みフローの改善 ? 本番装着のための運用設計 - コンポーネント洗い出し - 仕様の整理と把握 - 粛々と実装 - コーダーからHTMLなどを受け 取って開発者がマージ - 組み込み時に考慮漏れがあり手戻りが ある場合もあるので、改善する - 人間がやらなくていい仕事を減らし てコード品質の下限を底上げ - レビューは本質に注力できるように
- 35. 顿翱惭构造リニューアルの设计 ? コンポーネントの設計と実装 ? ルール整備?静的解析?フォーマッタ導入 ? HTML/CSS/JS取り込みフローの改善 ? 本番装着のための運用設計 - コンポーネント洗い出し - 仕様の整理と把握 - 粛々と実装 - コーダーからHTMLなどを受け 取って開発者がマージ - 組み込み時に考慮漏れがあり手戻りが ある場合もあるので、改善する - 人間がやらなくていい仕事を減らし てコード品質の下限を底上げ - レビューは本質に注力できるように
- 36. 本番装着のための運用設計 ホットペッパービューティー ヘアサロン ページ ヘアカタログ 予約導線 SEO向け ページ … ? アプリケーション大規模リプレイスの影響で機能ごとにモ ジュールが分割される予定 ? そのためデプロイなどのモジュール単位になってしまう
- 37. 本番装着のための運用設計 ホットペッパービューティー v2 v1 v1 v1 ヘアサロン ページ ヘアカタログ 予約導線 SEO向け ページ … ? アプリケーション大規模リプレイスの影響で機能ごとにモ ジュールが分割される予定 ? そのためデプロイなどのモジュール単位になってしまう ? ファイルについてはRailsやSpringはmanifestファイルで解決 できそうだが、DOMの反映はどうするか… リリースタイミン グによっては1つだけ v2ということも
- 38. 本番装着のための運用設計 ホットペッパービューティー v2 v1 v1 v1 ヘアサロン ページ ヘアカタログ 予約導線 SEO向け ページ … ? アプリケーション大規模リプレイスの影響で機能ごとにモ ジュールが分割される予定 ? そのためデプロイなどのモジュール単位になってしまう ? ファイルについてはRailsやSpringはmanifestファイルで解決 できそうだが、DOMの反映はどうするか… ? 具体的な方法は検討中 リリースタイミン グによっては1つだけ v2ということも
- 43. ? 美容事業は成長しつづけている、そのため 事業成長を続けるために改善を行う ? 事業規模が大きいゆえに技術的な課題だけ ではなく組織的な課題とも向き合う必要が あり、仕事の難度が高い ? 逆に自分の推進するプロジェクトが数百億 規模の事業に影響するのでやりがいがある . まとめ ??
- 44. ご清聴ありがとうございました