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
130
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
99
TypeScript: From the Outside In
orta
0
170
React Native, 2 years later
orta
4
2.2k
[WIP] React Native 2 years on
orta
0
160
TSConfig - the keys you need to know
orta
1
140
Building Outside of the Sandbox
orta
0
120
Danger in 15m
orta
1
430
Injection, or Controlling your Tools
orta
0
130
Moving to OSS by Default
orta
2
11k
Other Decks in Programming
See All in Programming
LangChainでWebサイトの内容取得やGitHubソースコード取得
shukob
0
160
Go1.23で入った errorsパッケージの小さなアプデ
kuro_kurorrr
2
390
令和トラベルにおけるLLM活用事例:社内ツール開発から得た学びと実践
ippo012
0
210
オートマトン学習しろ / Do automata learning
makenowjust
3
130
unique パッケージから学ぶ interning と weak reference @ Asakusa.go#3
karamaru
2
810
Android開発以外のAndroid開発経験の活かしどころ
konifar
2
1k
Amazon Neptuneで始める初めてのグラフDB ー グラフDBを使う意味を考える ー
satoshi256kbyte
2
260
Lessons by WebAssembly app in production on CDN Edge Computing Service
tetsuharuohzeki
0
210
Kotlin 2.0 and Beyond
antonarhipov
2
150
Pythonで改めて考える「クラス(class)」の使いどころ
os1ma
1
300
What is Parser
yui_knk
9
4.1k
エラーレスポンス設計から考える、0→1開発におけるGraphQLへの向き合い方
bicstone
5
1.5k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
25
3.9k
BBQ
matthewcrist
83
9.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
The Cult of Friendly URLs
andyhume
76
6k
Designing the Hi-DPI Web
ddemaree
278
34k
Why Our Code Smells
bkeepers
PRO
334
56k
The Invisible Side of Design
smashingmag
295
50k
How to train your dragon (web standard)
notwaldorf
85
5.6k
Side Projects
sachag
451
42k
Atom: Resistance is Futile
akmur
261
25k
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