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
Easy Way to Improve ReactNative
Search
Sergio Utama
July 12, 2018
Programming
0
260
Easy Way to Improve ReactNative
5 easy way to improve ReactNative project
Sergio Utama
July 12, 2018
Tweet
Share
More Decks by Sergio Utama
See All by Sergio Utama
From try! Swift Tokyo 2017
sergioutama
0
57
Migrating to Swift 3
sergioutama
0
48
Taming AutoLayout
sergioutama
0
34
10 Things I learned while freelancing
sergioutama
0
54
iOS Video Player
sergioutama
0
65
Tribute to Mantle
sergioutama
0
25
Mobile Analytics
sergioutama
0
37
Other Decks in Programming
See All in Programming
2 週間で Twitter Bot を作ってみた
contour_gara
0
740
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
270
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
120
Introducing Kotlin Multiplatform in an existing mobile app - Workshop Edition | AndroidMakers Paris
prof18
0
140
使ってみよう Azure AI Document Intelligence
kosmosebi
2
350
PostmanでAPIの動作確認が楽になった話
h455h1
0
170
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
0
250
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.1k
Ruby GitHub Packages
bkuhlmann
0
630
Tailwind CSSを本気でカスタマイズする方法
fsubal
14
5.4k
Site Reliability Engineering for GMO
pyama86
8
1.1k
Java 22 Overview
kishida
1
190
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Docker and Python
trallard
35
2.7k
What's in a price? How to price your products and services
michaelherold
238
11k
Typedesign – Prime Four
hannesfritz
36
2.1k
How STYLIGHT went responsive
nonsquared
92
4.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.4k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.2k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Fantastic passwords and where to find them - at NoRuKo
philnash
38
2.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
A better future with KSS
kneath
231
16k
Transcript
Easy way to improve your ReactNative Project by @sergioutama @sergioutama
$ whoami Sergio Utama Just your friendly programmer @sergioutama
Don't Use ReactNative @sergioutama
The end @sergioutama
Just kidding ! @sergioutama
1. Fix your project structure @sergioutama
Why — Easier to navigate and maintain — Mental image
how code should be structured @sergioutama
How ~ components for reusable globaly ~ Split based on
screen OR module ~ each screen has its component @sergioutama
2. Stop using arrow function @sergioutama
Arrow function ( () => {}) is a necessary evil
of js world. It make easy to ignore this @sergioutama
However, arrow function actually assigning a new value. Calling it
within render() function will give significant impact on your app performance @sergioutama
Solution? bind early or declare it outside render() @sergioutama
3. Own your component lifecycle @sergioutama
React gave us PureComponent and shouldComponentUpdate to use. Use it!
@sergioutama
Understand how React lifecycle and avoid unecessary render by extending
PureComponent or implementing shouldComponentUpdate. Be!er: fully utilize the whole lifecycle functions. @sergioutama
@sergioutama
4. Component everything @sergioutama
Keep your component small. It's not a dick measuring contents
If more than 6 elements, move it to a component @sergioutama
5. It's either Component OR PureComponent @sergioutama
const modalClosed = ()=>{} const LoadingOverlay = (props) => {
const { loading, message, ...attributes } = props; const defaultMessage = message || ''; return ( <Modal transparent animationType={'none'} visible={loading} onRequestClose={modalClosed} > <View style={styles.modalBackground}> <View style={styles.activityIndicatorWrapper}> <ActivityIndicator animating={loading} /> <Text style={styles.loadingText}>{defaultMessage}</Text> </View> </View> </Modal> ); }; @sergioutama
const modalClose = () => {}; export default class LoadingOverlay
extends React.Component<Props> { render() { const { loading, message, style } = this.props; const defaultMessage = message || ""; return ( <Modal transparent animationType={"none"} visible={loading} onRequestClose={modalClose} > <View style={styles.modalBackground}> <View style={styles.activityIndicatorWrapper}> <ActivityIndicator animating={loading} /> <Text style={styles.loadingText}>{defaultMessage}</Text> </View> </View> </Modal> ); } } @sergioutama
Why Similar but not the same It makes sense on
web or React to use functional stateless component It doesn't make sense on ReactNative Component make it easier to debug view hierarchy @sergioutama
Learn Native and its tools Not so easy way @sergioutama
ReactNative is not a crossplatform. It's not meant that way.
— Sergio Utama @sergioutama
Native Concept: Navigation, Containtment, Signing, Activty vs Fragments, Permission, etc
Tools: Xcode, Gradle, Fastlane @sergioutama
Q&A @sergioutama
The end? Thank you — @sergioutama @sergioutama