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
Desarrollo de aplicaciones con react native by @charliesbox
Search
gdljs
August 22, 2016
Technology
0
120
Desarrollo de aplicaciones con react native by @charliesbox
Talk:
https://www.youtube.com/watch?v=lOBTihIzrd0
gdljs
August 22, 2016
Tweet
Share
More Decks by gdljs
See All by gdljs
Construyendo la mejor experiencia de pagos en línea by @IvanChukitow
gdljs
0
67
Testabilidad en Javascript by @codingpains
gdljs
0
29
¿Debería usar la librería de moda en mi proyecto? by @siedrix
gdljs
0
120
Agile Gamification by @chukitow
gdljs
0
42
Por qué hicimos nuestro propio NodeJS framework by @sgarza
gdljs
0
29
¿Cómo empezar a programar? by @amicavi
gdljs
0
84
Concurrencia y Paralelismo en Javascript by @eatcodetravel
gdljs
0
490
Caldo de Kafka para Node by @albertain
gdljs
0
70
Que ocupas pa' 3D by @escusado
gdljs
0
47
Other Decks in Technology
See All in Technology
エンジニア候補者向け資料2024.04.24.pdf
macloud
0
3.3k
本当のAWS基礎
toru_kubota
0
540
Postman v10リリース後を振り返る / Looking back at Postman v10 after release
yokawasa
1
160
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
620
サーバー間 GraphQL と webmock-graphql の話 / server-to-server graphql and webmock-graphql
qsona
2
190
MapLibreとAmazon Location Service
dayjournal
1
160
リテール金融(キャッシュレス・ネット銀行・ネット証券)の競争環境と経済圏
8maki
0
1.3k
現代CSSフレームワークの内部実装とその仕組み
poteboy
8
3.7k
生成AIの変革の時代に、直近1年で直面した課題とその解決策
ktc_wada
0
400
Grafana x PagerDuty Better Together
jacopen
1
170
ChatworkのSRE部って実は 半分くらいPlatform Engineering部かもしれない
saramune
0
160
require(ESM)とECMAScript仕様
uhyo
4
850
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
KATA
mclloyd
15
12k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
79
43k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
The Art of Programming - Codeland 2020
erikaheidi
42
12k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
17
1.4k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Visualization
eitanlees
136
14k
Become a Pro
speakerdeck
PRO
11
4.5k
Transcript
R e a c t N a t i v
e Building native apps. With JS.
“One day, developers will build native apps by using HTML5,
JS and CSS” The Golden Dream
Is it Phonegap the chosen one?
Web views suck!
Awful performance and weird UI
None
Anyway, developing native apps is awesome!
None
Slow development cycle Why it doesn’t work Slow deployment cycle
Different APIs to code the same thing
What we want • Similar web development cycle • Hot
fixes on the fly (did you say iOS?) • Code reuse • Unique UI per platform
Let’s talk about React Native
Write Once Run Everywhere
Learn Once Write Anywhere
Instant reload React Native OTA Updates Common APIs
None
class Example extends Component { render() { return ( <View>
<Text style={styles.text}> Hello World! </Text> ); } }; It’s all about JS var styles = StyleSheet.create({ text: { flex: 1; justifyContent: ‘center’; backgroundColor: ‘#000’; } });
How it works? HTML? Swift or Java? Nope. Bridge and
threads
None
React Native iOS Android <View/> UIView View <Button/> UIButton Button
<DatePicker/> X X <DatePickerIOS/> <DatePickerAndroid/> UIDatePicker DatePicker
Performance + UI React uses the UI components that are
native to the platform that it runs on.
Can I use 3rd party native components?
@interface RCTMapView : RCTViewManager @end @implementation RCTMapManager RCT_EXPORT_MODULE() - (UIView
*)view { return [[MKMapView alloc] init]; } RCT_EXPORT_VIEW_PROPERTY(showsUserLocation, BOOL) @end //Usage in javascript const MapView = requireNativeComponent("RCTMap", null); // In a render function: <MapView showsUserLocation={true} />
What if Apple or Google release some new components or
APIs?
None
I won’t move without my lodash ❤
All libraries that don’t interact with the DOM are welcome
Can I use it with an existing app?
None
Enough talk. Show me the magic.
None
How do I debug? (Do you like Chrome?)
None
Production ready?
Gyroscope apps from http://gyrosco.pe/
Same team developed both apps They reused almost 85% of
code
None
Sneak Peaks
None
None
R e a c t N a t i v
e R e n d e re r A n g u l a r
Let’s code!
Thanks! @carlyeah
[email protected]
@charliesbox