Written by Yuriy Luchaninov, JavaScript Group Leader at MobiDev.
Microsoft replaced React Native with Electron for a new version of Skype on Windows 10. Meanwhile, the Shopify engineering team decided to build all-new mobile apps using React Native. While the Google team is releasing a new version of Dart DevTools for performance analysis and debugging of Flutter code, Microsoft is working on .NET MAUI - the next generation framework for building native cross-platform apps across mobile and desktop.
Microsoft replaced React Native with Electron for a new version of Skype on Windows 10. Meanwhile, the Shopify engineering team decided to build all-new mobile apps using React Native. While the Google team is releasing a new version of Dart DevTools for performance analysis and debugging of Flutter code, Microsoft is working on .NET MAUI - the next generation framework for building native cross-platform apps across mobile and desktop.
The question about the best cross-platform tool is endlessly debatable, but what we can see for sure is the growth in demand for cross-platform software for the last five years. The increased frequency of search queries can be seen by looking at Google trends’ indicators from 2015 to 2020:
Source: Google Trends
It means that cross-platform technologies are increasingly being used. However, cross-platform is not a one-size-fits-all solution. It works well in case your product is mostly based on UI and business logic. And it doesn’t make sense if the primary business goal is mostly based on native components.
Still, cross-platform app development is continuously growing, and the reasons are the following, and in this article, I’ll describe the potentials of three of the most requested cross-platform technologies now: Flutter, React Native, and Xamarin. Since there is a lot of contradictory information across the Internet about the pros and cons of each technology, here I’d like to focus on their future potentials.
Flutter
“It’s all widgets!” is Flutter’s motto - a cross-platform app development SDK from Google. By using the Dart programming language and Skia 2D rendering engine, Flutter can launch UI on any platform, not adjusting it before transferring. Just-in-time (JIT) compilation and Hot Reload features allow Flutter to display code changes in seconds, which speeds up the development time. Companies that used Flutter for app development include Google, Tencent, Alibaba Group, Nubank, Groupon, and others.
More details on why companies choose Flutter app development.
Having a mission to have a single codebase for Android, iOS, macOS, Windows, Linux, and Web, the Flutter team is aiming to reach game-quality visual and native compilation for all platforms. iOS, Android, and Web are already way past that, and the desktop is the next step forward. The newly announced features include:
- Release mode for Windows and Linux
- Desktop-class experiences support with the following components: VisualDensity adaptation; improved support for keyboard and mouse inputs; ability to query the specific platform; NavigationRail widget
- Foreign Function Interface
- Updated plugin initialization model
UWP and Win32-based architectural approaches for providing coordination with the underlying operating system
These new updates are good news for those who are going to build a multiplatform app since it will cover not only iOS, Android, and Web users, but also Windows, macOS, and Linux.
React Native
React Native is Facebook’s framework for cross-platform app development. It is still in beta (0.62) and has version updates, but software developers use it as an already fully-functioning SDK. Its main feature is the utilization of JavaScript code for both iOS and Android. By using React.js libraries, React Native adopts all existing native views. React Native’s Fast Refresh feature is similar to Flutter’s Hot Reload and utilizes the Yoga rendering engine which translates the flexbox-based layout into those views that native hosts can understand.
You can also read how React Native app development works under the hood.
Companies that utilize React Native include Facebook, Bloomberg, Walmart, Uber, Shopify, and others.
The main controversial point of React Native is its bridge architecture. The bridge that translates JS code into the native ones, that is what might cause performance issues. Thus, when you are going to develop an app containing many interactive animations, 3D, or complex computations, old React Native’s approaches might not be the best choice. But it’s worth remembering that this framework is still in beta, and it means that the React Native team is actively working on improvements.
In 2018, Facebook announced the new React Native architecture. As they said, the new approaches would be expected to overcome bridge limitations. The updated architecture contains:
- CodeGen tool for compatibility automation
- Fabric module for improved UI rendering
- TurboModules for improved startup time and direct communication of apps
- JavaScript Interface (JSI) element for better awareness of Native code and enhanced C++ utilization
- Lean Core method for the weight reduction of a generated app
- Priority queues for improved performance of navigation, gesture handling, and lists
Thus, the limitations of the old bridge architecture may be totally overcome by the adoption of new methods, which opens up new capacities for cross-platform app development by using JavaScript.
Xamarin
Xamarin is Microsoft’s framework for cross-platform app development. It utilizes C# language, .Net framework, and Visual Studio, which means that Xamarin-based apps can be compared to native mobile development platforms in terms of user experience and performance. Moreover, C# syntax allows access to Android SDK and Cocoa Touch for iOS.
Currently, Xamarin platform consists of:
- Xamarin.Android, where the source code is first compiled into Intermediate language and then into native assembly code at runtime.
- Xamarin.iOS, where the source code is compiled into native ARM assembly code.
- Xamarin.Mac, which is aimed to develop apps for Mac OS.
- Xamarin.Forms, which is aimed to create simple mobile apps or prototypes, with 100% code sharing.
Visual Studio utilization allows the building of iOS Apple Watch and Android Watch apps, which can be debugged from the desktop, devices, or emulators.
Companies that adopted Xamarin for app development include the World Bank Group, Olo, Alaska Airlines, Aggreko, HCL, and others.
In May 2020, Microsoft announced the .Net MAUI (.Net Multi-platform App UI) framework that is technically the evolution of Xamarin.Forms. This framework is expected to create native UI for mobile devices and desktop, and to have the following features:
- A single project and a single codebase for each mobile OS
- MVU (Model View Update) design pattern for rapid updates of UI and code-first development
- Xamarin.Forms will be replaced by .Net’s namespace - System.Maui
- Xamarin.Essentials will be replaced by .Net’s namespace - System.Device
- MAUI projects will be developed by using Visual Studio code
- Ability to choose deployment between different devices or emulators
- Ability to manage shared sources, create and manage images adapted for each platform
- Incorporation of Xamarin.Android and Xamarin.iOS into .Net 6 platform, and CLI support
The release of .Net MAUI is scheduled for November 2021, and there is also the roadmap of its development milestones on GitHub.
Talking about the popularity of each platform, I would introduce stats by Google Trends:
Source: Google Trends
As you can see, at the moment, Flutter and React Native are the most searchable technologies. But I’d like to emphasize that all three platforms have big future potentials towards smooth cross-platform app development. Google, Facebook, and Microsoft do their best for the development and support of platforms. Thus, the choice of the best cross-platform app development tool depends only on business goals and requirements.