Wednesday, January 12, 2022
-
9
min
The CTO's Guide to React Native for 2023
React Native is about to break the sound barrier
Here’s what CTOs need to know
Whether you’re hands-on in code or keep more of an overview of your team’s tech strategy, you’ve probably noticed that the React Native ecosystem is moving quickly.
It’s evolving from one of many app frameworks to the potential benchmark for app and web development, and everyone’s looking ahead to where it’s going next.
From new architecture and languages to product suites that are unlocking so much of React Native’s potential, there are plenty of changes in the pipeline for 2023. If React Native is on your radar, you’re planning to switch, or if you’re already using it and don’t want to get caught out, you need to know what’s coming and how to start planning for it now.
“From new architecture and languages to product suites that are unlocking so much of React Native’s potential, there are plenty of changes in the pipeline for 2023.”
If you’re considering React Native, here’s what you need to know
React Native has long been the choice for mobile...
Performance
React Native provides native-level performance, and well-designed code will result in buttery-smooth user interfaces. Pure native implementations might outperform React Native on occasion, but the use cases are few and far between. Meanwhile, Hybrid tech, such as Ionic and Xamarin, uses web and cannot reproduce a native component’s performance. React Native apps compile to native code underneath, so you can easily interact with device facilities like the camera, microphone and accelerometer.
Open-source support
React Native has an extensive support network. This means documentation is kept relevant and the framework constantly evolves for the better, as we’ven seen with recent additions like Solito. Frameworks like Flutter simply don’t have this level of community support behind them, so you need to resort to custom development more often, resulting in greater costs.
Development speed
Compared to other cross platform frameworks like Flutter, React Native blazes ahead for two reasons: lightning fast over-the-air updates, made possible through Expo, and Expo Application Services. These are optimised-for-React-Native cloud services that speed development along while maintaining stability and consistency that generic cloud systems find hard to match.
Cross platform
React Native allows you to use a single code base that can be deployed to iOS and Android. This results in a more consistent UI, and it means you only need to find a team of developers with a single skillset to create what you need. It’s not a binding contract either.
See our services: Multi Platform App Development.
As Expo continues to grow, React Native’s position will consolidate
Over the years, one of React Native’s biggest sticking points with developers has been Expo, the toolkit and build system that sits on top of React Native. Expo wasn’t catastrophic, otherwise apps like Twitter (X) wouldn’t have used it, but it wasn’t ideal either.
For instance, in the past Expo would only build your app if you were in ‘managed’ workflow. If you needed to eject then you had to build your app yourself, diving into the XCode and Android studio wiring. So after causing some frustration, Expo picked up a reputation for being too restrictive and not giving the control developers need.
“You will never need to be in a situation where your developers are building on their Computer.”
That trend is rapidly reversing. In 2021 Expo released a new product suite called Expo Application Services (EAS). That suite gives developers the control they need alongside the speed Expo’s always been known for. Expo is definitely no longer just for prototyping.
Now Expo has the stability and automation tools it needs to expand into the enterprise market and remain a long term solution. And the implication is this: you will never need to be in a situation where your developers are building on their computer.
OTA in the spotlight
With Expo, Over-The-Air (OTA) updates enable you to distribute a new TypeScript bundle via the internet.
This is crucial for developing live products, as it reduces the time it takes to launch feature updates and bug fixes to about three minutes. That’s compared to waiting 3-72 hours without OTA.
See our WatermelonDB tutorial for Expo.
React Native for web will continue to improve in stability
As Expo continues to grow, so does support from third party libraries, especially for React Native for Web. Expo documentation has been listing web alongside iOS and Android for a while now, but what’s new is that third parties are adopting that in droves. Lack of third party support has always been a huge issue for React Native for Web.
Developers building for iOS and Android could pull in all their favourite buttons and menu components but when they tried to deploy to the web, the UI would break down. The only solution would be to add in special web versions of those components and do extra work to make it run properly. Now those friction points are rapidly being sanded out of the system. What that means for tech teams is that React Native is a viable framework across all platforms. This is critical for going to market faster.
Your MVP can use React Native for Web to get out the door and pull in users before the iOS and Android versions follow later from the same codebase.
Your marketing team can use SEO to drive users first to the web build to get initial user traffic and data. Then at the right time, once you’ve got people happily using your web build, you can nudge them onto the iOS/Android version to drive greater retention. Reddit does this particularly successfully - and aggressively - requiring users to download the app before they can view any comments.
“Your MVP can use React Native for Web to get to market quickly before the iOS and Android versions follow later from the same codebase.”
Navigation and rendering on web
Navigation and rendering were two of the primary issues that, until now, prevented React Native from displacing React as the dominant web framework. However, in 2022, Fernando Rojo released a new external library called Solito that enabled navigation to work seamlessly between Next.js and React Native.
It’s become essential for everyone, as now developers can now make navigation work seamlessly across mobile and web with a single codebase.
Combined with Vercel’s Next.js framework, it solves a long-standing rendering issue and enables React Native to deliver performance and discoverability at the same time.
The server delivers HTML code that search engines can read, and developers can still build with all the dynamism of client-side rendering.
If you’re already using React Native, here’s what you need to know
TypeScript is here to stay
As React Native adoption continues, we’re seeing fewer and fewer codebases still written on JavaScript. What’s taking its place is TypeScript. And although there have been debates for years about which language is better, TypeScript is becoming the standard for anything larger than a two-page app, and it’s clear that it’s here to stay.
A growing number of the third-party libraries, core code bases and technologies that support React Native are now TypeScript-first, such as the runtime Deno. So if your team isn’t using TypeScript yet, the time to start is now, before you’re forced to adapt and catch up.
It’s a learning curve for many developers, but in many cases it’s easier to use it than not use it, since it’s becoming ubiquitous.
Taking up TypeScript shouldn’t be a reluctant change. It does force developers to be stricter and adds a level of complexity that not everyone loves. But it also catches errors at build time instead of run time, making for more stable apps and faster development.
“TypeScript catches errors at build time instead of run time, making for more stable apps and faster development.”
For instance, if a developer types in a string of 1, rather than a single 1, TypeScript will catch it and flag it on that developer’s terminal immediately. Whereas with JavaScript, you possibly won’t become aware of the issue until a user triggers it and their app breaks.
Along with TypeScript, you should also be adopting ESLint and Prettier, which are bothlinters that force rules inside the code base. If your team is using React Native but isn’t using TypeScript, plus ESLint, plus Prettier, a string of low hanging fruit awaits you.
“With JavaScript, you possibly won’t become aware of the issue until a user triggers it.”
New architecture is on the way
What’s also driving TypeScript adoption is the new React Native architecture that’s coming in the next 12 months, which will replace React Native’s bridge with two new pieces of framework infrastructure. One is Turbo Modules, which controls how third party plugins are injected into React Native’s build system.
The other is Fabric, a new piece of render logic responsible for all the visual aspects of the app. The rollout has already happened with Expo adoption planned for late 2022 and, by the middle of 2023, developers will start feeling the impact.
Native libraries that aren’t written in a typesafe language will stop working, regardless of whether it’s a basic button or something with more deep linking like navigation or notifications.
With so many legacy libraries that likely won’t be updated, current React Native teams will be forced to make a lot of changes to keep their apps operating smoothly. But this is the right way for React Native to go architecturally, so the short-term pain will be worth it in the long run.
See "In Defence of Clean Architecture: a Paradigm for Sustainable Software Development.
Before you commit to React Native...
If your team isn’t already working in React Native, there are some things you’ll need to be mindful of before you make the switch.
You need active data management policies
One of those is how you collect and manage user data. Data collection is going through a disruptive stage these days as the focus on user privacy grows, and some data avenues previously open to developers are being closed off.
That means tech teams need to start having more in-depth conversations with their product and marketing counterparts about what KPIs can and can’t be measured.
Attribution libraries like AppsFlyer will become less reliable as iOS and Android privacy tightens, and those kinds of changes will have knock-on effects for marketing and business decisions.
“Data collection is going through a disruptive stage these days as the focus on user privacy grows.”
Read "Exploring React Native Bottom Sheet: Implementation, Examples, and Setup."
Senior talent demand will continue to outstrip supply
Thanks to the recent big tech hiring pause and redundancies, we’re seeing so many top-tier developers migrating to fintech and large financial organisations, because that’s where the budgets are. If you’re a startup, or even a mid-tier enterprise, you’re not going to have the resources to compete with them for that senior talent. That leaves a few options for CTOs who don’t have senior React Native specialists already on their team. One option is to invest in education schemes to train up your junior developers into senior positions.
The other is to bring in an external agency that already has that senior expertise in place, and set up a learning process so your developers can advance their skills alongside the external team.
React Native is the framework of the future and the now
React Native is in the strongest position it’s ever been. It’s become platform agnostic across iOS, Android and Web, and the friction that once prevented seamless cross-platform solutions is being eradicated. The framework as a whole is evolving fast due to a very strong community. It’s becoming more stable across the board, while supporting development workflows that only seem to get faster and faster. Flutter might be popular in the hobby space, but React Native and Expo are becoming de facto for production-ready apps.
The only barrier to adopting React Native, or making optimum use of it, is a talent shortage
Let’s chat! If you’re in need of React Native specialists to come alongside your team, get in touch to learn how we can support you.
“It was hard not to be impressed by the team’s deep technical expertise. I’ve worked with dozens of engineers over my career, but no one knows this space as deeply as Morrow does.”
Shaun Gabriel, CTO, Kura
We’re here to help!
