Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
We try!'d Swift
Orta
March 02, 2017
Programming
0
110
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
47
TypeScript: From the Outside In
orta
0
140
React Native, 2 years later
orta
4
1.9k
[WIP] React Native 2 years on
orta
0
100
TSConfig - the keys you need to know
orta
1
120
Building Outside of the Sandbox
orta
0
110
Danger in 15m
orta
1
360
Injection, or Controlling your Tools
orta
0
120
Moving to OSS by Default
orta
1
9.4k
Other Decks in Programming
See All in Programming
Makuakeの認証基盤とRe-Architectureチーム
bmf_san
0
530
Enumを自動で網羅的にテストしてみた
estie
0
1.2k
和暦を正しく扱うための暦の話
nagise
10
5.8k
Milestoner
bkuhlmann
1
240
Zynq MP SoC で楽しむエッジコンピューティング ~RTLプログラミングのススメ~
ryuz88
0
330
NGK2023S - OCaml最高! スマホ開発にも使えちゃう?!
haochenxie
0
120
Hono v3 - Do Everything, Run Anywhere, But Small, And Faster
yusukebe
4
130
ITエンジニア特化型Q&Aサイトteratailを 言語、DB、クラウドなど フルリプレイスした話
leveragestech
0
400
Writing Greener Java Applications
hollycummins
0
340
フロントエンドで 良いコードを書くために
t_keshi
3
1.6k
Micro Frontends with Module Federation @MicroFrontend Summit 2023
manfredsteyer
PRO
0
510
WordPress(再)入門 - 基礎知識・環境編
oleindesign
1
130
Featured
See All Featured
Gamification - CAS2011
davidbonilla
75
4.1k
Stop Working from a Prison Cell
hatefulcrawdad
263
18k
The Pragmatic Product Professional
lauravandoore
21
3.4k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
Build your cross-platform service in a week with App Engine
jlugia
221
17k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
29
7.9k
The Brand Is Dead. Long Live the Brand.
mthomps
48
2.9k
The Web Native Designer (August 2011)
paulrobertlloyd
76
2.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
2
400
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
152
13k
Building Flexible Design Systems
yeseniaperezcruz
314
35k
KATA
mclloyd
12
9.7k
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