shares some code. • No WebView or HTML or CSS or DOM. • Does not use <div> or <span> or any of the web primitives • Does not “re-create” the platform’s native components • Not really a “hybrid” framework in the typical sense (like Ionic) • Does not “compile” your JavaScript to native code. WHAT REACT NATIVE IS NOT
(or TypeScript) • Build with native components rendered by native code. • You can apply much of your existing experience from Web (box model, flex layout)
• Single language and set of tooling across iOS and Android • Developer experience of web with the power of native mobile. • Leverage the core concepts developers love about React. DESIGN GOALS “Learn once, write anywhere”
The JavaScript ecosystem is mature with plenty of great tooling. • React is well known for solving perf issues on the web. HTML/CSS is slow; The DOM is slow. Animations can be slow if they’re driven from JS
Instantiating, styling and positioning native elements. • Converting Flexbox layout to pixel- based layout (Yoga). • Interfacing with the hardware (GPS, Network, camera) • Notifying the JS side about events (such as device rotation or touch)
message is completely serializable and the format looks like JSON. • Message passing is asynchronous. • Each message is essentially a command (method call) The Bridge
• All code that interfaces with hardware runs on the Native side. • Example messages from JS -> Native: - Placement of an element on screen - Sending a network request • Example messages from Native -> JS: - Notification of user input (touch / scroll) - Network response
updating layout every frame. • Re-rendering an element onScroll. • Gestures: swiping or pinch-to- zoom. • Basically everything you love about native interactions. THINGS THAT WILL CONGEST THE BRIDGE
screen. (I don’t care what’s currently on the screen) • Get the shape that’s on the screen. • If it’s not a square, call setShape(‘square’) • If it’s not blue, call setColor(‘blue’)
Better use of multi-cores. • Clean abstractions and separation of concerns. Since all of our business logic (our application code) runs on a different thread,
stuff. • Almost instantaneous code reload. • Over the air updates (yes, even on iOS) • Sandbox/playground to easily experiment with React Native JAVASCRIPT
Native. • Built mostly in C++ • Platform independent • Takes in flex properties (flexDirection, alignItems, etc) • Outputs [top, left, width, height] • That’s all it does. YOGA yogalayout.com
• Main Thread: in charge of startup; launches other threads, including the JS thread • UI/Layout Thread • One thread for each native module: network, localStorage, custom modules
• Application code is moving more towards higher-level, cross- platform solutions, such as React Native or Flutter. • More frameworks are building on the ideas of React THE TREND, AS I SEE IT
probably not use JavaScript • There’s nothing about the React Native paradigm that requires JavaScript • Better, more strongly typed languages are coming about, such as ReasonML and Kotlin • Declarative is the right way to do UI and will have a huge influence on future frameworks.