After going through some of our Mobile articles, we realized that we gave a pretty solid overview of the mobile tech out there in Top Trending Mobile Development Technologies, as well as a deep dive into native tech in A Simple Guide to Native Mobile Technologies. Shamefully, we noticed that we had left a huge void in the mobile tech category, a technology we use here in Wiredelta the most: Cross-platform apps and hybrid mobile technologies.
Cross-platform and hybrid mobile apps use a single codebase that can be run on iOS, Android and maybe even Huawei HongMeng OS. By doing so, app developers need to test less and perform lower maintenance. Hence, the cost of building your dream mobile app becomes easier to both launch and maintain.
Many of Wiredelta’s competitors use native mobile technologies to build outstanding app experiences. They often justify the choice of building native mobile apps, maintaining multiple codebases for their clients, by referring to Zuckerberg’s infamous “betting on cross-platform HTML5 over native was the biggest mistake in Facebook’s history”. The world of software has changed since 2012, when Zuckerberg made that statement. The gap is closing in, and the ability to build crisp mobile apps with cross-platform frameworks are upon us. It is no secret that Wiredelta has been betting big on cross-platform for years. So, let’s dive into the different mobile frameworks available when building a cross-platform mobile app:
Developed by Facebook, React Native is an extension of ReactJS, using the same principles, such as Virtual DOM for updating the UI. You calculate the changes which need to happen to the UI in the background. Once those changes are incorporated, it’s applied in batches. The advantage here is, you don’t touch the UI thread, which gives you a responsive UI. The disadvantage, is that it is slow to communicate with the underlying native OS. Finally, if you’re familiar with React, you know it focuses heavily on user-interfaces. It is no surprise that React Native does the same.
React Native can be deployed to both iOS, Android and most recently Windows. It sorts of wraps around the native code of specific platforms. So, the logic layer is the same across the web, mobile, and other operating systems. Unlike Ionic, React Native applications are not designed to be written once and then run everywhere. You need to change some platform-specific code in your application because the goal is to create the closest native app look as possible.
How React Native is different from Ionic
Xamarin helps you to design XIBs, Android layout files, storyboard with the studio tool of Xamarin. Instead of operating on Java or Swift, it also lets you code directly in C#. Same goes with iOS XIBs and storyboards that you can design in XCode of Xamarin. In general, Xamarin performance is close to native, as Xamarin suggests two approaches to build mobile apps:
- Xamarin.Android and Xamarin.iOS
Xamarin.Android and Xamarin.iOS
Xamarin.Android/iOS apps behave like native apps because their cross-platform capabilities are focused mainly on sharing business logic rather than codebase. They use native user interface controls and leverage platform-specific hardware acceleration. It helps achieve the close-to-native performance that can’t be done with solutions that interpret code at runtime.
Contrary to Xamarin.Android/iOS, Xamarin.Forms focus on broad code sharing with less platform-specific behavior. With Xamarin.Forms developers can reuse 96% of source code. This significantly reduces code performance in many operations compared to both Xamarin.Native and pure native development.
During Google I/O’s 2019 we published an article the latest update on Flutter. Basically, Flutter is both an SDK (software development kit) and a framework for Dart – a programming language developed by Google. Flutter itself is also offset by a team at Google, similar to how AngularJS got started initially.
The idea behind Flutter is that you write Dart code, which can then be compiled into native code that runs on any operating system, platform or device! To build a mobile app using Flutter you use Dart + the Flutter framework to build user interfaces composed of so-called widgets. The Flutter framework comes with a bunch of pre-configured widgets (buttons, tabs etc). You typically use these to then build your own, more complex widgets.
Besides writing Dart/ Flutter code, you’ll also use the SDK. The SDK is basically a set of functionalities that help you during development with IDE extensions, development servers, live-updating of your app on an emulator or real device, and with deployment by compiling your Flutter app code to native code.
Progressive Web Apps (PWAs)
We wrote an article about Progressive Web Apps – The Dawn of New UX some time ago, but let’s repeat a little on the essence of this approach to mobile app development.
Note that PWAs are highly dependent on the browser (Chrome, Safari, Firefox etc). Some browsers may not support all features may. Also, since they access the device’s hardware features via browser-based APIs, the device’s hardware is also limiting them. Finally, it is important to note that Progressive Web Apps (PWA) are not the same as SPA (Single Page Application). A SPA app can be a PWA, but a PWA need not be a SPA.
This is how we do it
We hope this gives a better overview of the different options you have when you want to build a cross-platform mobile app. A long time ago we made a conscious choice to build everything coming out of Wiredelta in cross-platform frameworks. We chose to focus mainly on building Ionic and React Native mobile apps for our clients, but we are very keen on trying out especially Flutter or PWAs on new projects. So if you have a mobile project you want to start, don’t hesitate to reach out and start chatting with us.