We try!'d Swift

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