The Ultimate Guide to Mobile App Development Tools
There are many options for building the modern day mobile app. While hybrid apps allow web developers to embed HTML, JavaScript, and CSS into native platforms, frameworks like React Native make it possible to write cross-platform apps that render natively on both Android and iOS. In this article, we discuss the different approaches to mobile app development including the advantages and disadvantages of each and which is right for you.
When considering the current landscape for mobile app development, there are three major options. They are cross-platform, hybrid, progressive web, and native. Below we explore each option including the advantages and disadvantages of each:
Cross Platform Apps
Cross platform development involves using a framework to write code that renders natively on different platforms / devices. The mantra behind cross platform development is "write once, use everywhere" meaning the code you write will run as both Android and iOS apps. React Native, Ionic, and Xamarin are among the most popular frameworks for cross-platform development. Let's explore each of these options in a bit more detail:
React Native
React Native is debatably the most popular option for cross-platform development. It's based on Facebook's React UI component library and uses JavaScript to create reusable UI elements. React Native works by running your app on the host's JavaScript engine. This makes it possible to run the same code on both Android and iOS.
The advantage React Native has over other cross-platform frameworks is that it integrates well with native code. This means you can write some components with React Native and others with Swift, Java, etc. Facebook's own app is an example of this "hybrid" approach. React is also one of the most popular JavaScript libraries being used today. This makes the learning curve virtually non-existent for front-end developers with React/JavaScript experience.
React Native's key strength is also its weakness. While you can mix and match React components with native code, your ability to do so depends largely on bridging components and third party libraries. If the native platforms roll out new features, you have to wait for a bridge to be built for that feature (or build one yourself!).
Ionic
Angular's Ionic framework uses TypeScript to create web based apps that run in native containers. This means the app is ultimately a web page that mimics native design and functionality. This is not to be confused with a progressive web app as it runs within native technology. Ionic apps ultimately become native Android/iOS apps. You can distribute them as native apps through different platforms.
It should be noted that Ionic apps can also be considered hybrid apps since they are ultimately web apps running within native containers.
The main advantage of Ionic is it's portability. Since it leverages web based technologies, it can run easily on different platforms without having to worry about bridges and connectors (although PhoneGap/Cordova can still be used to better access things like the camera feature, etc.). Ionic also does better at looking native and can surpass React Native in terms of it's look and feel.
The main disadvantage of Ionic is that it's web based. HTML runs slower on native platforms than native UIs and elements do. It's important to remember that Ionic apps simply mimic native features and therefore run less efficiently than their native equivalents.
Xamarin
Unlike the JavaScript based React Native and Ionic, Xamarin is a C# framework. Xamarin provides superior performance through it's integration with native layout tools like Android XML Layout, XIBs, and storyboards.
Xamarin binds directly to iOS and Android static libraries. This means you don't need special bridges or connectors to write native code. Despite it's performance advantage and integration with native platforms, Xamarin is less popular because its C#. This prevents the masses of JavaScript lovers from entering the Xamarin arena.
To recap, the main advantage of cross-platform development is that developers don't need to learn different technologies to write the same functionality. Using frameworks like React Native, front-end developers can easily write JavaScript based components that render natively on both Android and iOS. The main disadvantage is that these frameworks render inconsistently and often rely on bridges and third party connectors to interact with native features.
Hybrid Apps
Angular's Ionic framework ultimately produces hybrid apps. These apps are web based meaning they are written with HTML, CSS, and JavaScript. They use native container views to display web pages that mimic native design and functionality.
The main advantage of hybrid apps is portability. Since most devices come with browser support, they can run web apps inside container views. This makes it easy to run the same web app on multiple devices and render consistently.
The major disadvantage with hybrid apps is performance. While these apps can mimic native behavior, they ultimately run slower since they are HTML based. Hybrid apps will also struggle more with accessing native components like the camera feature.
Progressive Web Apps
Progressive web apps are like hybrid apps, except they literally run in the browser. Progressive web apps are basically websites that you go to that look and feel like native apps. Using the right meta tags, you can even link to progressive web apps through native badge icons. This can make it difficult to discern between your web app and a truly native one.
Progressive web apps can run just as fast as native apps. The main disadvantage with progressive web apps is that it's hard to access native features through the browser. Progressive web apps will continue to evolve with HTML5 however they continue to face challenges when competing against truly native apps.
Native Apps
Native apps are apps written with their native technology. For iOS, this means Swift and Objective-C. For Android, it means using Java and the Android SDK.
While you certainly lose the "write once, use everywhere" factor with native apps, the advantages can't be ignored. You don't have to worry about bridges or connectors since you are using the native technology to build the app. This also means you get the quickest access to new features released with new devices, etc.
Which option is right for you?
If your development team has experience using React, then using React Native is a clear winner. With the strong community backing React Native, it's hard not to find a bridge for any feature you want to tap into. If your team is under time constraints, then choosing one of the cross platform frameworks may be the best move to avoid writing the same functionality twice. If performance is highly valued, then exploring native development may be worth the extra efforts.
Conclusion
When deciding which approach is best for your team, it's important to consider experience, time frames, and the nature of the application your building. If this app is largely read only, then writing a progressive web app could make sense since your not relying on native features as much. Also remember that frameworks like React Native make it possible to mix and match what you build out natively.
