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

React Native: the past, the present and the future

React Native: the past, the present and the future

As we approach React Native's 4th birthday, we've observed more progression towards our original vision than ever before. 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 Fabric, the JSI, and TurboModules. With all the pieces of the puzzle in place and landing on master in upcoming months, we are closer to reaching our original objective than ever before while pushing the limits to a whole new level.

Lorenzo 'kelset' Sciandra

January 17, 2019
Tweet

More Decks by Lorenzo 'kelset' Sciandra

Other Decks in Programming

Transcript

  1. REACT NATIVE:
    the past, the present & the future

    View full-size slide

  2. I am... Lorenzo Sciandra @kelset
    ● I use Twitter, A LOT
    ● React Native Developer ~3yrs
    ○ Physio
    ○ Day8 (The Yacht Week)
    ○ Drivetribe
    ● React Native Core >1yr
    ○ Maintainer
    ○ Releases
    ○ React Native Community org

    View full-size slide

  3. 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

    View full-size slide

  4. 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”
    NATIVE(s)
    ~ REACT BRIDGE

    View full-size slide

  5. Something clicked
    ● A lot of companies...
    ● ...on a lot of platforms
    https://github.com/pavjacko/react-native-vanilla

    View full-size slide

  6. 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
    ○ ...

    View full-size slide

  7. The boundaries of React Native
    ~ REACT
    BRIDGE
    JAVASCRIPT
    NATIVE(s)
    JSC
    SHADOW TREE
    JSON (ASYNC)
    NATIVE MODULES

    View full-size slide

  8. The boundaries of React Native
    BRIDGE
    SHADOW TREE
    JSON (ASYNC)
    NATIVE MODULES
    "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

    View full-size slide

  9. 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

    View full-size slide

  10. Re-architecture: step 1
    ● Leverage on the improvements from the React team
    ○ Concurrent React
    ○ Suspense
    ○ (Hooks)
    ● Concurrent introduces the concept of priority in React
    ~ REACT++
    ~ REACT

    View full-size slide

  11. 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++
    JAVASCRIPT JSC JAVASCRIPT ANY JS*
    JSI

    View full-size slide

  12. 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”
    JSI
    BRIDGE
    SHADOW TREE
    JSON (ASYNC)
    NATIVE MODULES
    TURBO
    MODULES
    NATIVE(s)

    View full-size slide

  13. 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
    BRIDGE
    SHADOW TREE
    JSON (ASYNC)
    NATIVE MODULES
    FABRIC
    NATIVE(s)
    JAVASCRIPT

    View full-size slide

  14. Let’s summarize
    ~ REACT++
    JAVASCRIPT
    NATIVE(s)
    “When?”
    ● React Concurrent / Suspense
    ○ partially already available >=16.6
    ● 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

    View full-size slide

  15. 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

    View full-size slide

  16. ONE MORE THING...

    View full-size slide

  17. 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
    NATIVE(s) NATIVE(s) --
    https://github.com/react-native-community/discussions-and-proposals/issues/6

    View full-size slide

  18. 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

    View full-size slide

  19. Conclusions
    ● The re-architecture is going to allow us to reach new performance peaks, via:
    ○ JSI
    ○ 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

    View full-size slide

  20. THANK YOU! Lorenzo Sciandra @kelset
    React Native Community -> @ReactNativeComm
    ...QUESTIONS?

    View full-size slide