大規模サービスを支える LINEフロントエンド開発の挑戦 / Challenge of LINE front-end development supporting large scale service

1. 大規模サービスを支える LINEフロントエンド開発の挑戦 川﨑 康平 LINE / UIT室 マネージャー
2. LINE株式会社 UIT室 Front-end Standardization Team Manager 川﨑 康平 KAWASAKI KOHEI
3. • LINEのフロントエンド開発事情 • 採用技術 / 社内トレンド • 技術トレンドの追いかけ方 • これからの取り組み Agenda
4. LINEのフロントエンド開発事情
5. • 100人規模の専門チーム • リポジトリ 300↑ • 各種ファミリーサービスのフロントエンド開発 • Web技術を使ったLINE内部機能開発 • CMS / SDK / Embed-Tag など外部提供 LINEのフロントエンド開発事情
6. • サーバー/クライアント リポジトリごと分離 • API仕様をベースに相互にフィードバックしながら開発 • 各プロダクトごとに最適な構成を検討 = 多様性 LINEのフロントエンド開発事情
7. 採用技術 / トレンド
8. • Webpack • Babel • Karma • Jest • CircleCI • Private npm …etc 採用技術 / トレンド • HTML5 • SCSS • ES2015 • Node.js • Typescr ipt • Wasm • Vue • React • Nuxt 2019/01 時点
9. • 片手間にならない • 常にその分野でベストを尽くすことができる • 信頼できるメンバーであることが重要 • 相互理解と共通言語 = エンジニアとしての基礎力 分業 VS 統合
10. 技術トレンドの追いかけ方
11. フォロワーシップ 開発コミュニティと共に成長していく
12. React vs @angular/core vs Vue 2017-2019 www.npmtrends.com
13. • 分業体制との相性 • ひとつの巨大なサービス < 小さなたくさんのサービス • 厳密な制御よりもコードがシンプルで読みやすいこと • よりコミュニティベースのオープンソース • よく整備されたドキュメント Vueの採用理由 2015年 当時
14. -2018 採用案件
15. • Vue Fes Japan 2018 スポンサー • 主催イベントのテーマとして「UIT#5」 • 社内ワークショップ「Let’s Contribute OSS!」 組織を巻き込んだコミュニティでの活動 還元するためにしていること 詳しくはLINE Engineering Blogに記載
16. NEXT STAGE
17. フォロワーシップ からリーダーシップ へ 挑戦について
18. • 既に成功した技術を採用していること自体はもはや競争 力に繋がらない • コミュニティと自分達が抱えている課題をいかに早く・ 上手く解決するか • 一定の労力をかけて無謀で野心的な試みをしていくこと も重要 技術組織としての戦い 挑戦について
19. • コンパイルターゲット言語としての WebAssembly そしてLINEでの実戦 (HTML5 Conference 2018) • Abyss：LINEのWebサービス配信の裏側 (LINE DEVELOPER DAY 2018) • LINEサービスの管理画面でUIを標準化するには？ (LINE DEVELOPER DAY 2018) • なぜLINEではウェブトラッキングシステムが フロントエンド開発チームによって構築されたのか (LINE DEVELOPER DAY 2017) Front-end Standardization Team 挑戦について
20. 「それ◯◯でよくね？」 これに答えられるものは挑戦する価値がある 愚かでいい 失敗してもいい
21. 私たちも挑戦するし 私たちに挑戦したことを教えて欲しい Vueも元々個人プロジェクト 一緒に日本の開発コミュニティを盛り上げていきたい
22. THANK YOU