HTML 5 in Mobile Development

Today’s increasingly mobile culture is quickly making its way into the modern working environment. Its impact on business cannot be underestimated. According to a 2012 Cisco IBSG Horizons study of 600 IT decision makers from 18 industries, there will be 3.3 connected devices per knowledge worker in 2014, up from 2.8 in 2012. !e average share of IT spending devoted to mobility initiatives will grow to 20% in 2014, up from 17% in 2012 and 12% in 2010.

The proliferation of mobile devices in business gives rise to new trends, such as the development of mobile workforces, telecommuting and “bring your own device”
(BYOD). Cisco’s IBSG Horizons report cites that 88% of IT leaders are seeing BYOD growth in their enterprise and 76% consider BYOD “somewhat or extremely positive” for their companies.
Having to keep up with these trends, companies are experiencing, an acute need to develop secure, flexible, and reliable mobile apps that support a myriad of devices and platforms.
In this paper, we would like to discuss one technology that is gaining in popularity daily as it becomes an answer to cross-platform development and promises a better web experience: HTML5. We will take a closer look at the key new features of this technology, discuss the skills needed to master it, and compare HTML5-based mobile applications to native ones. This will help explain the reasons for its increasing adoption, and hopefully, help those who still might be “behind the eight ball” to start doing further homework.
HTML5 is soon to be the No. 3 mobile platform after Apple’s iOS and Google’s Android. According to an Appcelerator/IDC report, 79% of developers are planning to integrate this emerging web technology in their applications in 2012.
While the HTML5 technology stack has been used extensively in cutting-edge applications built by startups, its usage in the enterprise world has been limited. Hence, many businesses must play catch-up in adopting the knowledge and building expertise.


HTML5: New version or new concept?

In theory, HTML5 is the next version of HTML. In practice, however, this term has grown to encompass not only changes to HTML, but also new developments in JavaScript, CSS, as well as a growing number of APIs that turn a web browser into a true applications platform. Thus, HTML5 is a grouping of new technologies that make it easy to develop rich content directly in the web browser.
As mentioned earlier, the HTML5 technology stack has been used extensively by start-ups to build truly innovative apps, while its enterprise usage has been limited. This was primarily caused by the popularity of Adobe AIR and the preference for native SDKs, which offered much better capabilities and ease of development to inhouse software engineers up until the end of 2011.
In November of 2011, Adobe announced that it was discontinuing further development and support of its Flash Player technology for mobile devices in favor of advancing its HTML5 tools. This development, combined with work done by companies like Apple, Google, Opera, the Mozilla Foundation, and the WebKit community, significantly propelled HTML5 capabilities. We are now at a point where JavaScript-based apps offer performance and features on par with native-based applications. Furthermore, we are witnessing reduced complexity related to multi-platform support, shortened development cycles for new features, and greater cooperation between creative professionals and so"ware engineers.


A precise look at the set of new HTML5 features undoubtedly places it on the list of smarter, more robust, effective, and widely applicable technologies.

Semantics
Set of new tags, such as <header>, <footer>, <nav>, and others make HTML5 code more meaningful, enabling more data-driven web for both, users and programmers.

Offline and storage
APIs within HTML5 facilitate the creation of working applications even in the absence of a connection to the browser. The application cache, localStorage, session-Storage, IndexedDB, File System, and online and offline events enable apps to work with or without an online regime. Traveling without Wi-Fi, BlueTooth, or 3G, or having an intermittent signal will no longer be a problem as users can continue to be seamlessly connected and entertained on the go. HTML5 allows users to store the content locally, so that the application works regardless of the physical location of the end user. Apart from letting apps remain connected and holding data without a server, offline features also improve their performance by storing data in a cache or making it persistent between user sessions and page reloading.

Device access
This is the most exciting innovation within the HTML5 tool set. Web apps can now become truly mobile without any PhoneGap-style wrapping. Device access includes the Geolocation API, making applications locationaware and allowing them to access different sensors located on the device.

Back-end connectivity
The WebSocket API, a powerful new technology supported by HTML5, provides real-time connectivity via a persistent connection between the client and the server. Firefox, Chrome, the latest version of Internet Explorer, and most of major browsers now support WebSockets. Previously used services, such as REST APIs, Web RPC, and SOAP-based web services, are making the way for WebSocket to provide real-time connectivity. Applications that call for continuous content update, and hence require uninterrupted, constant communication from the mobile device or cloud, are now taking advantage of using this bi-directional, double-duplex technology. Web-Sockets is currently backing financial trading applications, real-time streaming quotation systems, system monitoring, chats, games, social networking, and navigation apps.

Multimedia
HTML5-based apps are now able to incorporate audio & video directly into the browser without needing any plug-ins, such as flash, that is sometimes not compatible with all operating systems. using new HTML5 APIs (i.e. Canvas,WebGL) now allows users/programmers to generate impressive visual effects and 3D graphic manipulations.

Performance & integration
New technologies, such as Web Workers, allow users to achieve multithreading directly in the browser. They are the main drivers behind building faster, more robust HTML5 apps.

CSS3
While technically not a part of HTML5 specifications, CSS3, the latest standard used to control the style and layout of web pages, is often used in conjunction with HTML5 technology to achieve incredible visual effects. Thee modifications can be done directly in CSS3 and allow for separation of element styling from code and content. Responsive Design is an emerging concept that leverages CSS3 media query capability and grid-based layouts to adjust the user interface (UI) layout of an application automatically based on the amount of available screen space. This
feature is especially useful for any portal-type application.

These new features support the main three characteristics that make HTML5 technology so promising:

Market acceptance & adoption
The leading modern mobile platforms — iOS and Android — both use an HTML5-compatible WebKit open source web browser engine as their base. In fact, a modern, HTML5-compliant web browser is a necessity for any contemporary mobile operating environment. This means that in the near future developers can freely utilize all of the features of HTML5 without any compatibility-related concerns with individual mobile devices. This also means that the same HTML5 code can be used for creating both desktop and mobile applications!

Cross-platform applicability= easier development
With the emergence of a more mobile workforce, telecommuting, and bring your own device (BYOD) trends, developers must consider developing applications in platform-agnostic ways to ensure universal compatibility. The HTML5 standard brings developers closer to resolving this dilemma by allowing them to use the same technology stack across multiple devices. Furthermore, an increasing number of cross-platform development tools like Appcelerator Titanium and Phone-Gap support HTML5. !is, in turn, helps developers target the largest range of devices with minimal rework
efforts, thus allowing businesses to innovate with greater speed and efficiency.

Ease of testing
Another way to address time-to-market constraints is by reducing the time and complexity of testing. Testing native mobile applications requires more effort, since it calls for the use of an emulator, making the entire process lengthier and, at times, more complicated. Automation of web user interface testing and the ability to conduct the entire process directly on the user’s desktop is another significant advantage of HTML5 technology.

What does it mean for the future of native apps that are being pushed out of the spotlight? Is the door closing, leaving behind the features in which the native apps still have an upper hand?

Choosing between native and HTML5-based applications continues to be a burning topic among the mobile developers. While the gap between these two app types is swiftly closing, there are still a few differences, concerns and limitations to consider.

More cost-effective and productive
Web apps run on common browsers and can be accessed on most web-enabled Smartphones. Thus, device-specific customization is much simpler from a developer standpoint. According to a recent study by financial researchers Bernstein Research, “HTML5’s web-based apps are more cost-effective and less labor-intensive than building different native apps for iOS, Android, and Windows Phone.”
The complexity and time required to add features is reduced significantly in HTML5-based applications. Web applications are cheaper to run across multiple platforms and they’re easier to maintain and update.

Concerns & limitations
Complex graphics is one area where native apps continue to lead over HTML5-based apps. Animation and complex visualization are currently better implemented through native apps. However, this shortcoming of HTML5 technology is rapidly diminishing with the latest developments in SVG standard, Web GL, canvas APIs and CSS3 transitions, supported by hardware acceleration.
Native apps are also still ahead in quality and user experience thanks to native controls and widgets used in the applications. Furthermore, the quality of development support may still be better for apps engineered on their native platforms. Thus, Google and Apple SDKs are the examples of professional products backed
up by high quality support. At the same time, technology stacks for building web apps o!en tend to have a “community support” feel to them, requiring a high level of expertise by specialists developing these web apps and their commitment for a substantial amount of self-research.
Great offline storage capability of HTML5-based apps may turn to a game of give and take. On one hand, it allows users to work regardless of their connection status, while on the other, it creates a slew of potential synchronization issues when users change the browsers or IT hardware.
For now, both types of apps have justified their right to exist and serve as the best tool for particular tasks. Some apps are still best suited for native environments in order to reach their ultimate speed and performance; typically, the apps that require an unorthodox user experience (i.e. games, social networking, lifestyle and entertainment, technology and gadgets, travel and local category apps).
On the other hand, applications where iterative design and user analytics carry more relevance (i.e. communications, financial services, retail and shopping apps) are better suited to the web approach. That said, it is important to be aware of the rapid narrowing of this differentiation gap.

To help enterprises prepare for the wider adoption of HTML5, aligning the internal needs with the required skills (en masse!) is likely to be a good strategic movie.

With the rising popularity of the HTML5 technology stack, a number of companies are hiring increasing numbers of HTML5 specialists to assist with conversion and development tasks. Optimization of corporate websites to provide a better browsing experience, simplification of complex web graphics and videos, improvement of the overall website performance and loading time, as well as the development of a web app that supports multiple devices and browsers are just a few reasons for engaging a team of HTML5 professionals.
In our opinion, detailed knowledge of HTML and JavaScript is essential for HTML5 proficiency. Not knowing what to look for in JavaScript or how to best use developer tools in WebKit-based browsers or FireBug in Firefox can make troubleshooting a web application nearly impossible.
Other skills of increasing importance include CSS3, various MVC frameworks, and knowledge of such DOM manipulation libraries as jQuery, Zepto, the Google closure platform, and countless other JavaScriptbased libraries and toolkits for making graphs and diagrams, working with databases, sound, and video, and in statistical processing.
Additionally, HTML 5 requires programmers to acquire the ability to navigate the exploding landscape of various tool chains, frameworks, and methodologies, many of which come only with community support.

Conclusion
HTML5 technology is receiving strong backing from leading mobile and web players and enjoys a growing browser support. It is simple, media-friendly, and flexible. It has great potential for streamlining the coding language and changing the way software programs are developed and delivered, as well as improving the overall web experience. Hence, it is becoming an increasingly important tool for enterprises and a necessary skill set for so!ware engineers in the age of escalating mobility.
We believe that IT organizations should pay very close attention to the development of HTML5, soon to be the new standard in web development and web- and mobile-based apps. Furthermore, organizations should invest in hiring HTML5 professionals in-house or via a third party provider in order to advance their web presence and stay competitive in today’s dynamic business environment.

Comments

Not to be published

  • This is a very educative article, I will be sure to recommend to my friends and you can view our site www.daproim.com for our services
    Mark - just now