Upgrade to Pro — share decks privately, control downloads, hide ads and more …

オイシックス・ラ・大地とJSフレームワーク

 オイシックス・ラ・大地とJSフレームワーク

216eeb6bf324bf75b8f8c1a1beef6927?s=128

k-murakami0609

March 19, 2019
Tweet

Transcript

  1. オイシックス・ラ・大地とフロン トアーキテクチャ

  2. オイシックス・ラ・大地ではフロントエンド刷新を始めています。 何故そのアーキテクチャー、チームの事情やフレームワークの特 性などの観点から紹介します。 はじめに

  3. 自己紹介 村上 啓治 2013 ~ 2014 SES 2015 ~ 2018

    自社開発 + 受託の中小企業 主にWeb API開発 Reactで中規模Webアプリを4つほど開発 2018/9 ~ オイラ大地入社 システム本部フロント開発部
  4. フロント開発部とは

  5. アジェンダ 1. 会社・チームの求めるアーキテクチャ 2. JSフレームワーク 3. BFF 4. コード自動生成とCI/CD 5.

    まとめ
  6. 組織の話

  7. オイシックス・ら・大地のECサイトの特性 1. 更新頻度が高い 2. ユーザー属性による出し分けはとても多い 3. クライアント側に複雑な処理は少ない

  8. 組織的にフロントアーキテクチャに求めたもの 1. 主にデザイナーの学習コストを抑えたい 2. 再利用性の高いコードを書きたい 3. 気軽にサーバーからデータを取り出したい 4. レビューにかかるコストを抑えたい

  9. 組織的にフロントアーキテクチャに求めたもの 1. 主にデザイナーの学習コストを抑えたい -> vuejsとBFF 2. 再利用性の高いコードを書きたい -> vuejs(コンポーネント化) 3.

    気軽にサーバーからデータを取り出したい -> BFF 4. レビューにかかるコストを抑えたい -> CI/CDとコード自動生成
  10. アジェンダ 1. 会社・チームの求めるアーキテクチャ 2. JSフレームワーク 3. BFF 4. コード自動生成とCI/CD 5.

    まとめ
  11. 三代フレームワークの比較

  12. 学習コストとメンテナンスコスト (導入時) 学習コスト メンテナンスコス ト Angular 高 低 React 中

    中 Vue 低 高
  13. Typescriptへの対応 Typescriptへの対応 Angular ◎ React ◦ Vue △

  14. デザイナーとの分業 デザイナーとの分業 Angular ◦ React △ Vue ◦ https://reactjs.org/tutorial/tutorial.html#what-is-rea ct

  15. JSフレームワークのまとめ ・オイシックスでは、学習コストやデザイナーとの協業しやすさ を最優 先事項としたため、vuejsを選んだ ・vue3ではTypeScriptの親和性があがるので、今は控えめに利 用す る。 ・コードの品質問題は、後述するBFFやコードの自動生成を行う など の対策を打つ事にした。

  16. よく聞かれる質問 Q. Nuxt使いますか? A. 使いません。レガシーとの共存が難しかっ たからです。

  17. アジェンダ 1. 会社・チームの求めるアーキテクチャ 2. JSフレームワーク 3. BFF 4. コード自動生成とCI/CD 5.

    まとめ
  18. BFFとは

  19. BFFの構成要素 ・nodejs ・express ・typescript ・swagger ・jest

  20. アジェンダ 1. 会社・チームの求めるアーキテクチャ 2. JSフレームワーク 3. BFF 4. コード自動生成とCI/CD 5.

    まとめ
  21. コードの自動生成とCI/CDの一覧 ・snapshot test ・swagger ・hygen ・eslint ・storybook ・docker ・kubernetes ・circle-ci

    ・github ・azure devops ...
  22. ・snapshot test ・swagger ・hygen ・eslint ・storybook ・docker ・kubernetes コードの自動生成とCI/CDの一覧 ・circle-ci

    ・github ・azure devops ...
  23. snapshot test ・テストの方法の一つで、リグレッションテストの一つ。 ・テスト初回実行時にアウトプットを保存し、  2回目以降のテストでは前回と今回のアウトプットを比較し、 差分が 出ていなければテストOKとする。 ・UIのような変更が頻繁に行われる部分で有効。

  24. snapshot test DEMO

  25. swagger-codegenのカスタマイズ ・swagger.ymlからサーバー側のコードも自動 生成 しています。 ・nodejs + typescriptがなかったので、自作し てい ます

  26. アジェンダ 1. 会社・チームの求めるアーキテクチャ 2. JSフレームワーク 3. BFF 4. コード自動生成とCI/CD 5.

    まとめ
  27. まとめ ・oisixでは会社・チームの観点から、フロント の学 習コストをなるべく下げようとしてます ・コードの品質が落ちないように、CI/CDや自 動化 は通常のプロジェクトより手厚く行って います