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:
Ionic
Ionic is in many ways the love-child between AngularJS and mobile operating systems. The mobile framework creates hybrid mobile apps using conventional web technologies like HTML5 and JavaScript. Hybrid applications are essentially small web applications that are deployed as a native app on App or Play Store. Ionic can in many ways be interpreted as a front-end UI framework like Bootstrap but for native mobile apps, having support for a wide range of common native mobile components, design and animations.
The mobile framework comes with very native-style mobile UI elements and layouts that come with a native SDK on iOS or Android. Ionic apps require a native wrapper in order to run as a native app because at its core Ionic is still an HTML5 framework. It was built on the assumption that HTML5 and JavaScript will rule the world of browser, web and mobile applications. Ionic apps run on low-level browser shells like iOS’ UIWebView or Android’s WebView, and are wrapped by tools like PhoneGap or Cordova. Finally, with Ionic you are building a self-contained application experience with conventional web programming languages using HTML, CSS, and JavaScript running at the core.
React Native
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
An application built using React Native is a real native app, not a “hybrid app” or an “HTML5 app” like an Ionic app. You write your code in JavaScript using React components, while they render as native UI components on your mobile app. Despite native UI components, JavaScript is still – despite being processed through the React’s JS engine – your app logic. Then again, UI is the bottleneck of hybrid frameworks when it comes to performance, because of DOM performance, not the app logic. Hence, React Native comes with a steeper learning curve for web developers. It takes more learning, effort, and maintenance. However, you also end up with a higher quality app than when using Ionic.
Unlike Ionic, React Native uses native UI components. You are still writing the components in JavaScript, HTML or CSS but React Native uses native components behind the scene. This ensures your users will have the same user experience similar to a native app built in Swift, Objective-C or Java. Also, this is not a browser-based app like in PhoneGap or Cordova of Ionic. Because of that, the implementation is faster and runs quicker on mobile devices.
Xamarin
Unlike Ionic and React Native that uses conventional web programming languages like HTML and JavaScript, Xamarin does something different. Xamarin is a “native cross-platform framework”. It uses a single, intermediate programming language, C#. In this way, allowing developers to code using a single codebase. They can then use it on iOS, Android, and Windows devices.
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.Forms
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.
Xamarin.Forms
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.
Flutter
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.
In many ways, PWAs are at the other end of the cross-platform mobile app development spectrum. They are apps that run fully within the browser (Chrome, Safari, Firefox, etc) and do not need to be distributed via the App or Play Store. PWAs are basically client-side JavaScript code that runs within the browser. Thus they are highly cross-platform using a single codebase that can be run on any device that has a web browser installed.
PWAs are browser-based code written in HTML, CSS and JavaScript that ensures a “native” app-like experience within the browser. They leverage the capabilities of modern browsers by accessing device features such as GPS location, camera etc. via browser-based APIs. PWAs may be developed using a variety of Javascript libraries or frameworks including PolymerJS, AngularJS, ReactJS, VueJS etc.
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.
