We try!'d Swift

Talk about one year of React Native at Artsy.

Transcript

2. @ O R TA
5. apps 1,700,000+
7. We try!’d Swift
8. ¯\_(ツ)_/¯
9. `\_(ツ)_/¯
10. Problem
13. Patterns
14. RE-USE
16. ARTSY SWIFT COMPONENTS
17. JSON-POWERED COMPONENTS SPOTS / HUB
18. REACT IN SWIFT KATANA
19. POD VIEW CONTROLLERS
20. REACT NATIVE
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
41. OPEN SOURCE BY DEFAULT
42. OPEN SOURCE BY DEFAULT
46. A BIG DEPENDENCY
47. React
48. React Native
49. React Native
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={ ??} />
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
74. @ O R TA