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

We try!'d Swift

Orta
March 02, 2017

We try!'d Swift

Talk about one year of React Native at Artsy.

Orta

March 02, 2017
Tweet

More Decks by Orta

Other Decks in Programming

Transcript

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

    export default class ArtistHeader extends React.Component { render() { return <View> } }
  2. 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> ); } }
  3. 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> ); } }
  4. 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> ); } }
  5. 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” }} />
  6. 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> ); } }
  7. 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> ); } }
  8. <View> <Header>{artist.name} </Header> <Label>{artist.year} </Label> </View> ); } } export

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

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

    default Relay.createContainer(ArtistHeader, { fragments: { artist: () => Relay.QL` fragment on Artist { name year } `, } })
  11. 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: {
  12. : 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 } `, } })