Save 37% off PRO during our Black Friday Sale! »

The Artsy Omakase - Artsy x React Native 2018

The Artsy Omakase - Artsy x React Native 2018

What is the Artsy JavaScript tech stack? How did choose and improve our dependencies

http://artsy.github.io/artsy-x-react-native.html

Fec952eb14022f55b2747510ac685591?s=128

Artsy Open Source

July 09, 2018
Tweet

Transcript

  1. Artsy Omakase Orta Therox

  2. WHAT IS OMAKASE?

  3. None
  4. None
  5. The start-up Art.sy aims to do for visual art what

    Pandora did for music: become a source of discovery, pleasure and education.” “
  6. None
  7. A future where everyone is moved by art every day.

    Richard Serra -Betwixt the Torus and the Sphere https://artsy.net/artwork/richard-serra-betwixt-the-torus-and-the-sphere
  8. GERARD RICHTER,Abstraktes Bild, 1997, High Museum of Art, Atlanta, Georgia

    https://artsy.net/artist/gerhard-richter Expand the art market to support more artists and art in the world.
  9. The World’s Largest Database of Contemporary Art 2,000+ GALLERIES ~1,000,000

    ARTWORKS 25+ AUCTION HOUSES 80,000 ARTISTS 700 MUSEUMS 60+ ART FAIRS —
  10. — On the Internet

  11. None
  12. FRONT END PLATFORM

  13. FRONT END PLATFORM WEB IOS

  14. WEB IOS

  15. WEB

  16. WEB

  17. Complexity

  18. Complexity

  19. STATE CHANGES API INTERACTIONS STYLE TOOLING APP HIERARCHY ROUTING

  20. STATE CHANGES API INTERACTIONS STYLE TOOLING APP HIERARCHY ROUTING

  21. STATE CHANGES API INTERACTIONS STYLE TOOLING APP HIERARCHY ROUTING

  22. STATE CHANGES API INTERACTIONS STYLE TOOLING APP HIERARCHY ROUTING

  23. STATE CHANGES API INTERACTIONS STYLE TOOLING ROUTING APP HIERARCHY

  24. STATE CHANGES API INTERACTIONS STYLE TOOLING

  25. Artsy Omakase REACT GRAPHQL RELAY STYLED COMPONENTS TYPESCRIPT STORYBOOKS JEST

    VSCODE
  26. Artsy Omakase LIBRARIES TOOLING

  27. Artsy Omakase REACT GRAPHQL RELAY STYLED COMPONENTS TYPESCRIPT STORYBOOKS JEST

    VSCODE
  28. LIBRARIES

  29. React

  30. React - vs MVC VIEW MODEL CONTROLLER USER

  31. React - Unidirectional COMPONENT COMPONENT COMPONENT COMPONENT COMPONENT

  32. React - Unidirectional COMPONENT COMPONENT COMPONENT COMPONENT COMPONENT COMPONENT

  33. React - VDOM COMPONENT COMPONENT COMPONENT COMPONENT COMPONENT COMPONENT VIEW

    VIEW VIEW VIEW
  34. React - VDOM COMPONENT COMPONENT COMPONENT COMPONENT COMPONENT COMPONENT VIEW

    VIEW VIEW VIEW ADDED REMOVED
  35. React Native

  36. GraphQL

  37. GraphQL artist(id: "marina-abramovic-1") name href bio }

  38. GraphQL type Artist implements Node { alternate_names: [String] artworks_connection: ArtworkConn

    biography: Article birthday: String consignable: Boolean @deprecated deathday: String exhibition_highlights( # The number of Shows to retu size: Int = 5 ): [Show]
  39. GraphiQL

  40. Relay

  41. PRelay COMPONENT COMPONENT COMPONENT COMPONENT COMPONENT API RESULT DATA DATA

    DATA DATA
  42. Relay COMPONENT COMPONENT COMPONENT COMPONENT COMPONENT RELAY RELAY RELAY

  43. Relay COMPONENT COMPONENT COMPONENT COMPONENT COMPONENT RELAY RELAY RELAY

  44. Relay - Colocation COMPONENT

  45. Relay - Consolidation COMPONENT

  46. Apollo GraphQL

  47. Styled Components !

  48. Web’s infra STYLE CONTENT

  49. CSS in JS STYLED CONTENT

  50. Co-location § § § § § STYLED COMPONENTS THE COMPONENT

    RELAY
  51. Alternatives § § § § §

  52. TOOLING

  53. VS Code

  54. VS Code

  55. VS Code

  56. Process Separation

  57. Lazy Loading Plugins

  58. VS Code - Styled Components

  59. VS Code - Relay + GraphQL

  60. VS Code - Debugging

  61. VS Code - React Native Debugger

  62. TypeScript

  63. TypeScript

  64. Options TYPESCRIPT FLOW

  65. Go with the Flow FLOW IS THE DEFAULT

  66. But we went with TypeScript TYPESCRIPT

  67. None
  68. But we went with TypeScript TYPESCRIPT

  69. Pragmatic

  70. Jest

  71. Jest - Watch

  72. Jest - Watch

  73. Jest - Process Separation

  74. Jest - Better Primitives

  75. Jest - Snapshots

  76. Jest - Inline Snapshots

  77. Jest - Mock API

  78. Storybook

  79. Storybook - live coding

  80. App as function of data { "data": { "artist": {

    "name": "Marina Abramović", ... } } } { "state": { “tabIndex”: 1 } }
  81. func render(data: API, state: State) -> UI { let ui

    = app(data, state) return ui } ui
  82. func render(data: API, state: State) -> UI { let ui

    = app(data, state) return ui } ui anks