47% of mobile banking users update their bank details via a laptop or desktop, while just 26% like to make changes with a smartphone, showing that consumers prefer online banking platforms over mobile ones for important tasks. ― Deloitte, The value of online banking channels in a mobile-centric world, By Val Srinivas and Richa Wadhwani
Financial institutions are challenged every day by FinTechs introducing new digital products. Revolut has a well-known mobile UX: a playful interface and notifications at the right time. Pretto, a French FinTech to find the best loan, has a comprehensive desktop interface, very intuitive onboarding, and a simulation page with a lot of information. Most of the time, companies wonder what to choose between developing a Web or a Mobile Application. However, focusing on one platform at the expense of another will lead to inadequate features, that will frustrate your users.
Let's face it, a flagship financial application will need light, and user-friendly features suited for mobile. But, you will also have complex interactions with your users and they will prefer having them on their computer. Therefore, choosing between Web and Mobile development is tough.
At Sipios, we can develop on both platforms at the same time thanks to React Native Web
To clarify what we are talking about:
In other words, React Native Web brings your React Native App to the web.
Code architecture is very important with React Native Web. This not only ensures your code maintainability but it also improves your code quality. Some principles can help you produce better code. For example, the SOLID principles help you create more maintainable code, easier to read, test, and use. SOLID stands for :
Some frameworks, such as Spring (Java), enforce a SOLID code architecture. However, React.js and React Native tend to give a lot of freedom in code architecture. React Native Web helps you to apply at least the first of the SOLID principles: The Single-responsibility principle.
Indeed, here is an example of the code architecture of a classic React Native Web App :
As you can see, there are 3 interesting files in this example :
Here is an example of a service file :
Here is an example of a service file :
You can see that the component is logicless. The logic you extracted will be easier to share between a web and a mobile component.
And last but not least, It's easier for you to test the logic of your component now that it's in a different file.
Here is a link to an excellent article about the SOLID principle in React.js if you want to dig into the subject: https://blog.usejournal.com/how-to-apply-solid-principles-in-react-applications-6c964091a982
As a FinTech or a bank institution, you may want to use only proven technologies. Since React Native Web is still in beta you may be concerned that this technology still lacks maturity.
An interesting indicator to measure maturity is the amount of breaking changes, fixes, and new features for each new version of the library.
Amount of breaking changes, features and fixes over time of React Native Web!
As shown in this graphic, the amount of breaking changes, and features are high but the frequency of the upgrades is getting lower. In other terms, a React Native Web version upgrade will be time-consuming (high amount of breaking changes) but will only occur twice a year.
Another drawback is that some components (the Modal for instance), and some APIs (Alerts API), are not compatible with React Native Web. Thus, to fix those missing behaviors, with web equivalent, some issues have been opened. So you will need to either find a way to build your own components or wait for those issues to be fixed.
Despite the apparent lack of maturity of this library, major companies such as Twitter, Uber, Expo, The Times trust it.
In the first part, we understood how React Native Web highlights the anti-patterns that were commonly used when we didn't have to share the logic between web and mobile. However, since it is a React application, everything can be coded in one component.
Two options exist to differentiate the web and mobile code :
The option with the cleanest and most maintainable code is the second one, but you'll need more time to create those components. So we need a framework to optimize the production of differentiated components. Atomic Design gives you a way to have a clean separation between content and structure. We can use this clear separation to choose when we should create web and mobile components.
In Atomic Design we split components into "atomic pieces", then assemble them into "molecules", then "organisms", then "templates", and finally into a page.
To be able to work with React Native Web, there are two key adjustments to do:
If your component is not already React Native Web (i.e. other than texts, buttons, views, etc.), it would be best to have two different atomic components, one for the web and the other for mobile. Indeed, your specific buttons, icons, pickers may have different behaviors on the web and mobile.
As you can see in the two screenshots below, the middle section of the twitter web page is almost the same as the mobile one. Still, there are a few differences :
The Twitter web page of @reactjs
The Twitter Mobile page of @reactjs
As you can see the molecules are the same: a post, a like section, a page header, etc. But you display way more information on desktop than on mobile. As a result, you need a specific template for mobile and web.
React Native Web is a React Native library that provides a simple way to convert your mobile application into a web application. It also enables code reuse across platforms and improves code quality thanks to single-responsibility components. Even though this library is still in beta, and some features are missing, it is trusted by tech leaders, like Twitter. To better use React Native Web, its architecture should go through Atomic Design, where only the small components (atoms) and large ones (templates) are specific to web and mobile, i.e. differentiated according to the platforms.