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.3k
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
160
Object Relational Mapping in Scala
lidanh
0
410
Behavioral Design Patterns
lidanh
2
180
Facebook Platform For .net Developers
lidanh
0
150
Other Decks in Technology
See All in Technology
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
2
590
スタートアップにおけるこれからの「データ整備」
shomaekawa
2
350
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
500
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
590
Uncle Bobの「プロフェッショナリズムへの期待」から学ぶプロの覚悟
nakasho
2
110
Trust as Infrastructure
bcantrill
1
370
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
370
能登半島災害現場エンジニアクロストーク 【JAWS FESTA 2025 in 金沢】
ditccsugii
0
230
許しとアジャイル
jnuank
1
140
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
marokiki
0
180
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
110
AWS 잘하는 개발자 되기 - AWS 시작하기: 클라우드 개념부터 IAM까지
kimjaewook
0
120
Featured
See All Featured
Balancing Empowerment & Direction
lara
4
680
Fireside Chat
paigeccino
40
3.7k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
RailsConf 2023
tenderlove
30
1.2k
Site-Speed That Sticks
csswizardry
11
890
Testing 201, or: Great Expectations
jmmastey
45
7.7k
4 Signs Your Business is Dying
shpigford
185
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
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