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
160
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
150
TypeScript: From the Outside In
orta
0
210
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
170
Danger in 15m
orta
1
550
Injection, or Controlling your Tools
orta
0
160
Moving to OSS by Default
orta
2
11k
Other Decks in Programming
See All in Programming
社会人になっても趣味開発を続けたい! / traPavilion
mazrean
1
100
What's new in Spring Modulith?
olivergierke
1
170
モテるデスク環境
mozumasu
3
1.3k
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
120
ドメイン駆動設計のエッセンス
masuda220
PRO
10
2.4k
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
130
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
2
380
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
160
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
120
AI時代に必須!状況言語化スキル / ai-context-verbalization
minodriven
2
110
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
510
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
34
2.3k
Documentation Writing (for coders)
carmenintech
75
5.1k
Code Reviewing Like a Champion
maltzj
526
40k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Visualization
eitanlees
149
16k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
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