• Web Design

HTML5 and its Frameworks for Mobile App Development

The evolution of mobile web has been rather noticeable and rapid enough to grab the attention of industry experts. We experience the old of native applications , especially the performance, integration and speed, when talking about touch screens. Because of these standards, native applications have easily combined with mobile devices. However, the evolution of HTML5 is swiftly coming in par with native apps and mobile devices are now using quite a lot of HTML5 features on modern browsers. HTML5 is indeed a huge step-up for the web designing and mobile development industry because of its increased functionality.

Image Source: Stock Photo by Shutterstock

Defining HTML5

HTML5 is a superior version of HTML (Hypertext Markup Language). Well, this language is usually used for structuring and showcasing your content on the Internet or the World Wide Web. HTML5 basically aims to improve the markup language using support for a more advanced multimedia plus sustaining more readability for humans. For a matter of fact, it also aims at consistent understanding by computers and other devices like parsers, browsers, etc. Just like the development and up-gradation that takes place in various software, HTML5 is the up-gradation of HTML. That means, it includes HTML4, XHTML along with DOM Level 2 HTML. In spite of the popularity of HTML5, it got the limelight by web developers sometime in April 2010.

To take a quick look at the standardization process, there were long discussions going on about the development of HTML5 since 2004. The first draft included the specification of web forum 2.0 and the second included the specification of web application 1.0. The merger of these two specifications later turned out to be HTML5. However, it became the start point of work only in 2007.

Later, in Jan 2008, the Web Hypertext Application Technology Working Group (WHATWG) published the first public working draft of HTML5 specification. In May 2011, World Wide Web Consortium (W3C) extended HTML5 to “Last Call”. May 2012 brings this specification back to the “Working Draft” state. In July 2012 both these organizations decided to maintain a degree of separation – when W3C focuses on a single definitive standard known as “Snapshot”, while WHATWG focuses on “Living Standard”. W3C demanded the to release a stable HTML5 recommendation by 2014 end as well as HTML5 specification recommendation of HTML 5.1 by 2016.

HTML5 – Focusing the Mobile

Like we already know, HTML5 is not a single tech – but a combination and improvements of HTML. It works without browsers on Tizen, Firefox OS as well as Web OS. Lets look at some of the features of HTML5 that make it suitable for mobile devices.

1. Offline Support – This feature enables the web or mobile browsers to store static web pages. The catch here is that they rely on HTTP response headers of web servers for getting HTML,CSS and multimedia that renders the pages.

2. Canvas Drawing – This feature helps the websites to mark off a space for drawing graphs, charts, gamers, images and other components with the use of programming code and user interaction minus Flash or other plug-ins.

3. Video & Audio Streaming Support – This feature may, someday, enable websites like Pandora and YouTube to skip Flash totally out of the development process.

4. Geo Location API – You can now share your locations with trusted Websites through Geo Location API. It is a simple part of Navigator object.

5. Touch Events – This feature allows you to leverage the touch effect in HTML5. You can now quickly and easily navigate through all your web pages.

HTML5 Capabilities

1. Top 5 supported features:

• – GeolocationAPI;
• – offline support;
• – WebStorage;
• – CSS3 Selectors;
• – 2D animations.

2. Top 5 partially supported features:

• – Misc. Element types and attributes;
• – extended user interaction concept;
• – CSS3 in General;
• – extended form concept;
• – extended video / audio support.

3. Top 5 not supported features:

• – Microdata;
• – 3D animation rendering;
• – FileReader API;
• – IndexedDB;
• – WebWorkers or Local Device support.

Image Source: Stock Photo by Shutterstock

9 Frameworks for App Development

1. DaVinci Studio

This an app framework enables you to drop and drag different elements to get exactly what you see. DaVinci has a WYSIWYG (What You See Is What You Get) authoring environment.

2. Google Web Toolkit

You can use Google Web Toolkit, ideally, to develop mobile html5 apps in Java. This framework allows development, combining Java with optimized mobile widget libraries such asm-gwt.

3. jQuery Mobile

jQuery Mobile, is a UI system merged with most of the popular jQuery and jQuery UI mobile device platforms.

4. jQTouch

This framework is a jQuery plugin for mobile web development different operating systems like iOS, Android and more. The best feature of jQTouch is that it is light on JavaScript while heavy on CSS.

5. M-Project

This is an HTML5 JavaScript framework targeting Operating Systems platforms like iOS, Android, BlackBerry and web OS. It uses jQueryon – the JavaScript part as well as components like offline web app support, internationalization, etc.

6. MobileNationHQ

This framework facilitates building mobile app using visual programming paradigm for iOS as well as Android.

7. Sencha Touch

This framework is the very first HTML5 framework for mobile devices. Sencha Touch allows building sensible web applications for mobile devices.

8. ViziApps

App developers use a drag-and-drop approach to design and build mobile apps with ViziApps and access data with Google spreadsheets, web services, SQL databases and other popular web data sources.

9. Worklight

With this framework, the mobile developers can make complete use of comprehensive HTML5 functionalities and elements. It also helps in enhancing capabilities with utilities and mechanisms like offline support, combined HTML5 and native codes, 3rd-party integration.

Hybrid Mobile Apps

A hybrid mobile application is nothing but an app that operates inside the native container. It allows the mobile web browser to display locally hosted HTML pages. It also exposes the device specific components like camera, geolocation, and accelerometer readings through JavaScript API.

• 1. Differences from Native Apps and Mobile Web Apps

  Although there is no vast difference in Native apps and hybrid mobile apps, there is still something that differentiates both these concepts. Hybrid apps have native codes but are not entirely native. These native codes are typically rendered by a framework, revealing JavaScript API. It allows the JavaScript code to perform native functions like clicking pictures and more. Hybrid apps allow performing native tasks.

Hybrid mobile apps can also store locally. This means, it doesn’t require Internet to store files like web apps do. A layman will never be able to differentiate between a hybrid and native app.

• 2. Pros and Cons of Hybrid Apps

  There are pros and cons for everything and so do Hybrid mobile apps have their own advantages and disadvantages.

Pros

• The codes can reuse the platform.
• This is something that most of the mobile developers are familiar with.
• There is less learning curve during the development process of hybrid mobile apps as compared to native apps.
• There is provision to build and debug apps interface and logic in the web browser.
• Very low development cost required to develop hybrid apps.

Cons

• Extra layers of conception make hybrid apps more susceptible to UI.
• You cannot use many subsets of native components.
• Debugging a Debugging a hybrid mobile app is difficult as compared to that of native app.

Hybrid Mobile App Frameworks

• 1.Appcelerator Titanium
• 2.IBM Worklight
• 3.Oracle ADF Mobile Framework
• 4.PhoneGap
• 5.KonyOne

Author’s Bio:

Ellis M – Digital Marketing Manager of VITEB – leading Web & Mobile Apps Development company having expertise in HTML5 Development, responsive mobile application, responsive mobile website and custom mobile app solutions.