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
React Native - Bringing modern web technologies...
Search
Lidan
May 25, 2016
Technology
5
530
React Native - Bringing modern web technologies to mobile
Lidan Hifi, Wix.com
Lidan
May 25, 2016
Tweet
Share
More Decks by Lidan
See All by Lidan
Building Event-Driven Microservices with Event Sourcing and CQRS
lidanh
8
3.2k
Dev-Centric Culture at Wix - The Developer's Perspective
lidanh
0
550
How Did Nature Inspire Me To Solve The Ciphertext-only Attack
lidanh
0
150
Object Relational Mapping in Scala
lidanh
0
400
Behavioral Design Patterns
lidanh
2
170
Facebook Platform For .net Developers
lidanh
0
140
Other Decks in Technology
See All in Technology
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
890
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
730
事業継続を支える自動テストの考え方
tsuemura
0
300
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
140
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
150
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
110
10分で紹介するAmazon Bedrock利用時のセキュリティ対策 / 10-minutes introduction to security measures when using Amazon Bedrock
hideakiaoyagi
0
170
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
460
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
1
110
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
770
2.5Dモデルのすべて
yu4u
2
610
Featured
See All Featured
Docker and Python
trallard
44
3.3k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Adopting Sorbet at Scale
ufuk
74
9.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
What's in a price? How to price your products and services
michaelherold
244
12k
Side Projects
sachag
452
42k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
Statistics for Hackers
jakevdp
797
220k
We Have a Design System, Now What?
morganepeng
51
7.4k
Transcript
React Native Lidan Hifi Fullstack Developer, Wix Bringing modern web
technologies to mobile Engineering
Native Java Objective-C Swift
Cross Platform PhoneGap Titanium Ionic Sencha Touch
Native Development Sucks*
Slow Development Cycle
Slow Development Cycle Different APIs to Code Same Things
Slow Development Cycle Different APIs to Code Same Things Slow
Deployment Cycle
Slow Development Cycle Different APIs to Code Same Things Slow
Deployment Cycle Separate Platform Teams
Slow Development Cycle Different APIs to Code Same Things Slow
Deployment Cycle Separate Platform Teams
let [ PhoneGap, Trigger.io, Cordova, Ionic, Sencha Touch, Appcelerator Titanium,
...rest ] = stuffWeTriedBefore;
Native Development is more powerful
Stunning UX Develop Quickly
None
Everything was Native
No HTML
No WebView
Wix App is completely powered by JavaScript
React Native
Slow Development Cycle?
Instant Reload
Different APIs to Code Same Things?
90% up to code reuse
Slow Deployment Cycle?
OTA Updates Deploy like you’re on the web
Native Experience
UX of Native Developer Experience of the web
Where’s the Catch?
Many Unsolved Problems
Many Unsolved Problems No Best Practices
Many Unsolved Problems No Best Practices Hard to Test
Many Unsolved Problems No Best Practices Hard to Test Instability
Large Community
How does it work?
Bridge Your App Code Native App React JS
Bridge Your App Code Native App React JS
Bridge Your App Code Native App React JS
Bridge Your App Code Native App React JS
Bridge Your App Code Native App React JS
Bridge Main Thread Background Thread Your App Code Native App
React JS
React JS
Components
Functional UI
Declarative UI Imperative UI: Define Transitions (“how”) Declarative UI: Define
States (“what”)
Declarative UI Predictable
Predictable Confidence
Predictable Confidence
99+ 10
99+ 10
99+ 10
99+ 10
99+ 10 set badge to 99+! sad face! add badge!
remove stars!
10 Imperative UI: Define Transitions 10 99+ 10 10 99+
10 99+ 99+ 99+ 99+ 10 3 states, 9 transitions
10 Imperative UI: Define Transitions 10 99+ 10 10 99+
10 99+ 99+ 99+ 99+ 10 3 states, 9 transitions O(n2)
Imperative UI: Define Transitions if (count == 0) { if
(hasBadge()) { removeBadge(); } if (isSad()) { removeSadFace(); } addStars(); smile(); return; }
Imperative UI: Define Transitions else if (count <= 99) {
if (isSmile()) { removeSmile(); } if (sad()) { removeSadFace(); } if (hasStars()) { removeStars(); } if (!hasBadge()) { addBadge(); } }
Imperative UI: Define Transitions else { if (hasStars()) { removeStars();
} if (!hasBadge()) { addBadge(); } if (isSmile()) { removeSmile(); } setSadFace(); } let count = count > 99 ? '99+' : count.toString(); getBadge().setText(count);
Imperative UI: Define Transitions
Declarative UI: Define States if (count === 0) { return
<Bell style={styles.smile} /> }
Declarative UI: Define States if (count === 0) { return
<Bell style={styles.smile} /> } else if (count <= 99) { return ( <Bell> <Bedge count={count} /> </Bell> ); }
Declarative UI: Define States if (count === 0) { return
<Bell style={styles.smile} /> } else { return ( <Bell style={styles.sad}> <Badge count="99+" /> </Bell> ); } else if (count <= 99) { return ( <Bell> <Bedge count={count} /> </Bell> ); }
React Component render() { } } class HelloMessage extends React.Component
{ return <div>Hello {this.props.name}</div>;
React Component render() { } } class HelloMessage extends React.Component
{ return <div>Hello {this.props.name}</div>;
React Component render() { } } class HelloMessage extends React.Component
{ return <div>Hello {this.props.name}</div>;
React Component render() { } } class HelloMessage extends React.Component
{ return <div>Hello {this.props.name}</div>;
React Component render() { } } class HelloMessage extends React.Component
{ return <div>Hello {this.props.name}</div>; <HelloMessage name="Lidan" />
React Component: Adding State class Counter extends React.Component { }
constructor(props) { super(props); this.state = {count: 0}; this.tick = this.tick.bind(this); } tick() { this.setState({count: this.state.count + 1}); } render() { return ( <div onClick={this.tick}> Clicks: {this.state.count} </div> ); }
React Component: Adding State class Counter extends React.Component { }
constructor(props) { super(props); this.state = {count: 0}; this.tick = this.tick.bind(this); } tick() { this.setState({count: this.state.count + 1}); } render() { return ( <div onClick={this.tick}> Clicks: {this.state.count} </div> ); }
React Component: Adding State class Counter extends React.Component { }
constructor(props) { super(props); this.state = {count: 0}; this.tick = this.tick.bind(this); } tick() { this.setState({count: this.state.count + 1}); } render() { return ( <div onClick={this.tick}> Clicks: {this.state.count} </div> ); }
React Component: Adding State class Counter extends React.Component { }
constructor(props) { super(props); this.state = {count: 0}; this.tick = this.tick.bind(this); } tick() { this.setState({count: this.state.count + 1}); } render() { return ( <div onClick={this.tick}> Clicks: {this.state.count} </div> ); }
React Component: Adding State class Counter extends React.Component { }
constructor(props) { super(props); this.state = {count: 0}; this.tick = this.tick.bind(this); } tick() { this.setState({count: this.state.count + 1}); } render() { return ( <div onClick={this.tick}> Clicks: {this.state.count} </div> ); }
React Component: Adding State class Counter extends React.Component { }
constructor(props) { super(props); this.state = {count: 0}; this.tick = this.tick.bind(this); } tick() { this.setState({count: this.state.count + 1}); } render() { return ( <div onClick={this.tick}> Clicks: {this.state.count} </div> ); }
React Component: Adding State class Counter extends React.Component { }
constructor(props) { super(props); this.state = {count: 0}; this.tick = this.tick.bind(this); } tick() { this.setState({count: this.state.count + 1}); } render() { return ( <div onClick={this.tick}> Clicks: {this.state.count} </div> ); } <Counter />
From Web to Mobile <div /> <View /> UIView <span
/> <Text /> UILabel <img /> <Image /> UIImageView web react-native iOS native
React Native Components ActivityIndicatorIOS DatePickerIOS DrawerLayoutAndroid Image ListView MapView Modal
Navigator PickerIOS Picker ProgressBarAndroid ProgressViewIOS WebView ScrollView SegmentedControlIOS Slider SliderIOS StatusBar Switch TabBarIOS TabBarIOS.Item Text TextInput ToolbarAndroid View
None
react-native-controllers https://github.com/wix/react-native-controllers
react-native-notifications Interactive Notifications Background Notifications Managed Notifications https://github.com/wix/react-native-controllers
Getting Started • Install NodeJS • Install React Native npm
install -g react-native-cli • Create a new RN project react-native init MyProject • Run the application react-native run-ios react-native run-android
References React Native Official docs- facebook.github.io/react-native Make it Open- Building
the F8 App— makeitopen.com Wix Engineering- www.wix.engineering Awesome react native- https://github.com/jondot/awesome-react-native
References React Native Official docs- facebook.github.io/react-native Make it Open- Building
the F8 App— makeitopen.com Wix Engineering- www.wix.engineering Awesome react native- https://github.com/jondot/awesome-react-native
References React Native Official docs- facebook.github.io/react-native Make it Open- Building
the F8 App— makeitopen.com Wix Engineering- www.wix.engineering Awesome react native- https://github.com/jondot/awesome-react-native
References React Native Official docs- facebook.github.io/react-native Make it Open- Building
the F8 App— makeitopen.com Wix Engineering- www.wix.engineering Awesome react native- https://github.com/jondot/awesome-react-native
References React Native Official docs- facebook.github.io/react-native Make it Open- Building
the F8 App— makeitopen.com Wix Engineering- www.wix.engineering Awesome react native- https://github.com/jondot/awesome-react-native
Questions? Engineering @lidanh