Ad
More Related Content
Similar to React Native new architecture Power Point (20)
Recently uploaded (20)
![PRTG Network Monitor Crack Latest Version & Serial Key 2025 [100% Working]](https://cdn.slidesharecdn.com/ss_thumbnails/revolutionizingresidentialwi-fi-250422112639-60fb726f-250504182022-6534c7c0-thumbnail.jpg?width=560&fit=bounds)
Ad
React Native new architecture Power Point
- 2. • What is React Native? React Native’s current architecture • How JavaScript code is understand from the OS? Main thread JavaScript thread Shadow thread • How UI is rendered? • Common issues. React Native’s new architecture • JavaScript Interface (JSI) • Fabric • Turbo Modules • Codegen What to look for
- 3. What is React Native
- 4. <View> <Text> <Image> <ViewGroup> <TextView> <ImageView> Native views React Native Components JavaScrpit is not compailed in to native platfrom languages?
- 5. How JavaScript code is understand from the OS
- 6. The building process JS code JS thread Native / UI thread Packager Bridge Shadow thread serialize json
- 7. How the UI of React Native app is rendered? ReactElementThree(JS) > ReactShadowThree(C++) > HostViewThree(Native)
- 8. React Native’s new architecture
- 9. Why? • Bridge is gone • Re-Rendering infrastructure is rewritten in more cross platform way • Type Saftly (Codegen) • React 18 is available only on the NEW ARCHITECTURE
- 10. JS thread Native / UI thread JSI JSI JavaScript Interface The New Architecture dropped the concept of The Bridge in favor of another communication mechanism: the JavaScript Interface (JSI). The JSI is an interface that allows a JavaScript object to hold a reference to a C++ and vice-versa. Once an object has a reference to the other one, it can directly invoke methods on it. So, for example, a C++ object can now ask a JavaScript object to execute a method in the JavaScript world and vice-versa.
- 11. •Synchronous execution: it is now possible to execute synchronously those functions that should not have been asynchronous in the first place. •Concurrency: it is possible from JavaScript to invoke functions that are executed on different threads. •Lower overhead: the New Architecture doesn't have to serialize/deserialize the data anymore; therefore there are no serialization taxes to pay. •Code sharing: by introducing C++, it is now possible to abstract all the platform agnostic code and to share it with ease between the platforms. •Type safety: to make sure that JS can properly invoke methods on C++ objects and vice-versa, a layer of code automatically generated has been added. The code is generated starting from some JS specification that must be typed through Flow or TypeScript. JSI JavaScript Interface
- 12. Pillars • Fabric (new render) • TurboModules (new native module system) • Codegen (tool that can be used to avoid writing a lot of repetitive)
- 13. Codegen Codegen will generate specific code for every platform:Android and iOS
- 14. Fabric A Fabric Native Component is a Native Component rendered on the screen using the Fabric Render. Using Fabric Native Components instead of Legacy Native Components allows us to reap all the benefits of the New Architecture: •Strongly typed interfaces that are consistent across platforms. •The ability to write your code in C++, either exclusively or integrated with another native platform language, hence reducing the need to duplicate implementations across platforms. •The use of JSI, a JavaScript interface for native code, which allows for more efficient communication between native and JavaScript code than the bridge.
- 15. Turbo Modules Turbo Native Modules are the next iteration on Native Modules that provide a few extra benefits: • Strongly typed interfaces that are consistent across platforms • The ability to write your code in C++, either exclusively or integrated with another native platform language, reducing the need to duplicate implementations across platforms • Lazy loading of modules, allowing for faster app start-up • The use of JSI, a JavaScript interface for native code, allows for more efficient communication between native and JavaScript code than the bridge
- 17. What to look for Timeline: 68 69 70 • New Architecure Support • React 17 • React 18 Support • Bundled Hermes • CMake support • Unified Codegen Config • Fix all the transition from old to new architecture in 68 and 69 https://reactnative.dev/versions Build tools: - React Native Gradele plugin will replace react.gradel - Custom logic in Ruby for CocoaPods Hermes will be recomendend JS engine
- 18. Bonus • Maintain and improve high performance in react native app : (profile the app, observe render patterns, apply memoization in the right places) https://github.com/callstack/reassure • @rnx-kit/dep-check manages React Native dependencies for a package, based on its needs and requirement If you want to learn how dep-check is used at Microsoft, and see a demo of how it works in a monorepo "Improve all the repos – exploring Microsoft’s DevExp".