reading-mtc2018-web.pdf

A32ef72a6a594abcf40c64154b968da6?s=47 Daiki Ihara
November 19, 2018

 reading-mtc2018-web.pdf

LT at Roppongi.js #7

A32ef72a6a594abcf40c64154b968da6?s=128

Daiki Ihara

November 19, 2018
Tweet

Transcript

  1. Reading mtc2018-web by sasurau4 Roppongi.js #7 at Retty

  2. • Name: Daiki Ihara • ID: @sasurau4 • Job: react-native

    / Server Side Kotlin / GraphQL • Hobby: React, Typescript • Mind: Front-end engineer 自己紹介
  3. 今日の話題 Mercari Tech Conf 2018 LP https://github.com/mercari/mtc2018-web

  4. What is mtc2018 • Mercari Tech Conf(MTC)は、株式会社メルカリをはじめとするメルカリグルー プ各社が、これから目指す方向や、これから取り組む技術的なチャレンジについ てご紹介するエンジニア向けの技術カンファレンスです。 ※https://techconf.mercari.com/2018#aboutより一部抜粋

    ◦ • 10月4日に六本木アカデミーヒルズで開催された
  5. Why mtc2018-web

  6. MTC2018 カンファレンスLPの裏話 〜GraphQL編〜

  7. 気になるポイント • Typescript + GraphQL • Apollo • GitHubにコード公開されてる

  8. よし、読むぞ

  9. レポジトリを眺める https://github.com/mercari/mtc2018-web • monorepo • server / web ディレクトリ •

    rootのschema.graphqlがGraphQLのスキーマ定義 • rootにmockServerもいる
  10. webのpackage.jsonを眺める • next • apollo-client • i18next • react •

    typescript • styled-components
  11. さあ、コードリーディングだ

  12. 分からない

  13. 分からないポイント • nextは一体何をやっているんだ... • componentsやcontainersはいいとして、pages??? • routes.jsには’/2018/session/:id’のroutingしかない...

  14. Next.js Learn やりました ※https://nextjs.org/learn/

  15. 知見

  16. • components -> LazyImage.tsx • 名の通り、画像の遅延読み込み用コンポーネント • Intersection Observer APIを使用

    ◦ 要素がビューポートと交差するか監視する方法を提供する API ◦ Safariはsupportされていないので、webpackでバンドルする際にpolyfillしている 1. LazyImage Component
  17. 2. timetableデータの持ち方 mock server production

  18. 2. timetableデータの持ち方 mock server production

  19. mockなのに段組が変わらない

  20. 2. timetable データの持ち方 • store -> timetable.tsの中でオブジェクトとして定義 • sessionのidをフロントで持つことでtimetableの表示をコントロール •

    ウェブアプリケーションにおいてはサーバーしか知らないidを前もって、フロント が知っていることで煩雑な条件分岐を回避
  21. おまけ

  22. Mercari Engineering Blog 「MTC2018 カンファレンスLPの裏話 〜インフラ編〜」より

  23. 作ってみた

  24. デモ

  25. まとめ • mtc2018-webレポジトリは知見がいっぱい ◦ i18n ◦ SSR ◦ componentの分け方 ◦

    GraphQL Fragment ◦ Apollo Client ◦ etc. • Typescript + GraphQLはいいぞ
  26. Thank you