クロスプラットフォーム開発3種の神器 React Native / TypeScript / GraphQL

クロスプラットフォーム開発3種の神器 React Native / TypeScript / GraphQL

E28404a128b6014e6f499d2a967c72a0?s=128

Takuji Nishibayashi

February 07, 2019
Tweet

Transcript

  1. 3.

    ࣗݾ঺հ • Takuji Nishibayashi • takuji31 • Hatena Co., Ltd.

    (2016/01 ~) • Android (2009~) • Kotlin • ! hFps:/ /blog.takuji31.jp • " hFps:/ /nazuna.takuji31.jp • # $ hFps:/ /photo.takuji31.jp
  2. 4.

    ࣗݾ঺հ • Ryo Kitamura • @experopero id:funnelbit • Hatena Co.,

    Ltd. • Android • iOS • React NaAve • ! hDp:/ /funnelbit.hatenablog.com/ • " hDps:/ /www.instagram.com/ experopero/
  3. 10.
  4. 11.
  5. 16.
  6. 21.
  7. 22.
  8. 28.
  9. 29.
  10. 32.
  11. 33.
  12. 36.

    ։ൃͷྲྀΕ 1. ϦϙδτϦͱϦϦʔεઓུ 2. ࡞੒͢Δը໘Λ෼ੳ 3. ComponentΛ࡞੒ 4. ωΠςΟϒͷը໘ʹ React

    Na2ve ୯ಠදࣔ͢Δը໘Λ࡞੒ 5. Apollo Ͱ௨৴ 6. ࡞ͬͨ Component Λ࢖ͬͯϦετΛදࣔ͢Δ
  13. 38.

    Monorepo ʹ͢Δ • ैདྷ͸෼͔Ε͍ͯͨ Android ͱ iOS ͷ ϦϙδτϦΛҰͭʹ •

    h,p:/ /engineering.khanacademy.org/ posts/react-na;ve-monorepo.html
  14. 48.

    Storybook • h#ps:/ /github.com/storybooks/ storybook • UI ίϯϙʔωϯτ୯ମͰಈ͔͢͜ͱͷ Ͱ͖Δ؀ڥ •

    ը໘Λ࡞Βͳͯ͘΋ίϯϙʔωϯτ୯ ҐͰ֬ೝͰ͖Δ • View ͷଟ༷ͳঢ়ଶΛ֬ೝͰ͖Δ
  15. 50.
  16. 52.

    ωΠςΟϒͷը໘ʹ React Na(ve ୯ಠදࣔ͢Δը໘Λ࡞੒ • React Na)ve ͷ Component Λදࣔ͢Δ

    Ac)vity Λ༻ҙ͢Δ • h4ps:/ /facebook.github.io/react-na)ve/docs/integra)on-with- exis)ng-apps.html • ReactRootViewΛ࢖͏
  17. 53.
  18. 55.

    Apollo Apollo is a complete pla-orm for implemen1ng a graph

    over your data. It includes two run1me libraries, Apollo Server and Apollo Client, for building and querying your graph’s API. — h$ps://www.apollographql.com/docs/tutorial/ introduc8on.html#what-is-apollo
  19. 56.
  20. 58.
  21. 59.
  22. 60.
  23. 62.
  24. 64.
  25. 65.
  26. 66.
  27. 68.
  28. 70.
  29. 71.

    Higher Order Component (HOC) • <Query /> Λ࢖͏ʹ͸ <ApolloProvider />

    ͰғΉඞཁ͕ ͋Δ • ͍͍ͪͪॻ͘ͷ͸໘౗ • HOC Λ࢖͏
  30. 72.
  31. 73.
  32. 76.
  33. 85.
  34. 90.
  35. 91.
  36. 97.
  37. 100.
  38. 101.
  39. 102.
  40. 103.
  41. 111.

    ͦͷଞ • Webͱ࿈ܞͯ͠Ϧετදࣔ→ৄࡉը໘Έ͍ͨͳΞϓϦͰ͸࢖͑ͦ͏ • ҰํͰΧελϜViewΛଟ༻͢ΔΑ͏ͳը໘͕ଟ͍ΞϓϦͷ։ൃʹ͸޲͔ͳ͍ • ωΠςΟϒଆͰΧελϜViewΛ࡞ͬͯReact Na/veʹͭͳ͛Δͷ͸໘౗ • React

    Na/veʹ͋Δίϯϙʔωϯτ͚ͩͰදݱͰ͖Δͱָ • ϋΠϒϦουΞϓϦΛݕ౼ͯ͠΋Αͦ͞͏ • ύϑΥʔϚϯε͸ѱ͘ͳ͍͕νϡʔχϯά͸େมͦ͏ • σόοάϏϧυͷύϑΥʔϚϯε͕ѱ͘ɺޮՌ͕֬ೝͮ͠Β͍
  42. 114.

    React Na(ve Ͱ ViewPager • h#ps:/ /github.com/react-na6ve-community/react-na6ve-tab- view • ૉ๿ʹ΍ΔͱҰ੪ʹશը໘͕

    render • shouldComponentUpdate੍ޚɺදࣔதϖʔδͷ྆ྡ͚ͩ render ͢ΔͳͲɺ࠷దԽํ๏͸͋Δ͕ͦΕͰ΋஗͍ • Ұ౓ಡΈࠐΈऴΘͬͨը໘͕࠶ͼਅͬനʹͳΔͳͲɺฐ֐͕ େ͖͍
  43. 115.

    React Na(ve Ͱ ViewPager • h#ps:/ /github.com/ptomasroos/react-na6ve-scrollable-tab-view • iOS ͩͱ஗͍

    • <Query> ͷ௨৴ΛࢭΊΔ͢΂͕ͳ͍ • ͢͹΍͘εϫΠϓ͢Δͱը໘෼௨৴͞Εଓ͚Δ • λϒͷ਺ͰύϑΥʔϚϯε͕ࠨӈ͞ΕΔ
  44. 124.