reading-mtc2018-web.pdf

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