Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Artsy Open Source

July 09, 2018
Tweet

More Decks by Artsy Open Source

Other Decks in Programming

Transcript

  1. Artsy
    Omakase
    Orta Therox

    View full-size slide

  2. WHAT IS
    OMAKASE?

    View full-size slide

  3. 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 full-size slide

  4. 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 full-size slide

  5. 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 full-size slide

  6. 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 full-size slide


  7. On the Internet

    View full-size slide

  8. FRONT END PLATFORM

    View full-size slide

  9. FRONT END PLATFORM
    WEB
    IOS

    View full-size slide

  10. STATE CHANGES
    API INTERACTIONS
    STYLE
    TOOLING
    APP HIERARCHY
    ROUTING

    View full-size slide

  11. STATE CHANGES
    API INTERACTIONS
    STYLE
    TOOLING
    APP HIERARCHY
    ROUTING

    View full-size slide

  12. STATE CHANGES
    API INTERACTIONS
    STYLE
    TOOLING
    APP HIERARCHY
    ROUTING

    View full-size slide

  13. STATE CHANGES
    API INTERACTIONS
    STYLE
    TOOLING
    APP HIERARCHY
    ROUTING

    View full-size slide

  14. STATE CHANGES
    API INTERACTIONS
    STYLE
    TOOLING
    ROUTING
    APP HIERARCHY

    View full-size slide

  15. STATE CHANGES
    API INTERACTIONS
    STYLE
    TOOLING

    View full-size slide

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

    View full-size slide

  17. Artsy Omakase
    LIBRARIES
    TOOLING

    View full-size slide

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

    View full-size slide

  19. React - vs MVC
    VIEW
    MODEL
    CONTROLLER
    USER

    View full-size slide

  20. React - Unidirectional
    COMPONENT
    COMPONENT
    COMPONENT
    COMPONENT COMPONENT

    View full-size slide

  21. React - Unidirectional
    COMPONENT
    COMPONENT
    COMPONENT
    COMPONENT
    COMPONENT COMPONENT

    View full-size slide

  22. React - VDOM
    COMPONENT
    COMPONENT
    COMPONENT
    COMPONENT
    COMPONENT COMPONENT
    VIEW
    VIEW VIEW VIEW

    View full-size slide

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

    View full-size slide

  24. React Native

    View full-size slide

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

    View full-size slide

  26. 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 full-size slide

  27. PRelay
    COMPONENT
    COMPONENT
    COMPONENT
    COMPONENT
    COMPONENT
    API RESULT
    DATA
    DATA
    DATA
    DATA

    View full-size slide

  28. Relay
    COMPONENT
    COMPONENT
    COMPONENT
    COMPONENT
    COMPONENT
    RELAY
    RELAY
    RELAY

    View full-size slide

  29. Relay
    COMPONENT
    COMPONENT
    COMPONENT
    COMPONENT
    COMPONENT
    RELAY
    RELAY
    RELAY

    View full-size slide

  30. Relay - Colocation
    COMPONENT

    View full-size slide

  31. Relay - Consolidation
    COMPONENT

    View full-size slide

  32. Apollo GraphQL

    View full-size slide

  33. Styled Components
    !

    View full-size slide

  34. Web’s infra
    STYLE CONTENT

    View full-size slide

  35. CSS in JS
    STYLED CONTENT

    View full-size slide

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

    View full-size slide

  37. Alternatives
    §
    §
    §
    §
    §

    View full-size slide

  38. Process Separation

    View full-size slide

  39. Lazy Loading Plugins

    View full-size slide

  40. VS Code - Styled Components

    View full-size slide

  41. VS Code - Relay + GraphQL

    View full-size slide

  42. VS Code - Debugging

    View full-size slide

  43. VS Code - React Native Debugger

    View full-size slide

  44. Options
    TYPESCRIPT FLOW

    View full-size slide

  45. Go with the Flow
    FLOW
    IS THE
    DEFAULT

    View full-size slide

  46. But we went with TypeScript
    TYPESCRIPT

    View full-size slide

  47. But we went with TypeScript
    TYPESCRIPT

    View full-size slide

  48. Jest - Watch

    View full-size slide

  49. Jest - Watch

    View full-size slide

  50. Jest - Process Separation

    View full-size slide

  51. Jest - Better Primitives

    View full-size slide

  52. Jest - Snapshots

    View full-size slide

  53. Jest - Inline Snapshots

    View full-size slide

  54. Jest - Mock API

    View full-size slide

  55. Storybook - live coding

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide