More and more companies want to have their app developed and designed individually according to their wishes. Once the requirements are clear, developers face the choice of suitable technology. If the client needs an app that must perform processor-intensive calculations or complex graphics, only a native app is an option. If this is not the case, thanks to countless frameworks, one is spoilt for choice.

Java, Flutter, and Ionic – Native, Hybrid, and Web-Based Frameworks for App Development

Essentially, three groups can be distinguished: native, hybrid, and web-based development. For the layperson, it is no longer apparent from the end result which technology was used to develop the app. Thanks to UI frameworks such as Material UI, it is possible to make the app interface look native. This allows design guidelines to be well adhered to even in the non-native approach.

Ultimately, the question arises as to which approach can implement an app most efficiently. If factors such as personal preferences are disregarded and it is assumed that there is no prior knowledge, the methods can be well compared using three representatives.

Native Apps Using Java as an Example

They are the original form of the app and specially adapted applications developed for the operating system of the respective end device. Advantages of native apps include performance, as the app and operating system can communicate quickly with each other thanks to adapted interfaces. A major disadvantage of native apps is that they only work on the operating system for which they were developed.
With Java, Android offers developers the possibility to develop native apps. The object-oriented programming language, in conjunction with the Android Studio development environment, is a powerful tool for developing high-performance apps.

Progressive Web Apps Using Ionic as an Example

Web apps are usually programmed based on HTML, JavaScript, and CSS. Unlike native applications, they do not run directly on the operating system, but in a browser environment. They function according to the client-server model and can thus be used on all internet-capable devices with a browser.
Ionic is an open-source framework for apps based on web technologies. It enables the integration of numerous frontend frameworks such as Angular, React, or Vue and is therefore very popular among frontend developers. A variety of pre-made UI components and themes greatly facilitate styling. Through native APIs, Ionic, like native apps, can access a multitude of device functions, such as camera and GPS.

Hybrid Apps Using Flutter as an Example

Hybrid apps are a combination of native apps and web apps. Like web-based applications, they can also be based on HTML, JavaScript, and CSS, but don’t have to be. The significant difference from pure web apps is that they don’t run in the browser itself, but in a native container that uses the device’s browser engine.

Flutter is a user interface toolkit developed by Google that helps develop apps for all platforms. According to Google Trends, Flutter is the second most popular language for cross-platform development in 2020 after React Native. It is written in the Dart programming language. Using Dart’s native compilers, compilation to native machine code is achieved, allowing for near-native performance.

As a decision aid for one of the three approaches to app development, various factors can be considered, such as complexity of languages, documentation, and design creation.

Differences in the Complexity of Programming Languages

Java is the first language many programmers learn. As an object-oriented language, it offers a good introduction to app development. Due to typing, it involves somewhat more effort, which pays off at the latest when unnecessary runtime exceptions are avoided and colleagues can read the code better. However, this advantage of good readability is often lost again due to too much ‘boilerplate’ code. In some cases, unnecessarily large amounts of code must be written.

Ionic, on the other hand, is based on HTML, CSS, and JavaScript. It can also be optionally used with TypeScript to type the hard-to-read JavaScript code. Developers who focus on the frontend area will quickly find their way around here. JavaScript especially shines with countless possibilities such as UI animations. Practically everything that works on websites can also be integrated into web apps via JavaScript. Developers also have the option to choose whether they want to program in an object-oriented or functional manner.

Dart, the programming language used in Flutter, offers, similar to Java, both object-oriented and functional programming possibilities. However, in conjunction with Flutter, it is mainly used in an object-oriented way. The Dart syntax is easy to understand and not particularly complicated.

How the three programming languages differ in terms of code clarity and scope is shown by the example of creating a simple list of names.

Java

In Android development with Java, each app page is divided into a Java and an XML file, which determines the structure of the UI. In the left figure, line eight shows how the Java class loads the XML file shown on the right and adds the adapter to the list.

For the list, an extra adapter class is needed, which defines how each element of the list should be rendered. It can be seen in the following figure. A separate XML file is also needed for the row in the list. In total, four files must be created for a single list. While the approach with list adapters offers many customization possibilities, it is usually somewhat cumbersome, especially if the list doesn’t offer any additional functions such as search, sorting, etc.

Flutter

Flutter has solved this problem more elegantly and with significantly less code. It is the only one of the three variants that allows a combination of UI and logic within one file, which ensures good clarity and little code. With the help of builder methods, widgets can be built, which are then rendered as the corresponding UI element at runtime.
Since this principle contradicts the principle of ‘Separation of Concerns’ (separating UI and business logic), care must definitely be taken to modularize the code with this approach, as otherwise very large files can quickly develop.

Ionic

Ionic chooses a middle ground and separates UI from logic, but doesn’t need additional files for the list. The logic is positioned in the TypeScript file, whereas the HTML file is solely responsible for the presentation. Through data binding, the elements of the list are rendered directly in the template below and don’t have to be manually set on the corresponding UI element, as with Java.

It can be seen that the native option usually requires more code than the non-native ones. It’s also apparent that ‘simple’ tasks like a list are much easier to implement with Flutter or TypeScript (Ionic). The previously mentioned ‘boilerplate code’ significantly increases the code scope in Java here. Ultimately, developers must weigh whether the code is more readable for them by separating files. However, with more complex business logic, greater modularization is certainly recommended for better overview.

To be continued in Part 2

In the second part of this article, the three approaches to app development will be compared in terms of functionality and supported libraries, UI and design creation, documentation and examples, as well as workflow efficiency.