[JAVA] Thinking about how to use Ionic-Native, Hybrid and HTML5 for mobile app production

When Ionic is built, it is not converted to Swift. I would like to compare HTML5 development by Ionic and Native / Hybrid development as a mobile application production method.


HTML5 development

Refers to the one developed by Single Page Application. Ionic also falls into this.

Hybrid development

In this article, we exclude HTML5 apps and refer to Xamarin written in C # and NativeScript written in JavaScript (React Native, etc.).

Native development

For iOS, it refers to Swift / Objective-C, and for Android, it refers to those developed with Kotlin / Java. In most cases, the terms "smartphone app development" and "app recruitment" refer to Native developers.

Comparison of compatible devices

Simply put, HTML5 / Hybrid development is an all-rounder, and Native development is a one-point specialization type.

Type WEB Smartphone app
HTML5 Compatible with both
Hybrid Compatible with both
Native Either iOS or Android

The reason why Hybrid's web usage is △ is because there is a React Native web publishing project.

https://github.com/necolas/react-native-web Demo http://necolas.github.io/react-native-web/storybook/

However, since there are many opinions that "Write in React on the WEB", it is written as △. So, on compatible devices, it will be "HTML5> Hybrid> Native".

Big difference between HTML5 and Native / Hybrid

It should be noted that "HTML5 development is a native reproduction". For example, the HTML5 (Ionic) and Native (Swift) codes for displaying alerts are as follows.

//Ionic code written in TypeScript
   const alert = this.alertCtrl.create({
    title: 'Alert display', buttons: ['close']
// Swift
@IBAction func dispAlert(sender: UIButton) {
    let alert: UIAlertController = UIAlertController(
      title: "Alert display", message: "message", preferredStyle:  UIAlertControllerStyle.Alert
    presentViewController(alert, animated: true, completion: nil)

Each API is called, but in HTML5, "HTML that looks exactly like Native drawing" is displayed by this API. HTML5 reproduces the native movement of alerts and loading screens by drawing HTML in the application where WebView is displayed. On the other hand, Native / Hybrid hits the API of the smartphone OS itself, so "OS alert" is displayed.

This has had a significant impact on performance. Ten years ago, it was said that it was "slow to make with HTML" due to the slow rendering of JavaScript and the low specifications of iOS / Android devices, but that is because it is "reproduced" in this way. is. However, when I looked around in 2017, the rendering speed of HTML5 and the specifications of the device increased significantly, and now it is said that it will be as fast as Native.

However, the drawing speed is Native / Hybrid> HTML5.

Ease of application implementation

"Easy to implement", in other words, the size of the sword. This is a different situation, so I will present some patterns.

When developing only iOS apps

Native development is overwhelmingly easy. There is no merit in developing HTML5 / Hybrid with inexperienced people.

When developing iOS and Android apps

Hybrid's specialty. However, if you have a Swift / Java engineer, Native development may be faster than challenging Hybrid development, and I think HTML5 development is better when the web production team creates an app. It depends on the team members, and this is the correct answer! There is no such thing.

When developing iOS / Android / Web apps

For small teams, choose HTML5 development. However, if there is no one in the team who can write HTML, it may be better to develop in the field of specialty (in that case, there is a problem with what to do with the web application).

Therefore, I think that the ease of implementing an application depends on the requirements x human resources. "The silver bullet didn't exist" is an overused expression, but ** solves it all! Well, that's a lie, isn't it?

Think about how to use Ionic

Disadvantages of HTML5 development

Since HTML5 development "reproduces the native", if there is a big change in the device design, it will be necessary to upgrade to follow it. The fact that the "Cordova plugin" that directly accesses native functions also has an intermediate layer causes version dependence, and if there is a destructive change at the OS level, it may be difficult to keep up with it (this is also the case with Hybrid development).

Native development is the best performing mobile app, and no matter how much HTML5 development evolves, it won't overturn it.

Growth curve at the product level

What is often said in HTML5 development is the appeal of "one resource multiple deployment". If you develop WEB / iOS / Android separately, not only will the initial cost increase, but minor design modifications and functional improvements will correspond to each. It is difficult in reality to have that many human resources at all times (and there is a tendency for native application development human resources to be in short supply).

Another serious problem is that the number of apps has been released as many as the number of stars, and the download rate has dropped. When the app is released, the times have changed from when a certain number of downloads were made, so the general method is to release it at the lowest cost, quickly test the hypothesis, withdraw if it does not work, and continue to work on it if it works, to grow the product. It became a target.

With that in mind, it is possible to adopt different development methods for the hypothesis testing process and the growth process. It is not which of HTML5 / Hybrid / Native development is superior, but hypothesis verification is performed in detail with the HTML5 application, and when it grows to a certain scale and can be monetized, it will be replaced with Hybrid / Native development to further enhance the user experience. I feel that this has become a realistic measure. The number of designers who can write HTML has increased, and it is good to develop HTML5 as a mockup.

In that sense, I often see a tone like "Ionic (HTML5 development) vs React Native (Hybrid development)", but I don't think it can be a comparison axis. It's a completely different layer.

It's an article that doesn't draw any conclusions, but only provides a perspective, but I hope you find it helpful. Also, if you are interested in HTML5 development and Ionic in this article, you can also get Introduction to Mobile App Creation with Ionic <Web / iPhone / Android Compatible>. I'm happy.

See you again.

Recommended Posts

Thinking about how to use Ionic-Native, Hybrid and HTML5 for mobile app production
How to use Font Awesome icon for ul and li
Procedures for passing RealmObject to Fragment and how to use Parceler
How to use StringBurrer and Arrays.toString.
How to use EventBus3 and ThreadMode
How to use equality and equality (how to use equals)
How to use \ t Escape sequences different for mac and Windows-java
I was curious about how to use Optional orElse () and orElseGet () properly.
How to use binding.pry for view files
How to use OrientJS and OrientDB together
How to set different source / target versions for production code and test code
How to set up and use kapt
(For beginners) [Rails] Time saving tech! How to install and use slim
[Ruby] How to use slice for beginners
How to use substring and substr methods
How to use @Builder and @NoArgsConstructor together
How to connect to lcalhost from your smartphone and use the app under development
[Java] How to use FileReader class and BufferedReader class
[Ruby] How to use gsub method and sub method
How to use an array for HashMap keys
How to use Segmented Control and points to note
How to use scope and pass processing (Jakarta)
[Rails] How to use Gem'rails-i18n' for Japanese support
How to use nginx-ingress-controller with Docker for Mac
[For super beginners] How to use autofocus: true
[Java] How to use Calendar class and Date class
Explanation of Ruby on rails for beginners ④ ~ Naming convention and how to use form_Tag ~
How to build Docker + Springboot app (for basic learning)
How to use an array for a TreeMap key
Rails / Ruby: How to get HTML text for Mail
How to use Truth (assertion library for Java / Android)
[For those who create portfolios] How to use font-awesome-rails
How to use RealSense with ubuntu 20.04 and ROS Noetic
How to use and apply Java's JFrame / Canvas class
How to use GitHub for super beginners (team development)
How to add another project as Maven library with CircleCI and use it for build
How to use rbenv
How to use letter_opener_web
How to use with_option
How to use java.util.logging
How to use map
How to use Twitter4J
How to use active_hash! !!
How to use MapStruct
How to use hidden_field_tag
How to use TreeSet
[How to use label]
How to use identity
How to use hashes
How to use JUnit 5
How to use Dozer.mapper
How to use Gradle
How to use org.immutables
How to use java.util.stream.Collector
How to use VisualVM
How to use Map
How to use SAS tokens for Azure Event hubs (Java)
How to use OpenCV 4 on Android and view camera live view
[Must-see for apprentice java engineer] How to use Stream API
[For those who create portfolios] How to use chart kick
How to call and use API in Java (Spring Boot)