Our path to

React Native

http://underscope.io

We started as
web developers

ALANTU

Donate your spare smartphone computing power to fuel worldwide research projects

What we needed

  • Run binaries
  • Create background services

Mobile is hard

Memory & Threading

Connectivity

Battery consumption

Orientation

Keyboard

Gestures

Execution states 

New APIs

 

 

Developer experience

User experience

DX

UX

New languages & tools
Tied to IDEs

Single platform
Really slow feedback cycle
(Save + Build + Install + Look)

Distribution via packages
& controlled by stores
 

DX

Native UI components
Native performance

UX

  • Responsiveness: Visible responses in under 100ms to user interactions
     
  • Smoothness: Animations and interactions should update consistently every 16ms.

INGAME

Answer quick trivias and share content to earn points and gain cool rewards

What we needed

  • Multiple platforms
  • Quick iterations

Device APIs

Native container (WebView)

Web App (JS/HTML5/CSS3)

Web technologies (JS/CSS/HTML)
Text editors

Multiple platforms
Web app feedback cycle
(Save + Refresh)

Over-the-air updates

Not easy to extend native

DX

Fake native UI components
Limited performance
(doesn't feel so good)

UX

VORTERIX

Mobile application for the

radio station

What we needed

  • Multiple platforms
  • Audio & video streaming
  • Video full control

React Native

A framework for building native apps using React

Unified developer experience

for web & mobile using React

Browser DOM

<div>
<span>
<img>

Mobile

<View>
<Text>
<Image>

Javascript Engine

React App

UI

Js Thread

Main & Shadow Threads

async batched

calls

Bridge

React + Flexbox
Text editors

Multiple platforms
Web app feedback cycle
(Save + Refresh)

Over-the-air updates

Easy to extend native code

DX

Actual native UI components
Native performance

UX

Going Deep

​React Native Architecture Overview
https://www.youtube.com/watch?v=Ah2qNbI40vE

 

Dive into React Native Performace
https://code.facebook.com/posts/895897210527114/dive-into-react-native-performance/

 

React Native Scheduling
https://www.facebook.com/notes/andy-street/react-native-scheduling/10153916310914590/

 

 

Demo

Thank you

Reach us at @underscopeio

and join our Slack channel on React Native at http://slack.underscope.io

Made with Slides.com