Feature Set and Supported Libraries

An important point that must be considered when choosing technology is the selection of existing libraries and the feature set of the language. During development, questions arise such as: how many functions need to be implemented from scratch and where can ready-made libraries be used? All three methods now support almost everything needed for a complex app. Nevertheless, each technology has its advantages when it comes to certain areas of app development.

Native Development

Native development has its strengths in communication with device interfaces. Using the camera, GPS, or Bluetooth does not have to be requested through application containers like Apache Cordova; instead, the app can directly access interfaces of the mobile device. If the focus of the app is on extensive exchange with device interfaces, native development is the only sensible solution. In this regard, the native language of a device (still) offers by far the largest feature set and the best customization options.

Build management automation tools like Gradle also offer the possibility to use a variety of ready-made libraries and integrate them into an app with little effort. Because native development was long the only solution in app development, the selection is now quite considerable.

Web Technologies

Web-based frameworks offer the advantage that, with few exceptions, all JavaScript functions that work in the browser can be used. JavaScript, on which TypeScript is based, has its strengths primarily in asynchronous loading of data, as used on almost all websites. The use of promises and callback functions allows developers to load data in the background of the app without affecting the UI thread. This has the advantage that the app feels very smooth to the user. It is now also possible to access device functions like the camera with web frameworks. However, the feature set is significantly more limited than with native technologies.

When designing the app, web apps offer the advantage that Cascading Style Sheets (CSS) can be used. There are countless examples of this on the internet. If needed, the UI of a website can also be copied with relatively little effort, which is useful for companies that already have a website and want to orient their app’s styling to it.

With the help of the Node Package Manager (npm), it is very easy to use a variety of ready-made libraries. Since JavaScript has been used since 1995, there is now a ready-made solution for everything, and the probability is relatively low that functions outside of business logic need to be implemented from scratch.

Hybrid Technologies

As hybrid technologies are by far the newest on the market, the feature set is still the smallest here. However, with large companies like Google backing them, it is expected that this will continue to grow. All important functions such as asynchronous loading of data or accessing device functions are already possible here without problems.

The package manager pub.dev also allows easy integration of libraries in Flutter. All important packages from large companies or technologies are already available here. Examples would be sqlite for a local database or firebase.core for connection to Google’s cloud platform.

As many see the future of app development in hybrid technologies and the popularity of frameworks like Flutter continues to increase, it is expected that many more developers will publish libraries in the future. Thus, over time, less and less effort will need to be spent writing standard functions.

UI and Design Creation

An important factor that can mean a lot of development effort and make the difference between good and bad apps is the UI. Therefore, the tools that are meant to facilitate the creation of layouts are analyzed and compared.

Android Studio Layout Editor

With the Android Studio Layout Editor, Android provides a graphical interface where the user interface can be ‘assembled’ using drag-and-drop elements. The Layout Editor is well-suited for quick prototyping or rough implementation of a template, but when finer changes, e.g., the scrolling behavior of a list, need to be made, it can be quite cumbersome to use. In this case, it is usually more efficient to make the desired change directly in the code. Nevertheless, similar to Java, significantly more code must be written here than for the same layout in one of the other technologies.

Another point that must be considered is the large number of available layouts. If design requirements are precisely known, this may be helpful, but initially it often seems confusing. Complex user interfaces can be implemented without problems using Android Studio, it’s just associated with relatively high effort.

Ionic Creator

The browser-based layout editor appears significantly leaner and tidier compared to the Android Studio editor. Its use also feels easier and smoother. Ionic provides a large number of pre-made UI components that can be dragged and dropped into a phone-like frame. This means that even more complex elements, such as a map or a video player, don’t have to be implemented from scratch. Finally, HTML can be generated from the layout, which can be used directly in the Ionic project. If you don’t want to use a graphical editor, you alternatively have the option to use HTML with CSS. This offers the advantage that many pre-made layouts exist on the internet and can be directly adopted.

Flutter Widget Maker

Flutter doesn’t yet offer an official editor. However, several open-source projects are currently in the development phase and look promising. One of them is the also browser-based Flutter Widget Maker. It is, apart from small differences, analogous to the Ionic Creator and offers possibilities to import templates directly as widgets into Flutter projects.

Complex designs and UI animations can be implemented with all three technologies. Ionic can use all available web technologies and thus draw from a large pool of examples. Native development with Java is somewhat more complicated and sometimes a bit cumbersome in implementation. Flutter stands out clearly due to its simplicity. Many pre-made widgets like Center or Row greatly accelerate the realization of a design. Even complex animations can be implemented in a relatively short time with comparatively little effort.

Documentation

Available documentation plays an important role in navigating and developing with new technologies. Questions that arise include: How detailed and comprehensive are they? Can I find help if I get stuck on a problem? Has someone else had the same problem as me and solved it?

Detailed documentation can be found for all three development options. However, it’s worth noting that the Android documentation for Java is not very practice-oriented. You find many explanations about class parameters and available functions, but not how to apply them. Ionic and Flutter do better and shine with detailed code examples. Ionic has embedded a live view of the explained code in a phone frame in its documentation. This immediately shows what exactly a component does and how it can look. This is enormously helpful for imagination and serves as inspiration for your own app. Flutter, on the other hand, provides videos about individual widgets that explain how they work. Many examples are intended to show possibilities and help in selecting the right components.

Workflow Efficiency

To compare the differences in development workflow, the respective command-line interfaces and development environments need to be examined more closely. These are, among other things, used to automatically generate code that always looks the same.
In Java, this would be the Activity, in Flutter the Widget. Both can be generated relatively easily via commands in Android Studio. A component in Ionic can also be created with little effort via the Ionic CLI. The effort involved can be estimated as roughly equal.

For better understanding, here’s the typical process in app development that repeats several times per day:

1. Writing code in the development environment
2. Saving the file
3. Compiling the app
4. Starting the app on an emulator or in the browser
5. Examine and Test Functionality of Developed Code

Steps one, two, and five are similar for all technologies. The significant difference is found in the compilation in steps three and four. This is due to the difference in compiler technology. Ionic and Flutter use a Just-in-Time Compiler (JIT), whereas Android with Java typically uses an Ahead-of-Time Compiler (AOT).

Just-in-Time Compiler

They have the major advantage in development that they compile the code only at runtime and not before the app is started. So everything is only compiled when it is needed. This is especially helpful during the development phase, as the app only needs to reload the specific part that was changed by the developer.

Ahead-of-Time Compiler

They are usually used for production builds and have the advantage over JIT compilers that the generated program runs significantly more efficiently. This advantage can be neglected during development. The disadvantage, however, is that the duration of the compilation process is significantly increased.

Specifically for development, this means: While with the Java app you always have to manually recompile the entire app, web technologies and Flutter use the so-called hot-reload. Through settings in the development environment
the hot-reload can be triggered as soon as a file is saved. Then the part of the app that was changed is automatically reloaded directly. If the app is running in an emulator or in the browser, it is always up to date and does not need to be manually restarted. Steps two and three are therefore omitted and are automatically started by the JIT compiler as soon as step two has been executed. With a JIT compiler, significantly less time has to be spent waiting. Only a few seconds are saved for a single compilation process, but this adds up to a not negligible duration over the course of the day.

Overview Comparing Native, Hybrid, and Web-Based App Development

Conclusion and Outlook

Just a few years ago, there were hardly any real alternatives to native app development. In the course of digitalization, the demand for apps is constantly growing. As a result, real competitors have now established themselves in the market, many of which have already overcome their initial problems.
Many frameworks now offer significant advantages over native development and simplify many processes. Anyone developing a new app in 2020 should definitely consider hybrid and web apps, as these significantly simplify and especially accelerate the development process with features like hot-reload. Many other problems or weaknesses of native development are also solved more elegantly. Web technologies have also established themselves as an alternative and are especially popular with developers with a frontend background. By integrating popular frontend frameworks like Angular, Vue, or React, already learned languages and principles can be easily transferred to app development, thus saving time and especially money.