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
2. WHAT IS OMAKASE?
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.” “
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
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
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