React Native

Create your Progressive Web App (PWA) with the same code as your iOS and Android app

PWAs are popular right now! Available for over two years now on Android, Apple now partially supports them with its recent 11.3 update.
There is even a website listing the success stories of PWAs: PWA Stats.
The highlights? A sharp increase in acquisition and engagement as well as a marked improvement in the user experience, for both small brands and giants such as Uber or Lancôme.

bam tech react native

Why develop a PWA in addition to your mobile applications?

These PWAs enrich the experience of the mobile applications you download from the stores: their advantages and weaknesses are not the same.
While acquisition will be easier on the web with a PWA, retention is very effective on native apps.
In addition, the user experience remains much more fluid and efficient on an application than on the Web. You can compare the native Facebook application and the mobile website to get an idea.

What strategy to develop your PWA?

In summer 2017, for TriPica, we made part of their application available on the web in order to increase the acquisition rate. What strategy should we adopt?

A. Recreating everything from scratch?

No, that would take way too much time, at least as much as developing the native application. And we would have needed another team alongside the application team, which increases the likelihood of UX and programming problems. For example, the new team should have learned the complex job of TriPica: they would have had to recode all the business rules.

B. Reuse application logic in the web app?

That's better, but we should have recreated everything else, including the design and navigation. This would have slowed down the existing team a lot, and would also have introduced UX or programming problems. For example, the website might not have behaved the same way as the application, and when you changed the behavior in the website or application, you would have had to do the same work a second time for the other platform.

C. Reuse our entire code base?

Is that possible? Let's investigate!

So we went with option C, and found several technologies to achieve our goals, one of them standing out from the crowd: React Native for Web.

bam tech react native

In 2.5 hours, we had a PoC: the application's home page was visible on the Web!
In 10 man-days, we covered a quarter of the application (several months of development), which corresponded to the acquisition part.

In terms of acquisition, the web app doubled the number of potential customers (the conversion into a customer being done on the native application).

bam tech react native

Nothing obliges you to limit yourself to the clone of the native application:

  • We can customize the rendering according to whether we are on the web or not
  • you can display the application inside a back office, in order to see in real time how the app screen would look if you change this parameter/content
  • you can have specific functionalities, or restrict functionalities (this however rarely makes sense)
  • You can use this technology to code a website, quite simply. This has a lot of technical advantages, including accessibility and embedded internationalization (I am not going to repeat its creator, see below)
High-quality user interfaces: React Native for Web makes it easy to create Fast, adaptive web UIs in JavaScript. It provides native-like interactions, support for multiple input modes (touch, mouse, keyboard), optimized vendor-prefixed styles, built-in support for RTL layout, built-in accessibility, and integrates with React Dev Tools.
Write Once, Render Anywhere: React Native for Web interoperates with existing React DOM components and is compatible with the majority of the React Native API. You can develop new components for native and web without rewriting existing code. React Native for Web can also render to HTML and critical CSS on the server using Node.js.

Today, React Native for Web is used in at least 3 ongoing projects at BAM, including one in production.
In addition to contributing to the React Native for Web GitHub, we created the community.”React Native for Web Community“in which you can find several implementations of native modules, in order to save time.

Let's finish with the opinion of Mathieu Horn, CEO of TriPica:

React Native for Web It's two for the price of one: you have an app, and a free website as a bonus!

Développeur mobile ?

Rejoins nos équipes