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
130
TypeScript: From the Outside In
orta
0
190
React Native, 2 years later
orta
4
2.3k
[WIP] React Native 2 years on
orta
0
200
TSConfig - the keys you need to know
orta
1
150
Building Outside of the Sandbox
orta
0
150
Danger in 15m
orta
1
510
Injection, or Controlling your Tools
orta
0
150
Moving to OSS by Default
orta
2
11k
Other Decks in Programming
See All in Programming
VibeCoding時代のエンジニアリング
daisuketakeda
0
240
カウシェで Four Keys の改善を試みた理由
ike002jp
1
140
プロフェッショナルとしての成長「問題の深掘り」が導く真のスキルアップ / issue-analysis-and-skill-up
minodriven
8
2k
2025-04-25 GitHub Copilot Agent ライブデモ(スクリプト)
goataka
0
120
VitestのIn-Source Testingが便利
taro28
9
2.5k
データと事例で振り返るDevin導入の"リアル" / The Realities of Devin Reflected in Data and Case Studies
rkaga
3
2.5k
知識0からカンファレンスやってみたらこうなった!
syossan27
5
280
“技術カンファレンスで何か変わる?” ──RubyKaigi後の自分とチームを振り返る
ssagara00
0
130
「理解」を重視したAI活用開発
fast_doctor
0
310
20250426 GDGoC 合同新歓 - GDGoC のススメ
getty708
0
120
ウォンテッドリーの「ココロオドル」モバイル開発 / Wantedly's "kokoro odoru" mobile development
kubode
2
650
파급효과: From AI to Android Development
l2hyunwoo
0
170
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Rails Girls Zürich Keynote
gr2m
94
13k
Optimizing for Happiness
mojombo
378
70k
GitHub's CSS Performance
jonrohan
1031
460k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.7k
Why Our Code Smells
bkeepers
PRO
336
57k
A designer walks into a library…
pauljervisheath
205
24k
Faster Mobile Websites
deanohume
307
31k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
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