We try!'d Swift

F116cb3be23153ec08b94e8bd4dbcfeb?s=47 Orta
March 02, 2017

We try!'d Swift

Talk about one year of React Native at Artsy.

F116cb3be23153ec08b94e8bd4dbcfeb?s=128

Orta

March 02, 2017
Tweet

Transcript

  1. None
  2. @ O R TA

  3. None
  4. None
  5. apps 1,700,000+

  6. None
  7. We try!’d Swift

  8. ¯\_(ツ)_/¯

  9. `\_(ツ)_/¯

  10. Problem

  11. None
  12. None
  13. Patterns

  14. RE-USE

  15. None
  16. ARTSY SWIFT COMPONENTS

  17. JSON-POWERED COMPONENTS SPOTS / HUB

  18. REACT IN SWIFT KATANA

  19. POD VIEW CONTROLLERS

  20. REACT NATIVE

  21. None
  22. None
  23. None
  24. None
  25. Swift

  26. CONSISTENT EXCITING EVOLVING LEAST RESISTANCE KNOWN-UNKNOWN

  27. SLOW

  28. SLOW NOT BUILT FOR OUR APPS

  29. React

  30. 593 DEPENDENCIES YOUNG CHANGING PRAGMATIC DEVS SEEN AS PANACEA

  31. BETTER CORE ABSTRACTIONS THAN UIKIT FOR API DRIVEN APPS

  32. BETTER LIBRARIES

  33. NATIVE STILL POSSIBLE

  34. HARD TO WRITE BLOCKING CODE

  35. SIMPLER LAYOUTING SYSTEM

  36. TESTING

  37. OPEN COMMUNICATION

  38. OPEN COMMUNICATION

  39. LEARN ONCE, WRITE EVERYWHERE

  40. None
  41. OPEN SOURCE BY DEFAULT

  42. OPEN SOURCE BY DEFAULT

  43. None
  44. None
  45. None
  46. A BIG DEPENDENCY

  47. React

  48. React Native

  49. React Native

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

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

    { }
  53. import React from "react" import { View } from "react-native"

    export default class ArtistHeader extends React.Component { render() { return <View> } }
  54. import React from "react" import { View, Label } from

    "react-native" export default class ArtistHeader extends React.Component { render() { return ( <View> <Label>Josef Albers </Label> <Label>b. 1888 </Label> </View> ); } }
  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 ( <View> <Header>Josef Albers </header> <Label>b. 1888 </Label> </View> ); } }
  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 ( <View> <Header>{artist.name} </Header> <Label>{artist.year} </Label> </View> ); } }
  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 ( <View> <Header>{artist.name} </Header> <Label>{artist.year} </Label> </View> ); } } <ArtistHeader artist={{ name: “Josef Albers”, year: “b.1888” }} />
  58. <ArtistHeader artist={ this.props.artist } />

  59. <ArtistHeader artist={ ??} />

  60. None
  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 ( <View> <Header>{artist.name} </Header> <Label>{artist.year} </Label> </View> ); } }
  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 ( <View> <Header>{artist.name} </Header> <Label>{artist.year} </Label> </View> ); } }
  63. <View> <Header>{artist.name} </Header> <Label>{artist.year} </Label> </View> ); } } export

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

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

    default Relay.createContainer(ArtistHeader, { fragments: { artist: () => Relay.QL` fragment on Artist { name year } `, } })
  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 ( <View style={{ marginLeft: sideMargin, marginRight: sideMargin }}> <Headline style={{ marginBottom: 20 }}>Biography </Headline> { this.blurb(artist) } <SerifText style={styles.bio} numberOfLines={0}>{bio} </SerifText> </View> ) } blurb(artist) { return artist.blurb ? <SerifText style={styles.blurb} numberOfLines={ : null } } const styles = StyleSheet.create({ blurb: {
  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 } `, } })
  68. Tools

  69. Apple Design Awards 
 2016

  70. None
  71. None
  72. None
  73. None
  74. @ O R TA