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

Transcript

1. Artsy
   Omakase
   Orta Therox
   

   View Slide

2. WHAT IS
   OMAKASE?
   

   View Slide

3. View Slide

4. View Slide

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.”
   “
   

   View Slide

6. View Slide

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
   

   View Slide

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.
   

   View Slide

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
   —
   

   View Slide

10. —
    On the Internet
    

    View Slide

11. View Slide

12. FRONT END PLATFORM
    

    View Slide

13. FRONT END PLATFORM
    WEB
    IOS
    

    View Slide

14. WEB
    IOS
    

    View Slide

15. WEB
    

    View Slide

16. WEB
    

    View Slide

17. Complexity
    

    View Slide

18. Complexity
    

    View Slide

19. STATE CHANGES
    API INTERACTIONS
    STYLE
    TOOLING
    APP HIERARCHY
    ROUTING
    

    View Slide

20. STATE CHANGES
    API INTERACTIONS
    STYLE
    TOOLING
    APP HIERARCHY
    ROUTING
    

    View Slide

21. STATE CHANGES
    API INTERACTIONS
    STYLE
    TOOLING
    APP HIERARCHY
    ROUTING
    

    View Slide

22. STATE CHANGES
    API INTERACTIONS
    STYLE
    TOOLING
    APP HIERARCHY
    ROUTING
    

    View Slide

23. STATE CHANGES
    API INTERACTIONS
    STYLE
    TOOLING
    ROUTING
    APP HIERARCHY
    

    View Slide

24. STATE CHANGES
    API INTERACTIONS
    STYLE
    TOOLING
    

    View Slide

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

    View Slide

26. Artsy Omakase
    LIBRARIES
    TOOLING
    

    View Slide

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

    View Slide

28. LIBRARIES
    

    View Slide

29. React
    

    View Slide

30. React - vs MVC
    VIEW
    MODEL
    CONTROLLER
    USER
    

    View Slide

31. React - Unidirectional
    COMPONENT
    COMPONENT
    COMPONENT
    COMPONENT COMPONENT
    

    View Slide

32. React - Unidirectional
    COMPONENT
    COMPONENT
    COMPONENT
    COMPONENT
    COMPONENT COMPONENT
    

    View Slide

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

    View Slide

34. React - VDOM
    COMPONENT
    COMPONENT
    COMPONENT
    COMPONENT
    COMPONENT COMPONENT
    VIEW
    VIEW VIEW VIEW
    ADDED
    REMOVED
    

    View Slide

35. React Native
    

    View Slide

36. GraphQL
    

    View Slide

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

    View Slide

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]
    

    View Slide

39. GraphiQL
    

    View Slide

40. Relay
    

    View Slide

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

    View Slide

42. Relay
    COMPONENT
    COMPONENT
    COMPONENT
    COMPONENT
    COMPONENT
    RELAY
    RELAY
    RELAY
    

    View Slide

43. Relay
    COMPONENT
    COMPONENT
    COMPONENT
    COMPONENT
    COMPONENT
    RELAY
    RELAY
    RELAY
    

    View Slide

44. Relay - Colocation
    COMPONENT
    

    View Slide

45. Relay - Consolidation
    COMPONENT
    

    View Slide

46. Apollo GraphQL
    

    View Slide

47. Styled Components
    !
    

    View Slide

48. Web’s infra
    STYLE CONTENT
    

    View Slide

49. CSS in JS
    STYLED CONTENT
    

    View Slide

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

    View Slide

51. Alternatives
    §
    §
    §
    §
    §
    

    View Slide

52. TOOLING
    

    View Slide

53. VS Code
    

    View Slide

54. VS Code
    

    View Slide

55. VS Code
    

    View Slide

56. Process Separation
    

    View Slide

57. Lazy Loading Plugins
    

    View Slide

58. VS Code - Styled Components
    

    View Slide

59. VS Code - Relay + GraphQL
    

    View Slide

60. VS Code - Debugging
    

    View Slide

61. VS Code - React Native Debugger
    

    View Slide

62. TypeScript
    

    View Slide

63. TypeScript
    

    View Slide

64. Options
    TYPESCRIPT FLOW
    

    View Slide

65. Go with the Flow
    FLOW
    IS THE
    DEFAULT
    

    View Slide

66. But we went with TypeScript
    TYPESCRIPT
    

    View Slide

67. View Slide

68. But we went with TypeScript
    TYPESCRIPT
    

    View Slide

69. Pragmatic
    

    View Slide

70. Jest
    

    View Slide

71. Jest - Watch
    

    View Slide

72. Jest - Watch
    

    View Slide

73. Jest - Process Separation
    

    View Slide

74. Jest - Better Primitives
    

    View Slide

75. Jest - Snapshots
    

    View Slide

76. Jest - Inline Snapshots
    

    View Slide

77. Jest - Mock API
    

    View Slide

78. Storybook
    

    View Slide

79. Storybook - live coding
    

    View Slide

80. App as function of data
    {
    "data": {
    "artist": {
    "name": "Marina Abramović",
    ...
    }
    }
    }
    {
    "state": {
    “tabIndex”: 1
    }
    }
    

    View Slide

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

    View Slide

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

    View Slide