Hi. I’m Simon I run a dev team building cool stuff with React and React Native. @sstur_ Previously @ Facebook in California Currently CTO at KodeFox, Inc. [email protected]
• Command-line tool • npm library • Bundler • Set of native modules and UI primitives • Layout engine • API between native and JS • Set of debugging tools • … and more. WHAT IS REACT NATIVE?
• Not the same as React on web, although it shares some code. • No WebView or HTML or CSS or DOM. • Does not use or 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
• Allows you to build your application 100% in JavaScript (or TypeScript) • Build with native components rendered by native code. • You can apply much of your existing experience from Web (box model, flex layout)
• Solve the challenges of building two separate native apps. • 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”
• Write code, save, reload … like a refreshing a web page. • Instant feedback, helpful errors. • Simple, powerful layout system using Flexbox • Scale easily to large teams WEB
• Modern JavaScript is surprisingly fast and well optimized. • 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.
JavaScript Thread • All the code you write essentially runs here. • Non-blocking, single-threaded. • Intentionally Isolated; no shared memory. • Can only communicate with the native side by message passing.
{ } Native Thread(s) Use analogy of server-rendered HTML • 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)
{ } Native Thread(s) • Mostly this is framework code. • You do not normally write native code when building Apps with React Native. • Unless you’re a library author.
• Handles message passing between JavaScript and Native • Each 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 your business logic runs on the JS side. • 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
This provides such a clearly defined abstraction it's almost like two network devices communicating over HTTP or WebSocket. In fact, you can sub out the bridge for an actual WEBSOCKET for debugging.
Native JavaScript 1. Send message to request network info. 2. Query the hardware and compose a response message. 3. Receive response and pass to callback.
Doing any of this on the JS thread: • Animation: 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
EXAMPLE Imperative Declarative I want a blue square on the 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’)
• Excellent perf even when another thread is busy • 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,
Since the JavaScript is interpreted, we get some other cool stuff. • Almost instantaneous code reload. • Over the air updates (yes, even on iOS) • Sandbox/playground to easily experiment with React Native JAVASCRIPT
Yoga is a library from Facebook, originally made for React 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
In fact, there are several threads on the Native side. • 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
• Libraries will always be written in low-level, native code. • 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
• The next generation frameworks that replace React Native will 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.
sstur
maltzj
afnizarnur
bkeepers
chriscoyier
geeforr
schacon
dougneiner
hatefulcrawdad
jensimmons
gr2m
geoffreycrofte