Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Native: the past, the present and the future (v2)

React Native: the past, the present and the future (v2)

React Native is now 4 years old. During this time, we've observed more progression than ever before towards the vision of a cross-platform mobile solution. Even still, we have yet to realise its core mission of being as powerful as pure native. There have been many challenges that we've faced head on as they've surfaced. In overcoming them with the support of the community, we've managed to establish React Native as a force that is now defining the future of the segment.

In this talk, we'll explore this history-in-the-making before diving deeper into more technical subjects including the JSI & JSC upgrade, TurboModules & Fabric, and the CodeGen. With all the pieces of the puzzle in place and landing on master by end of the year, we are closer to reaching our original objective than ever before - while pushing the limits to a whole new level.

Lorenzo 'kelset' Sciandra

April 02, 2019

More Decks by Lorenzo 'kelset' Sciandra

Other Decks in Programming


  1. I am... Lorenzo Sciandra @kelset • Twitterholic ◦ TV shows

    & Videogames ◦ Open Source • React Native Developer ~3yrs ◦ Couple small apps, Drivetribe ◦ Formidable • React Native Core Contributor >1yr ◦ Maintain-er ◦ Releas-er ◦ React Native Community-er @kelset @ReactEdinburgh
  2. A long, long time ago • In 2013, Facebook engineers

    were facing classic mobile app issues: ◦ Disjointed, proprietary technology stacks ◦ Slow to iterate ANDROID IOS REACT • On the other end, React on web ◦ Fast to iterate @kelset @ReactEdinburgh
  3. A long, long time ago • In 2015, React Native

    was introduced: ◦ Uses React & Javascript to give full access to native views via a bridge ◦ “write once, run anywhere.” —> "learn once, write anywhere” BRIDGE ~REACT NATIVE(s) @kelset @ReactEdinburgh
  4. Something clicked • A lot of companies... • ...on a

    lot of platforms https://github.com/pavjacko/react-native-vanilla @kelset @ReactEdinburgh
  5. Something clicked • The Open Source community has grown incredibly:

    • Tons of libraries: ◦ react-native-elements ◦ react-navigation ◦ react-native-screens ◦ react-native-gesture-handler ◦ react-native-reanimated ◦ ... @kelset @ReactEdinburgh
  6. The boundaries of React Native "React Native was designed to

    return a single JSON message that lists mutations to perform" • The messages are asynchronous and batched: ◦ Some native APIs want SYNC ◦ Can’t directly call native functions • The native modules are: ◦ Eagerly initialized ◦ always singleton @kelset @ReactEdinburgh
  7. The approach of the re-architecture ~ REACT BRIDGE JAVASCRIPT NATIVE(s)

    JSC SHADOW TREE JSON (ASYNC) NATIVE MODULES “How can we improve it*?” * In a way that is backward-compatible @kelset @ReactEdinburgh
  8. Re-architecture: step 1 • Leverage on the improvements from the

    React team ◦ Concurrent React & Suspense ▪ Queueing ▪ Priority ◦ (Hooks) • CodeGen relies on static typing (Flow, TS) to generate interface files @kelset @ReactEdinburgh
  9. Re-architecture: step 2 • JSI = JavaScript Interface ◦ it's

    a unified lightweight general purpose API for (theoretically) any JavaScript virtual machine ◦ Decouples JS and VM (=Easy swapping) • JSI unlocks the possibility to use C++ ◦ Android = Java and Kotlin gets “translated down” via a Java Native Interface ◦ iOS = Objective-C is none other than a strict superset of C @kelset @ReactEdinburgh
  10. Re-architecture: step 3A • JS can hold direct reference to

    a Native Module object (via C++ Host Objects), generated when needed • Native module methods invocations don't need to batched anymore: they can be executed synchronously without congesting the “bridge” @kelset @ReactEdinburgh
  11. Re-architecture: step 3B • Fabric is an effort aimed to

    modernize the rendering layer of React Native. ◦ Uses C++ for cross-platform "shadow" layer ◦ Shared memory ownership between JS and native (thanks JSI) ◦ Leveraging new React prioritization, it will allow 4 queues: 2 sync & 2 async @kelset @ReactEdinburgh
  12. Let’s summarize ~ REACT++ JAVASCRIPT NATIVE(s) “When?” • React Concurrent

    / Suspense ◦ partially already available >=16.6 • Codegen ◦ ongoing development in the open ◦ monorepo • JSI ◦ already on master • Turbo Modules ◦ ongoing development in the open • Fabric ◦ ongoing development in the open ◦ currently tested by FB ANY JS* JSI TURBO MODULES FABRIC @kelset @ReactEdinburgh
  13. Let’s summarize - FAQs • Will I have to change

    my code? ◦ No. It will be a gradual transition - but you can opt-in on the new React features. • Will it solve gesture & navigation? ◦ No: the re-architecture is a foundation that meant to help improve things. See it as an enabler. • How will I know when it’s ready? ◦ It will be properly communicated @kelset @ReactEdinburgh
  14. Re-architecture: step 4 • This is more of a meta-effort:

    the Lean Core • By moving portions of the current main codebase into separate repositories (ex. WebView), we can increase the overall solidity of the whole codebase: ◦ More people involved ◦ Reduce dead code in your app https://github.com/react-native-community/discussions-and-proposals/issues/6 @kelset @ReactEdinburgh
  15. React Native Community • The community has always been active

    actor in the development of React Native • We want to step up our game by: ◦ Enforcing a set of guidelines for all the packages/repos hosted in the GitHub org ◦ Providing a single place for maintainers to help each other ◦ Setting standards for quality code https://github.com/react-native-community/meta @kelset @ReactEdinburgh
  16. Conclusions • The re-architecture is going to allow us to

    reach new performance peaks, via: ◦ JSI ◦ Codegen ◦ Turbo Modules ◦ Fabric • This re-architecture also enables a wider range of platforms to be targeted (thanks to C++) • The community is one of the best in the dev world @kelset @ReactEdinburgh
  17. THANK YOU! Thanks to... • Lloyds Bank • ScottLogic •

    Pulsecty • biggles at large And @AntczakMichael! ...QUESTIONS? Lorenzo Sciandra @Kelset @FormidableLabs React Native Community @ReactNativeComm