Press enter to see results or esc to cancel.

Fernando Ballester in Mobile App Development

Cross platform app development with HTML5

Much has been said about programming apps on this blog; also about Android and iOS app development, on responsive and native applications and about how to monetise all these mobile projects. Even app design has secured a foothold in our blog. However, there is a good mobile development option available to us that we’ve never made abundantly clear. We’re talking about cross platform app development with HTML5.

For those who have just landed to the world of apps, the difference between native and cross platform applications is that the former are ‘written’ in their own app programming language. On the other hand, the latter are developed in a single code that is interpreted and adjusted to the different devices; we would say that the concept is practically synonymous to that of web applications − which we’ve discussed several times.

cross-platform-app-development

There are two different branches of applications within the cross platform category: the first works on WebView (which we’ll be discussing in this article and makes use of HTML5, CSS3 and JavaScript); the other is of the Xamarin kind: the code is written in a common programming language which will be ‘translated’ into a given platform’s native language.

HTML5 is precisely one of the languages allowing us to create cross platform apps − which can be accessible from any device – by undertaking a single development process. Let’s see what it is a little more in depth:

What exactly is HTML5?

HTML5 is a mark-up language used to structure and display content in websites. It provides support to advanced multimedia applications − including audio and video. But it also allows us to modify a page’s layout and thus change its appearance.

In this regard, how can app developers take advantage of it? An expert can programme interactive apps with HMTL5 that will be displayed via a browser on any device.

HTML5 is indeed one of the most versatile languages for developing web applications and the most widely used for creating non-native apps.

Why programming apps with HTML5?

First of all, it’s worth noting that HTML5 is a very widely used programming language. In fact, it’s the standard web programming language since October 2014, so there are always plenty of resources on it to be found. In addition, the World Wide Web Consortium (W3C) has bestowed its “Recommended” stamp upon its fifth version.

Compared to previous versions of HTML and other programming languages, its fifth version includes new features for including video and audio and – on top of that − implements responsive design automatically.

HTML5’s importance

We have already made it clear why this programming language is important both in a global sense and for conventional programmers. But do you know which features render it one of the best options for programming cross platform apps? We will now discuss the advantages that HTML5 entails when used to create mobile applications.

  • First and foremost we come across its universality, i.e. it works in all browsers, whether on mobile devices or on a traditional computer. The code is interpreted and displayed by any browser (Chrome, Safari, Firefox, Internet Explorer…).
  • It’s also language with a clear audio-visual vocation and allows including both audio and video at a native level. It stands up for showing and including multimedia content.
  • It’s mobile friendly. Another of the advantages of programming apps with HTML5 is that this language seeks to be responsive, i.e. it adapts to the screen in which the content is displayed. For this reason, it’s perfect for creating websites that are going to be displayed as applications (web apps). According to analyst firm Vision Mobile, over 50% of mobile applications currently use HTML5 with JavaScript and CSS.
  • It’s a very good option for limited budgets because it’s cheaper than other native alternatives. Likewise, a HTML5 version entails significant savings when getting our business or mobile game started by developing a beta version and is a clever way to see if it works and if there is a market for it. Games as Candy Crush and the like (puzzle solving) can be created with this technology and be redeveloped as native apps later on.

cross-platform-app-development-2

  • HTML allows you to programme apps in beta. And last but not least, HTML5 is an open-source kind of language: i.e. anyone can modify, improve, expand or implement new services on already developed applications.

Advantages and disadvantages of cross platform app development

To keep up with what we were saying in the last section, most of the benefits associated with creating cross platform apps with HTML5 and other languages are to be exploited by former web developers. Web developers can use their previous experience to get acquainted with cross platform app development very quickly and easily.

“Another advantage is that developing the same app for Android, iOS and Windows Phone takes up double or triple the resources,” adds José Antonio Llopis, Technical Director at Yeeply.

Among its disadvantages we come across the app’s speed, which gets reduced to a great extent. Similarly, access to the device’s hardware is limited to the available plugins. Another drawback is that − even if the app should work theoretically on any platform automatically − this is not entirely true. In the real world we must check our app on all platforms to be sure that a given feature that looks good in certain platform is also working well in the other ones.

REMEMBER that even if an app is a cross platform app, it’s necessary to generate an apk (for Android devices) or a native ipa (for iOS devices) for it to be legible and displayed on mobile devices. This is the reason why we’ll need SDK’s for each platform. Alternatively, we can use services like Adobe Build that will generate these automatically for us.

Cross platform app development tools

The most common cross platform app development tools for apps of the WebView type are shown below:

cross platform app development

  • Apache Cordova: it’s a framework for mobile application development owned by Adobe Systems that allows programmers to develop applications for mobile devices by using generic web tools such as JavaScript, HTML5 and CSS3, resulting in hybrid applications.
  • AngularJS: JavaScript is an open-source framework − sustained by Google − which is used to create and support single-page web applications.
  • Ionic: it’s a free and open-source tool for hybrid app development based on HTML5, CSS and JS. The tool is built around Sass and optimised with AngularJS.

Although the quality of these applications is not the best to be found − especially when compared with native app development − they work very well for small and medium projects that require neither high performance nor too many features. As a matter of fact, Facebook’s first application was developed with this technology until it was later decided to develop native app versions.

Well, what about you? Do you know how to programme cross platform apps? Which tools are you using? Is there anything we’ve missed in our article?

publish app

Comments

Comments are disabled for this post