react native - unleash the power of your device
TRANSCRIPT
React NativeUnleash the power of react in your device
AMSTERDAM 11-12 MAY 2016
This work is licensed under a Creative Commons Attribution 4.0 International License
HELLO!
I am Eduard Tomàs You can find me at @eiximenis
I work @ PlainConcepts http://www.plainconcepts.com
What is React Native?And what makes it different?
That have native UI
React Native is a library to build mobile apps Using JavaScript
and the same workflow and tools that we use to build web applications
What makes React Native fresh and powerful is…
But these are’nt the most important things…
React Native brings the “React way” to mobile development
“Thinking in React”
Only componentsSingle source of
truthOne direction data flow
Reusable Stateless ComponentsAvoiding state in your components not only make them reusable… also can save your life!
State should be stored in a single point.Components should have only “read acces” to this stateComponents should expose an API to change its behavior
React Native architecture
Not a “write once” solutionAt least not yet!
JavaScript code can be shared with iOS and Android applications
UI code (React components) is not totally reusable.
Most components are shared between platforms but some does’nt
This is improving
UI is fully nativeVirtual DOM generated by components is translated to real native UI components.
A react native button is really a UIButton or a android.widget.Button
And about JavaScript…JavaScript is bundled in the application package
JavaScript is executed using JavaScript Core (part of WebKit project)
JavaScript runs in an Asynchronous way…… with native methods calls batched…… exchanging serializable messages (not sharing mutable data)
What about styling?React Native contains a custom implementation of CSS
Based on JavaScript objects (no CSS files exist)
What about layouts?Layout in Android and iOS differs a lot
React Native relies on its own layout system
Basic implementation of CSS flexbox standard
“Functional” UI
f is a pure function
A pure function is a function with no side effects
𝑈𝐼= 𝑓 (𝑑𝑎𝑡𝑎 )
𝑈𝐼= 𝑓 (𝑐𝑜𝑢𝑛𝑡 )
Previous code was from a web project. In mobile <div> and <span> mean nothing but same principles apply.
Only component names change
From web to mobile
Updating the stateState should be on a single place, usually in the “top most” component
CounterPage
TopMost component holding state
Receives events from Counter component and updates its own state
Counter
Stateless component
Have “read only” view of data in their props
Communicates via events
One direction data flow
WANT BIG IMPACT?
USE BIG IMAGE.
Time to code…
The “mobile workflow”Code somethingCompileDeploy on emulatorDo some changesCompile againDeploy againAnd again, and again…
The “React Native Workflow”Code somethingDeploy on emulatorDo some changesRefresh on emulatorNever deploy againJust change code and refresh
The debugging experienceDebugging code is performed through Chrome
As any web application
Navigation
React Native offers one top most component (Navigator) to handle application navigation
Offers an API similar to the HTML5 PushState.
Each scene (screen) is a top react component
WANT BIG IMPACT?
USE BIG IMAGE.
Show me in action!
React Native APIsReact Native come with a lot of APIs to do basic stuff
Most of these APIs exists for both Android and iOS
AppState: manages the application state and notifies changes
AsyncStorage: Persistent key/value storage
CameraRoll: Provides access to local camera roll or gallery
Vibration: Access to the underlying vibration API
fetch: API for performing HTTP Requests. Mimics the same API available in some browsers (i. e. Chrome)
GeoLocation: API for accessing the geo location data. Mimics the same HTML5 API.
…
Q: Can I interoperate with native code?Yes, you can create a native module using ObjC (for iOS) or Java (for Android)
A native module is a class
For iOS must to conform the RCTBridgeModule protocol
For Anrdoid must extend ReactContextBaseJavaModule class
Q: Can I use native UI controls?Yes, you can expose native UI controls to JavaScript
You can bridge native properties to/from JavaScript code
Can dispatch events from the UI control to JavaScript code
Any questions?You can find me at @eiximenis or contact me using [email protected]
Thanks!
