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
270
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
64
Migrating to Swift 3
sergioutama
0
55
Taming AutoLayout
sergioutama
0
47
10 Things I learned while freelancing
sergioutama
0
59
iOS Video Player
sergioutama
0
83
Tribute to Mantle
sergioutama
0
29
Mobile Analytics
sergioutama
0
46
Other Decks in Programming
See All in Programming
One Enishi After Another
snoozer05
PRO
0
130
Devoxx BE - Local Development in the AI Era
kdubois
0
130
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
1
330
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
Flutterで分数(Fraction)を表示する方法
koukimiura
0
140
Google Opalで使える37のライブラリ
mickey_kubo
2
110
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.4k
チームの境界をブチ抜いていけ
tokai235
0
200
CSC305 Lecture 06
javiergs
PRO
0
250
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
200
CSC509 Lecture 05
javiergs
PRO
0
300
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
kasacchiful
0
210
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7.1k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Fireside Chat
paigeccino
40
3.7k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
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