We try!'d Swift

Talk about one year of React Native at Artsy.

Transcript

1. View Slide

2. @ O R TA
   

   View Slide

3. View Slide

4. View Slide

5. apps
   1,700,000+
   

   View Slide

6. View Slide

7. We try!’d Swift
   

   View Slide

8. ¯\_(ツ)_/¯
   

   View Slide

9. `\_(ツ)_/¯
   

   View Slide

10. Problem
    

    View Slide

11. View Slide

12. View Slide

13. Patterns
    

    View Slide

14. RE-USE
    

    View Slide

15. View Slide

16. ARTSY SWIFT COMPONENTS
    

    View Slide

17. JSON-POWERED COMPONENTS
    SPOTS / HUB
    

    View Slide

18. REACT IN SWIFT
    KATANA
    

    View Slide

19. POD VIEW CONTROLLERS
    

    View Slide

20. REACT NATIVE
    

    View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. Swift
    

    View Slide

26. CONSISTENT
    
    EXCITING
    
    EVOLVING
    
    LEAST RESISTANCE
    
    KNOWN-UNKNOWN
    

    View Slide

27. SLOW
    
    

    View Slide

28. SLOW
    
    NOT BUILT FOR OUR APPS
    

    View Slide

29. React
    

    View Slide

30. 593 DEPENDENCIES
    
    YOUNG
    
    CHANGING
    
    PRAGMATIC DEVS
    
    SEEN AS PANACEA
    

    View Slide

31. BETTER CORE ABSTRACTIONS
    
    THAN UIKIT FOR API DRIVEN APPS
    

    View Slide

32. BETTER LIBRARIES
    

    View Slide

33. NATIVE STILL POSSIBLE
    

    View Slide

34. HARD TO WRITE BLOCKING CODE
    

    View Slide

35. SIMPLER LAYOUTING SYSTEM
    

    View Slide

36. TESTING
    

    View Slide

37. OPEN COMMUNICATION
    

    View Slide

38. OPEN COMMUNICATION
    

    View Slide

39. LEARN ONCE, WRITE EVERYWHERE
    

    View Slide

40. View Slide

41. OPEN SOURCE BY DEFAULT
    

    View Slide

42. OPEN SOURCE BY DEFAULT
    

    View Slide

43. View Slide

44. View Slide

45. View Slide

46. A BIG DEPENDENCY
    

    View Slide

47. React
    

    View Slide

48. React
    Native
    

    View Slide

49. React
    Native
    

    View Slide

50. View Slide

51. export default class ArtistHeader extends React.Component {
    }
    

    View Slide

52. import React from "react"
    export default class ArtistHeader extends React.Component {
    }
    

    View Slide

53. import React from "react"
    import { View } from "react-native"
    export default class ArtistHeader extends React.Component {
    render() {
    return
    }
    }
    

    View Slide

54. import React from "react"
    import { View, Label } from "react-native"
    export default class ArtistHeader extends React.Component {
    render() {
    return (
    
    Josef Albers
    b. 1888
    
    );
    }
    }
    

    View Slide

55. import React from "react"
    import { View, Label } from "react-native"
    import Header from " ../components/header"
    export default class ArtistHeader extends React.Component {
    render() {
    return (
    
    Josef Albers
    b. 1888
    
    );
    }
    }
    

    View Slide

56. import React from "react"
    import { View, Label } from "react-native"
    import Header from " ../components/header"
    export default class ArtistHeader extends React.Component {
    render() {
    const artist = this.props.artist
    return (
    
    {artist.name}
    {artist.year}
    
    );
    }
    }
    

    View Slide

57. import React from "react"
    import { View, Label } from "react-native"
    import Header from " ../components/header"
    export default class ArtistHeader extends React.Component {
    render() {
    const artist = this.props.artist
    return (
    
    {artist.name}
    {artist.year}
    
    );
    }
    }
    
    

    View Slide

58. 
    

    View Slide

59. 
    

    View Slide

60. View Slide

61. import React from "react"
    import { View, Label } from "react-native"
    import Header from " ../components/header"
    export default class ArtistHeader extends React.Component {
    render() {
    const artist = this.props.artist
    return (
    
    {artist.name}
    {artist.year}
    
    );
    }
    }
    

    View Slide

62. import React from "react"
    import { View, Label } from "react-native"
    import Relay from 'react-relay'
    import Header from " ../components/header"
    class ArtistHeader extends React.Component {
    render() {
    const artist = this.props.artist
    return (
    
    {artist.name}
    {artist.year}
    
    );
    }
    }
    

    View Slide

63. 
    {artist.name}
    {artist.year}
    
    );
    }
    }
    export default Relay.createContainer(ArtistHeader, {
    fragments: {
    artist: () => Relay.QL`
    fragment on Artist {
    name
    year
    }
    `,
    }
    })
    

    View Slide

64. 
    {artist.name}
    {artist.year}
    
    );
    }
    }
    export default Relay.createContainer(ArtistHeader, {
    fragments: {
    artist: () => Relay.QL`
    fragment on Artist {
    name
    year
    }
    `,
    }
    })
    

    View Slide

65. 
    {artist.name}
    {artist.year}
    
    );
    }
    }
    export default Relay.createContainer(ArtistHeader, {
    fragments: {
    artist: () => Relay.QL`
    fragment on Artist {
    name
    year
    }
    `,
    }
    })
    

    View Slide

66. class Biography extends React.Component {
    render() {
    const artist = this.props.artist
    if (!artist.blurb && !artist.bio) { return null }
    const bio = this.props.artist.bio.replace('born', 'b.')
    return (
    
    Biography
    { this.blurb(artist) }
    {bio}
    
    )
    }
    blurb(artist) {
    return artist.blurb ? : null
    }
    }
    const styles = StyleSheet.create({
    blurb: {
    

    View Slide

67. : null
    }
    }
    const styles = StyleSheet.create({
    blurb: {
    fontSize: 16,
    lineHeight: 20,
    marginBottom: 20
    },
    bio: {
    fontSize: 16,
    lineHeight: 20,
    marginBottom: 40
    }
    })
    export default Relay.createContainer(Biography, {
    fragments: {
    artist: () => Relay.QL`
    fragment on Artist {
    bio
    blurb
    }
    `,
    }
    })
    

    View Slide

68. Tools
    

    View Slide

69. Apple Design Awards
    

    2016
    

    View Slide

70. View Slide

71. View Slide

72. View Slide

73. View Slide

74. @ O R TA
    

    View Slide