LINE and BFF

Ad8afdde67ccf5cccbde704dd9e35f84?s=47 Jun
June 07, 2018

LINE and BFF

UIT#3「LINEとBFFの話」

Ad8afdde67ccf5cccbde704dd9e35f84?s=128

Jun

June 07, 2018
Tweet

Transcript

  1. LINEとBFFの話 UIT#3
 Jun @LINE

  2. ⾃⼰紹介 • Jun • @uta_tti on Twitter / @utatti on

    GitHub • LINE株式会社 フロントエンドエンジニア
  3. 今⽇のテーマ

  4. LINEとBFFの話

  5. LINE • LINEってBFFやってたんですね • どころじゃなく

  6. _⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈⼈_ > LINEってフロントエンドやってたんですね <  ̄Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y ̄

  7. None
  8. フロントエンドやってます! • めちゃやってます • LINE Platform上のサービスはほとんどウェブ • VueとかReactとか

  9. しかし • 確かにサーバの⼈が多い • サーバはJava、Perl • サーバサイドテンプレート • SPAでもindex.htmlはサーバに

  10. サーバだけじゃない • インフラ、DevOps • 企画、事業、デザイン、QA • それぞれ担当している領域がある • なれているプロセスがある

  11. BFF • フロントエンドとか技術だけの話ではない • BFFの導⼊ = なれているプロセスの破壊 • 「この破壊は改善です!」 •

    本当に?
  12. BFF

  13. 組織と責任

  14. それで、BFFやってますか? • やってます! • React + Node.js (Express) • Nuxt

    • どうやって組織と責任の争いから抜け出したか
  15. Development サーバ、デザイン、企画、QA

  16. Development • BFFがないと • テンプレートがサーバにあるため、責任が不明確 • サーバ側が修正し始めたらトラッキングが難しい • 2度作業するようになることも

  17. Development • BFFを導⼊すると • サーバ: データ処理、API • フロントエンド: その他 •

    責任が明確になる • 結果的にはみんな喜ぶ
  18. Development • サーバ側はNode.jsの経験がないかも • Node.jsサーバは怖くない、と納得させる • サーバの運⽤は⼿伝ってもらう

  19. Deployment サーバ、インフラ、DevOps

  20. Deployment • BFFがないと • フロントエンドの修正だけでもサーバ配信が必要 • マークアップとかハッシュ番号とか

  21. Deployment • BFFを導⼊すると • それぞれ配信を管理できる

  22. Deployment • インフラ側にNode.jsの配信環境について調べてもらう • Node.js、npm、PM2... • 実際の配信環境を⽤意してもらう • Node.jsサーバや配信コマンドは⽤意する •

    実際の運⽤時は両⽅責任をもって
  23. SEO / OGP / i18n サーバ、企画、事業...

  24. SEO / OGP / i18n • BFFがないと • SEO /

    OGP / i18nデータの重複 • サーバとフロントエンドの間のsync問題
  25. SEO / OGP / i18n • Never ever do this

    ↓ • Headless Chromeでなんとか… • jsdomでなんとか… • ⾟くなるだけです
  26. SEO / OGP / i18n • 最初から考慮して設計するしかない • 後からの対応はほぼ無理 •

    ブラウザ環境への依存性 • ⾮同期データ周り
  27. SEO / OGP / i18n • 後からの対応は無理です…と⾔う • 実はみんな知ってるはず

  28. Performance みんな (including you!)

  29. Performance • BFF挟んでも遅くない • というか、挟んだ⽅が速い

  30. Performance • 物理的な速さ • Node.js • Data fetch: 内部ネットワークだとRTT1桁くらい •

    ⼼理的な速さ • First Meaningful Paint
  31. None
  32. None
  33. 「BFF、しましょう!」 • 結果的にいいものを作って、証明しなきゃいけない • 開発環境を慎重に選ぶこと • 責任をちゃんと話し合うこと • 計測すること

  34. 結論 • BFFはいいもんだが、それだけじゃ進まない時もある • 他の組織とちゃんと話し合うこと • 責任を分け合い、とある組織だけ⾟くならないように • 結果的にいいものを作ること

  35. None
  36. Thanks!