スペースマーケットWebフロントエンド開発について〜2018冬〜

72b2c153750724a4ba8f5801a229e249?s=47 ymanya
December 06, 2018

 スペースマーケットWebフロントエンド開発について〜2018冬〜

スペースマーケットTechミートアップの登壇資料です。

72b2c153750724a4ba8f5801a229e249?s=128

ymanya

December 06, 2018
Tweet

Transcript

  1. スペースマーケット Webフロントエンド開発について 〜2018冬〜 フロントエンドチーム Yuki Manya

  2. 2 自己紹介 Yuki Manya( @ymanya ) スペースマーケットでフロントエンドチームリーダー兼 Webフロントエンド・iOSアプリエンジニアをしています。 前職はQAとか新規事業の開発とかやってました。

  3. 3 スペースマーケットのサービスについて

  4. 4 SPACEMARKET 時間貸し・宿泊スペースを検索・予約できるメインのサービス

  5. 5 SPACEMARKET DASHBOARD 掲載するスペースを管理するホスト向けのダッシュボードサービス

  6. 6 SPACEMARKET BUSINESS 法人向けに社員の予約や支払いを一元管理できるサービス

  7. 7 SPACEMARKET EVENT 予約情報を元に、簡単に参加者管理できるイベント告知ページが作成できるサービス

  8. 8 SPACEMARKET ACCOUNT これまで上げてきたサービスのログイン・ログアウトを担当するサービス

  9. 9 以上、現在5サービスを開発・運用しています

  10. 10 これらのサービスをどのような構成で、 どのように開発をしているか、 Webフロントエンドの視点からざっくり発表します

  11. 11 サービスの構成

  12. 12 サービスの構成図 クライアントサイド サーバサイド スマートフォン アプリ API(REST/GraphQL) 移行中 Web フロントエンド

    (各サービスごと)
  13. 13 サービスの構成図 クライアントサイド サーバサイド スマートフォン アプリ API(REST/GraphQL) この発表でお話するところ 移行中 Web

    フロントエンド (各サービスごと)
  14. 14 サービスの構成図 クライアントサイド サーバサイド スマートフォン アプリ API(REST/GraphQL) 移行中 Web フロントエンド

    (各サービスごと)
  15. 15 Fastlyでのキャッシュ • 未ログインの場合の SSR結果をキャッシュするように • 間違って変なキャッシュがされないよう、必要なページのみレスポンスヘッダを追加しキャッシュ アクセスの多いトップページやカテゴリトップなどをキャッシュ

  16. 16 サービスの構成図 クライアントサイド サーバサイド Web フロントエンド (各サービスごと) スマートフォン アプリ API(REST/GraphQL)

    移行中
  17. 17 PWA(ServiceWorker/Webプッシュ通知) • 現在はトップページのみ、キャッシュを導入 • Webプッシュはアプリでも使っている OneSignalを使っています ◦ 詳しくは弊社玉川のブログ記事もぜひご覧ください! ◦

    既存WebサイトをPWA対応して一部の機能を実装してみる ( https://blog.spacemarket.com/code/add_pwa/ ) Workboxを使い、ServiceWorkerでのキャッシュやWebプッシュ通知を実装
  18. 18 リポジトリ構成

  19. 19 サービスの構成図 クライアントサイド サーバサイド スマートフォン アプリ API(REST/GraphQL) 移行中 Web フロントエンド

    (各サービスごと)
  20. 20 フロントエンドのリポジトリ構成 SPACEMARKET SPACEMARKET DASHBOARD SPACEMARKET EVENT SPACEMARKET BUSINESS SPACEMARKET

    ACCOUNT Nodeの設定やデータモデル、ヘルパなどの サービスのコアとなる処理をまとめたリポジトリ フロントエンド共通リポジトリ サービス共通コンポーネントリポジトリ AtomicDesignをベースにした サービス共通コンポーネントをまとめたリポジトリ 1サービス1リポジトリ、プラスしてサービス共通リポジトリ 2つという構成です
  21. 21 サービス共通リポジトリの依存解決 • リリースする際はgitのタグを、開発中はコミットハッシュを使って、共通リポジトリのバージョン管理 を行っています プライベートリポジトリなので、gitの認証情報を使ってnpmで依存解決しています サービスのpackage.jsonの例

  22. 22 • コンポーネントの実装や デザイナレビュー用に Storybookを使っています • 弊社荒田のブログ記事がありますので、 ぜひご覧ください! ◦ Atomic

    Designを使って Reactコンポーネントを再設計した話 https://blog.spacemarket.com/code/atomic-design%E3%82%9 2%E4%BD%BF%E3%81%A3%E3%81%A6react%E3%82%B 3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E 3%83%B3%E3%83%88%E3%82%92%E5%86%8D%E8%A8 %AD%E8%A8%88%E3%81%97%E3%81%9F%E8%A9%B1/ サービス共通コンポーネントリポジトリ デザイナとの共通言語Atomic Designをベースにstyled-componentsを使って実装 AtomicDesign Storybook
  23. 23 サービス開発

  24. 24 開発環境/デプロイ 開発・本番環境ともにDockerで、特定ブランチへのマージで自動デプロイされます 開発環境 ステージング環境 本番環境 AWS CodePipeline masterマージ stagingブランチ

    マージ
  25. 25 • ApolloのQueryタグのssr属性を、ログイン・未ログインデータかで設定しておき、それぞれのタイミ ングで取得するように • 弊社のGraphQLのAPIは参照系が多く、まだあまり mutationは使っていません Apollo(GraphQLクライアント) 基本的に、SSR時に未ログインデータ、CSR時にログインデータを取得しています

  26. 26 まとめ

  27. 27 まとめ • 複数サービス、各ロールが並行して開発しやすい仕組みづくりをみんなで進めていま す! • PWAやFastlyでのキャッシュ、GraphQLなど様々な取り組みも進めて、よりよいユーザ 体験・開発体験が得られるように改善してきました • 今後はPWAやコードスプリッティングをより進めたり、現状各サービスで多少アーキテク

    チャにズレがあるため統合するフレームワークを作っていくなど、改善を続けていきま す!
  28. 28 We're Hiring! • スペースマーケットでは全方位で絶賛採用活動中です! ◦ フロントエンド・バックエンド・技術基盤・新卒 Webエンジニアなど ◦ 興味のある方は「Wantedly

    スペースマーケット」で検索orQRコード読取!
  29. None