Geekly Articles each Day
📜 ⬆️ ⬇️

HTML5 in mobile development - what to choose?


Today I would like to share our views on when to develop mobile applications should prefer web technologies, and when it is better to use native development tools.

Established opinions on the benefits of cross-platform development using HTML5 or the Native SDK:

HTML5

Using tools such as, for example, Cordova, on HTML5 you can create hybrid applications (which are not hosted on the Internet, but in the native container). Such applications combine the advantages listed above and through plug-ins allow you to go beyond the browser, carrying out tight integration with the capabilities of devices. Hybrid applications can be published and distributed via the AppStore, Google Play and other app stores.
')
Native

Naturally, these are basic statements that everyone can supplement based on their experience. So is it worth choosing HTML5 to develop your application? The answer cannot be unequivocal - it depends on many factors, which we will consider.

When analyzing a problem or area of ​​expertise, it is helpful to delve into the historical part of the issue. In this case, you can notice an interesting trend.



In 1995, we had Mac OS, Windows 95 and Linux at our disposal. For each of the operating systems had its own software, but the thought of cross-platform already appeared.

In 1996, Sun Microsystems released a product called Java. This product had a high level of abstraction for writing a single code for different operating systems. It was, indeed, cross-platform in the form in which we used to see it. But the UI was the same for each system.

Then there was the development stage, during which there appeared entities implementing certain levels of cross-platform abstraction such as WebKit, OpenGL, git, etc. These were the standards that should be used when writing applications. The UI could be different on every system, but the same OpenGL was the same.

At the same time, the web direction was actively developing. Initially, these were static linked pages. But soon enough, more and more dynamics began to appear in them. The introduction of AJAX technology and the GMail email client (as the first full-fledged and rather complex web application) made us talk about Web 2.0.

The only thing that could stop this invasion - Flash and Silverlight. Which, like the newborn HTML5, solved one problem - writing a full-fledged “fat” client in the browser.

As a result, HTML5 has found its niche. This was facilitated by a number of factors:

At the same time, JavaScript, which is the foundation of HTML5, has some obvious and annoying flaws . But the possibilities of cross-platform, ease of development and a high prevalence among web developers save it and even keep it in trend.

So, since about 2005, browsers have become another level of cross-platform. Applications like Google Maps, GMail and Facebook have become increasingly used. It turned out that it is very convenient to work in the browser on any operating system and there is no need to install additional desktop software.

Thus, we see four levels of cross-platform development:

The question arises, is it possible to apply this gradation for mobile development?
If you write natively, then we get to the first paragraph when for each mobile OS there is completely its own code and its own UI. Any application will need to be rewritten for each platform.

Naturally, in such a situation, solutions emerged to optimize development for various platforms, with a single code base. Such solutions at the moment are:

These solutions cover a 2-4 point gradation of desktop applications for various platforms. Consider each in more detail.

AS3 Adobe AIR

AIR is most similar to Java and provides its runtime for desktop and mobile applications. Of course, you can keep track of which device we launched on and forcefully set the corresponding UI. But, in most cases, applications have a single UI. A typical AIR application is a game, for example, Angry Birds. There are business applications, such as Photoshop Touch.

.NET Xamarin

.NET Xamarin is close to native development (for example, we can use the Xcode interface designer), but it can be developed in Mono Develop and Visual Studio. This solution successfully demonstrates the cross-platform C #. Application performance is not inferior to the level of native. But the UI for each of the platforms must be written separately.

HTML5 frameworks

The idea of ​​making mobile applications using HTML5 is clear, this is the shortest step from a browser to a mobile device, based on a ready-made base of code and knowledge. Low entry threshold for a large army of web developers and coverage of the entire range of devices. And if there are ready-made UI elements for each of the platforms, the effort and cost are minimal.

It sounds great, but the world is cruel, and there are no miracles. Seven years of active promotion and development of HTML5 gave their results (a good infographic can be seen on Habré ). We can find examples of high-quality hybrid HTML5 applications:


However, there are still problems when developing mobile HTML5 applications:

  1. UI performance
    • UI manipulations work as a single thread (although Web Workers can be used for application logic).
    • Large memory consumption, because In addition to the application code, you must run WebView.
    • The execution speed of javascript is low.
    • Working with the DOM consumes a lot of resources.
  2. No unification of platforms
    • WebKit dominates, but there is a Windows Phone in which you need to support IE. Other players, such as Mozilla, are also trying to enter the market .
    • Each platform provides its own screen sizes for phones and tablets.
    • Different UI requirements for each platform. And, of course, platform bugs that do not depend on the bugs of a specific framework.
  3. Alien UI
    • The application is just an HTML page.
    • Sencha Touch, jQuery Mobile is not like native apps.
    • UI simulations suffer from the “sinister valley” effect, sometimes this effect manifests itself over time and depends on the frequency of use of the application.
  4. Lack of development and debugging tools out of the box
    • HTML5 is positioned as a tool that you can use in your development environment. But, in fact, debugging HTML5 applications on the device is not the easiest process. Native tools, AIR and Xamarin offer full IDE for development and debugging.
  5. Limited access to hardware features
    • a set of PhoneGap plug-ins out of the box is poor, and the development of its own equivalent to the development using the Native SDK

Thus, mobile HTML5 applications have many risks during development. But the possibilities of covering devices are great. PhoneGap provides access to the hardware capabilities of devices, providing a bridge between the browser and the real device. On the net you can find many articles on this issue, a good example of an interesting and comprehensive review - “ why are mobile web apps so slow? ”.

When to use HTML5

What really?

Here are the results of a survey I conducted in a recent article (507 people voted):


(As you noticed, ChartJS is great not only for visualization of seals )

Obviously, the HTML5 development niche for mobile platforms is not empty. We in DevExpress decided to implement a version with HTML5, and the results have already been post .

We have released the PhoneJS mobile application development framework . At this stage of development, HTML5 technology has some limitations. Our solution also does not fall into the field of miracles, but we have overcome some of the problems, and some are preparing to solve. We are working to eliminate the main reason why developers are skeptical of HTML5 applications - UI performance.

We offer the implementation of a good idea. Use your knowledge in HTML5 to create mobile applications for all platforms, take PhoneJS, add PhoneGap, and it will work. Once for all devices. We accept the pros and cons of HTML5, and in addition we solve some problems that HTML5 does not solve by default.

So we take care of the UI, and the user writes UI-independent logic, which is 99% independent of the browser. In fact, the user writes the application, and the framework makes it so that under each platform it looks as native as possible, in accordance with the requirements of the platform. Naturally, there may be some problems in performance, but if the application solves your problems and you have paid for its development and support 10 times less than for native, then such a solution is profitable.

Indeed, there are a range of tasks in which the performance and responsiveness of the user interface are critical, but usually these are not the tasks that our framework is focused on. And here you should clearly understand the niche that we are aimed at.

An excellent illustration of using our framework could be an application for a taxis or air carrier, who decided to follow the trends of BYOD . The application should work on a large range of devices and be quite convenient both inside the company and outside. In this case, the application will be the client part of the overall system that already exists in the company. The already mentioned Fly Delta application is a good illustration.

This is an example of a task that is easier and cheaper to solve with PhoneJS . Based on your experience, you can easily extend the scope of applicability, while saving money and time.

In conclusion, you need to add the fact that the number of mobile platforms is growing. New platforms Firefox OS , Tizen from Samsung appear and fix their positions. HTML5 hybrid applications are a good tool for creating truly multi-platform applications. These facts instill confidence that this direction will develop, especially in the field of business applications.

And the PhoneJS framework will allow you to be on the wave of technology, not to think about the variety of platforms, but to solve a specific business problem.

Source: https://habr.com/ru/post/186050/

More articles:


All Articles