Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
We try!'d Swift
Search
Orta
March 02, 2017
Programming
0
150
We try!'d Swift
Talk about one year of React Native at Artsy.
Orta
March 02, 2017
Tweet
Share
More Decks by Orta
See All by Orta
How Does the TypeScript Team Try to Avoid Negative Effects on the JS Ecosystem
orta
0
140
TypeScript: From the Outside In
orta
0
200
React Native, 2 years later
orta
4
2.3k
[WIP] React Native 2 years on
orta
0
220
TSConfig - the keys you need to know
orta
1
160
Building Outside of the Sandbox
orta
0
160
Danger in 15m
orta
1
540
Injection, or Controlling your Tools
orta
0
160
Moving to OSS by Default
orta
2
11k
Other Decks in Programming
See All in Programming
はじめてのMaterial3 Expressive
ym223
2
740
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
440
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
320
Navigating Dependency Injection with Metro
zacsweers
3
960
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
230
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
160
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
450
個人軟體時代
ethanhuang13
0
320
Cache Me If You Can
ryunen344
2
1.4k
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.5k
Laravel Boost 超入門
fire_arlo
3
220
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Speed Design
sergeychernyshev
32
1.1k
Practical Orchestrator
shlominoach
190
11k
A Tale of Four Properties
chriscoyier
160
23k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
A Modern Web Designer's Workflow
chriscoyier
696
190k
Designing for humans not robots
tammielis
253
25k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Statistics for Hackers
jakevdp
799
220k
How to Ace a Technical Interview
jacobian
279
23k
GitHub's CSS Performance
jonrohan
1032
460k
Transcript
None
@ O R TA
None
None
apps 1,700,000+
None
We try!’d Swift
¯\_(ツ)_/¯
`\_(ツ)_/¯
Problem
None
None
Patterns
RE-USE
None
ARTSY SWIFT COMPONENTS
JSON-POWERED COMPONENTS SPOTS / HUB
REACT IN SWIFT KATANA
POD VIEW CONTROLLERS
REACT NATIVE
None
None
None
None
Swift
CONSISTENT EXCITING EVOLVING LEAST RESISTANCE KNOWN-UNKNOWN
SLOW
SLOW NOT BUILT FOR OUR APPS
React
593 DEPENDENCIES YOUNG CHANGING PRAGMATIC DEVS SEEN AS PANACEA
BETTER CORE ABSTRACTIONS THAN UIKIT FOR API DRIVEN APPS
BETTER LIBRARIES
NATIVE STILL POSSIBLE
HARD TO WRITE BLOCKING CODE
SIMPLER LAYOUTING SYSTEM
TESTING
OPEN COMMUNICATION
OPEN COMMUNICATION
LEARN ONCE, WRITE EVERYWHERE
None
OPEN SOURCE BY DEFAULT
OPEN SOURCE BY DEFAULT
None
None
None
A BIG DEPENDENCY
React
React Native
React Native
None
export default class ArtistHeader extends React.Component { }
import React from "react" export default class ArtistHeader extends React.Component
{ }
import React from "react" import { View } from "react-native"
export default class ArtistHeader extends React.Component { render() { return <View> } }
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> ); } }
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> ); } }
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> ); } }
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” }} />
<ArtistHeader artist={ this.props.artist } />
<ArtistHeader artist={ ??} />
None
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> ); } }
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> ); } }
<View> <Header>{artist.name} </Header> <Label>{artist.year} </Label> </View> ); } } export
default Relay.createContainer(ArtistHeader, { fragments: { artist: () => Relay.QL` fragment on Artist { name year } `, } })
<View> <Header>{artist.name} </Header> <Label>{artist.year} </Label> </View> ); } } export
default Relay.createContainer(ArtistHeader, { fragments: { artist: () => Relay.QL` fragment on Artist { name year } `, } })
<View> <Header>{artist.name} </Header> <Label>{artist.year} </Label> </View> ); } } export
default Relay.createContainer(ArtistHeader, { fragments: { artist: () => Relay.QL` fragment on Artist { name year } `, } })
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: {
: 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 } `, } })
Tools
Apple Design Awards 2016
None
None
None
None
@ O R TA