React Native will be the most popular web framework in 2024

The history of web development has always been about chasing the next big thing. In the 90s, FrontPage was the way. Then along came jQuery, then AngularJS. Now React is top of the pile, with 80% market share to prove it.

But since React’s adoption, development has evolved beyond recognition. It’s clear it won’t be top dog forever. And what if its replacement is already out there?

If you know about React Native, you’re probably wondering why we’re talking about it as a web framework. For starters, while it’s arguably the best framework for mobile app development, it’s not created many waves on the web – yet. 

It was also birthed by developers who took some of React’s best concepts and applied them to the app world. So how can we expect React Native to jump back over to the web and beat React at its own game?

‍

How can a mobile application framework make websites?

‍

There’s no denying that people love mobile apps. Nowadays people spend about 90% of their time on phones using apps, and only 10% using a web browser. Smartphone users have voted with their feet (or thumbs) and shown developers they want the intuitive user experience and feature integration that can only come from native app development – not progressive web apps.

But if you look at the number of web apps vs mobile apps out there, the web apps win out by a long way.

There’s a longstanding reason for that. Historically making both meant a separate development process and team of developers for each, which put it out of reach for many. And given that web is generally cheaper than mobile app development, presents you with no app store hurdles to clear, and gives you a marketable web presence, it’s easy to see why web apps proved more popular.

In 2017, though, along came React Native for Web. This was a new library that added a third destination to compile your app code to… the web. Now firms could create a single codebase that could be deployed to a website as well as an Android and iOS app.

Twitter was one of the first big names to jump on the trend. If you open up the Twitter website and the app on both mobile platforms, they look and feel identical. It makes the user experience familiar no matter what device they’re on, which proved a huge success.

For firms without a huge resource clout, there was no need to choose between a native mobile application or a web presence. With React Native for Web giving true cross-platform development, they could have their cake and eat it too.

But wait – there's a big catch, or two.

‍

1. Navigation
‍

For everything React Native for Web promises, adoption is still pretty low. People are still hiring React developers and keeping them separate from their mobile app development. And if we’re completely honest, it’s easy to see why React Native for Web hasn't taken the world by storm just yet.

At Morrow, we adopted React Native for Web in earnest back in 2020. We were certain it was going to change everything for development, but we quickly discovered there were a number of challenges when making apps for all three platforms – web, Android and iOS.

For instance, there’s navigation. Getting universal navigation to work in cross-platform app development is a grind, since the URL bar and back button that matter so much on the web don’t exist in the app world. In app menus are also a totally different kettle of fish when you cross from one platform to another – and that makes simultaneous development tricky.

At Morrow, we found a path up and over these issues, and we’ve learned to do cross platform development relatively seamlessly. It’s a good view from the top, but it’s been an uphill struggle to get to this point, and we can see why other front-end developers haven’t wanted to climb the mountain with us.

As we’ll touch on in a second though, that mountain is fast becoming a molehill.

‍

2. Rendering
‍

Another one of the biggest problems with React Native for Web is the way websites are rendered. 

Traditionally when you search for a website it would come to you via server-side rendering. You’d put in your favourite URL – say, themorrow.digital – and the browser would ask a server in a data centre somewhere for that homepage. The server would then send over all the HTML code to say what the page should look and act like, and your browser turns it into what you see on the screen.

Server-side rendering was perfect when it came to using your website for marketing. It made it super easy for Google and other search engines to crawl your website for key search terms, and so server-side won the hearts and minds of all SEO-conscious marketing departments.

The trouble with React Native for Web is that it doesn’t support server-side rendering. Instead it supports client-side rendering. That means that when you search a URL your browser downloads all the code for the page and creates the HTML there, rather than getting it from the server.

Client-side rendering can give developers more power to create offline websites, deploy animations and enable complex data interactions. The app performance is great for the user experience, but it also comes at the expense of SEO, and that makes it imperfect.

Temporarily.

‍

Those problems are already fading away
‍

The problems with universal navigation and server-side rendering might sound like two pretty big nails in the coffin for React Native for Web. But they're problems because the framework is still so new. And as is always the case with software development, as the tech keeps evolving those problems are going away fast.

Vercel’s Next.js framework has already solved the rendering issue for React sites, by allowing React developers to run things on their server instead of in the browser. That gives the best of both worlds, with the server delivering HTML code that search engines can read, and hydrating it with React code so that developers can still build dynamic, interactive sites.

Now it’s possible to get server-side rendered React sites, developers are already figuring out how to get that working with React Native for Web.
‍

Navigation, meet Solito
‍

Next.js didn’t exactly solve React Native’s teething issues with navigation. In fact, when you add Next.js to the mix, it needs absolute control over navigation because it’s the big brain that produces all the HTML code. Getting everything to sing in tune together has been a nightmare for developers.

And then the universe gave us Fernando Rojo.

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 anyone working in this space – now we can make navigation work across mobile and web with a single codebase.

Thanks to tech like Solito and Next.js, React Native is in the strongest position it’s ever been to be platform agnostic. The friction that’s stopped us delivering effective cross-platform solutions in the past is being swiftly removed. Now there’s a clear way forward to delivering the kind of native mobile app experience users crave, without compromising on developer freedom or the web presence marketers need.

Sure, React and Angular might be the most popular frameworks for web apps right now. But if that’s your reason for hiring React developers for your next project, you need to look yourself hard in the mirror. Ask yourself: is it a smart use of resources to create code that can only work on a web browser?

We’ve already made the case for why React Native is the future of app development. Now, it’s becoming increasingly clear: it’s the future of web development too. 

If you're looking to get started with React Native for your app or web project, speak to us or download our free CTO's guide to React Native.