Hey notJust Developers,
βReact Universe Conf (formerly React Native EU), organized by Callstack, has recently concluded. The two-day event started on Sept 5th and was filled with exciting announcements.
So many announcements, that we had to cover them in 3 different issues.
Today, letβs dive into:
- The New Architecture as Default in 0.76 π
- New React Native DevTools π―
In-app subscriptions are a pain. The code can be hard to write, time-consuming to maintain, and full of edge cases. RevenueCat makes it simple, plus provides analytics, integrations, and tools to grow so you can get back to building your app.
βGet started with RevenueCat for free, and save weeks of development time integrating In-app subscriptions.
New Architecture as Default in 0.76 π
You may already understand the long-awaited announcement from the title π. Before diving into the details, letβs explore a bit about both the Old & New Architecture of React Native.
Old Architecture
React Native previously used a bridge to communicate between the JavaScript layer and the Native layer. The Native layer is written in C++, Objective C, Java, or kotlin to access native features like cameras, sensors, etc. Unfortunately, the Bridge has some limitations.
One main limitation is that each time one layer communicates with another, it involves serializing (converting JS Object to JSON String) and deserializing (converting JSON String back to JS Object) data. Since the conversion takes time, this process adds a performance issue to the communication flow.
New Architecture in Action
The good news is that the React Native team was able to replace the bridge with an interface called JSI (JavaScript Interface). It was written in C++ and it opens up all the native features available to your JS code, which means that you can call native methods without any data serialization or deserialization, making the app super fast. And yeah, this new communication flow is called New Architecture π.
New Architecture announced as Default π
Since 2018, the React Native team has been working on the New Architecture. In March 2022, they made the New Architecture an experimental option in React Native 0.68. After lots of improvements, on May 16 of this year (2024), they promoted the New Architecture from experimental to Beta
. Finally, at the conference last week, Nicola Cortiand Riccardo from Meta announced that starting with React Native 0.76, the New Architecture will be enabled by default π.
NOTE:
If you migrate your existing app to V0.76, the project will also have the New Architecture enabled by default.
Expo Update
For Expo lovers, Riccardo announced that the New Architecture will also be enabled by default with Expo SDK 52. He also mentioned in one of his tweets that all the Expo modules are compatible with the New Architecture π.
Community Library Updates
The good news for all React Native users is that Riccardo also mentioned in another tweet that the React Native libraries with over 220k weekly downloads (used in 90% of projects) all work with the New Architecture π₯.
Old Architecture as an Option
As we now know, starting with React Native 0.76, the new architecture will be enabled by default. However, if you still need to use the old architecture, you can do that by these steps.
- Android: Redirect to
gradle.properties
file and set newArchEnabled
as false
.
- iOS: Just run the CLI command
RCT_NEW_ARCH_ENABLED=0
bundle exec pod install
.
- Expo: In SDK 52 and later, set
newArchEnabled
as false
in the expo-build-properties
config plugin like below.
When is 0.76 Stable?
βRiccardo announced on stage that they will release the first RC (Release Candidate) for version 0.76 next week. It will take 6-8 weeks to achieve a stable release of 0.76. He also mentioned that the team is expecting a stable release of 0.76 by October 2024.
New React Native DevTools π―
To get into the details of the news, letβs first understand a bit about Browser DevTools and React DevTools, which were created by Meta.
What are Browsers DevTools?
Browser Developer Tools are useful for inspecting, debugging, and optimizing applications. Some of the most common features of every browser developer tool are:
- JS Debugger
- Console
- Element Inspector
- Performance Profiler (Analyzing app performance)
Below is how to open Developer Tools in Brave Browser and check network requests.
βReact DevTools is a browser extension built in 2014 to help developers debug and profile (record performance) React applications. It provides a visual representation of the React component hierarchy, allowing you to view and edit the current props and state of any component, and offers many more features through two extra tabs (Components
& Profiler
) in the browser DevTools for projects built using React.
Thatβs great! Now, letβs understand what are the previous React Native DevTools provided by Meta and their issues.
Old React Native Dev Tools
Since the very beginning, the React Native team has been very concerned about the smooth debugging process and dev tools for React Native projects. Below is the sequence of improvements and debugging tools built by the team to solve various problems of other dev tools:
JSC Direct Debugging (Safari)
:
It was launched 9 years ago for React Native. It worked well, but it only supports the Apple JavaScript core engine on iOS. To solve this issue, the team built βRemote JS Debugging (V8)β.
Remote JS Debugging (V8)
:
So, the Remote JS Debugging (V8) works for both Android and iOS and uses Chrome for debugging. However, the issue is that instead of running the code in Hermes engine (the default JS engine for React Native from 0.64), it runs the code in V8 engine (the JS engine for Chrome) on the device. As a result, it makes the code execution different from the production behavior of the app. To solve this issue, the team launched the βDirect Hermes Debugging (Chrome)β tool.
Direct Hermes Debugging (Chrome)
:
It allows communication between V8 and Hermes on the device. However, the issue with this approach is that many complex tasks need to be done manually (e.g., setting breakpoints, etc.).
Flipper
:
It was launched back in React Native 0.62. It was great as it provided various native debugging plugins (e.g., crash reporter for native code). However, one of the main issues was the complexity of direct Hermes debugging. Considering all the cases, the team deprecated in React Native 0.73.
In-App Developer Tools/ Dev Menu
:
The team also created another dev tool for the React Native app that can be opened directly on your device, simulator, or emulator in debug mode. However, these tools overlap with browser dev tool capabilities and are not very helpful.
With all these React Native dev tools (mentioned above), you may already feel that debugging with them is really hard and unreliable, causing a lot of confusion about which debugging tool to use! π«
New React Native DevTools in Action π₯
So, to remove all the confusion and unreliability, the React Native team (with Alex Hunt on stage) announced new React Native DevTools, on which the entire team worked over the past year. The team built a next-gen debugging stack and named it β React Native DevTools β π.
By using this new debugging stack, you can debug nearly every component of the Dev Server (the server that serves the app during development), including Hermes, Metro, and many more. This new debugging stack improved reliability as it is now the single debugging tool for every component of React Native app development.
NOTE:
This new React Native DevTools also includes React DevTools built-in. As a result, it now has the powerful React components checker and React profiler from the web.
Zero Setup React Native DevTools
βAlex Hunt also presented that the new React Native DevTools require zero setup to start debugging. You can launch it directly from your app via the Dev menu or CLI (as shown below). You only need to have Chrome or Microsoft Edge installed on your device. No other setup is required.
When will it be available?
βAlex announced that the new React Native DevTools will be included by default with React Native 0.76, supporting both the old and new architecture π.
Thatβs it π
React Universe Conf 2024βs key announcements included the New Architecture as Default in 0.76 and the New React Native DevTools.
But thatβs not it. In the next issues, we will cover:
- Expo Dom Components with SDK 52 π₯
- Tree Shaking in Expo π€
- Hermes V2 soon π―
- Server-Defined Rendering in React Native π
π΄ Join me live
This Friday we will build Meetup Clone with React Native. It's going to be a tutorial packed with value, so set a reminder and don't miss it out π
ββ
βπ In case you missed it
Meetup Clone with React Native
We'll guide you step-by-step through building a Meetup clone app using React Native, Expo, and Supabase. If you're looking to create a full-stack mobile app for local events, this tutorial covers everything from authentication to real-time data updates.
|
|
In-app Subscriptions & Paywalls with RevenueCat
This video will provide you with the knowledge needed to implement a strong paywall, effectively manage your subscription products on both the App Store and Google Play Market, and elevate the profitability of your application to new levels.
|
π₯ Press worthy
1οΈβ£ Subscribe to This Week in React and stay up-to-date with the latest React news
2οΈβ£ React Native 0.76 Release Candidateβ
3οΈβ£ Help us improve this newsletter by answering 4 simple questions (3 min)
β
Did you learn something new today?
If you found this email valuable, forward it to one friend or coworker that can benefit from it as well. That would be much appreciated π
The newsletter was written by Anis and edited by Vadim Savin.
|
|
Vadim Savin
Helping you become a better developer together with the notJust.dev team
|
Whenever youβre ready, there are 2 ways I can help you:
- βReact Native Mastery β The Ultimate React Native & Expo Course. Build 7 real-world projects and finally master mobile development with React Native. Launching in November.
βJoin the Waitlist to secure your spot. β
- βnotJust.Incubator β Turn your mobile app idea into a successful product. Our 3-month incubation program offers mentorship, domain expertise, and a proven formula for launching a mobile app with a solid business model.
Got an idea? Apply now!β
|
|
β