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

Transcript

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