White Paper

Migrating toHTML 5The new standard for Interactive Web

idexcel

IntroductionIn the fast paced world of application development, a superior quality product with speed to market is the key to achieve and sustain success. To keep the pace with the ever evolving market dynamics, organizations need to adapt to the chang-ing market scenarios and embrace the latest technologies that steer the change, and globalized growth. HTML5 is proba-bly going to be one of the biggest and most important changes in the internet architecture in the coming decade, and it will impact almost all the companies and technologies around the world.

HTML standard was first created in 1990, and since then, it has been constantly redeveloped with the goal to improve so that it can support the latest multimedia while still ensuring the decipherability by the humans, computers and other devices. HTML5 has revolutionized the way applications are developed for the users for web, desktop applications or mobile device, and is being promoted as a standard by the computer giants such as Google and Microsoft because it helps in the application development in a way never seen before. Some of the other industry leaders using HTML5 are Face-book, Adobe, Apple, SAP and Amazon. Intel is another supporter of HTML5, and it has committed to ensure that HTML5 is established as an open-standard, capable of enabling developers to write applications once, and run on several different platforms, especially mobile ones.

2 P a g e

Migrating to HTML 5idexcel

WHY HTML 5

With the help of existing tools and platforms, software developers are able to create interactive and innovative apps, however, there is a limited choice when it comes to web application tools and environments. As a result, there are wonderfully created apps that work well only on a few devices, and even if they could run on a wider spectrum of devices and platforms, they do not main-tain the same level of functionality and quality. While developing native applications for the smart phones, the developers have to rely on the native operating system of the phone to create rich experience for the users.

3 P a g e

Migrating to HTML 5

HTML5 provides developers with powerful, cross-plat-forms tools for their mobile and web applications, and they get a powerful alternative to the age-old propri-etary tools. As it is an open standard, companies can improve its functionality and feature-set as per their requirements. One of the main advantages of HTML5 is that it does not require any plugin, and as the users do not need to install any software to view HTML5 pages, it results in faster load times. Hence, latest form factors such as tablets and mobiles are adopting latest features of HTML5, and billions of websites are using HTML, making the future of HTML5 quite secure and stable.

BROWSER SUPPORT FOR HTML5 ELEMENT

Cross Documentmessaging

Canvas basicsupport

Text APIfor Canvas

Dragand Drop

O�ine webapplications

HTML5 formfeatures

Inline SVGin HTML5

SupportUnknown

WYSIWYGeditable elements

New, stylableHTML5 elements

Get elements byclass name

VideoElement

AudioElement

NotSupported

HTML5 readiness Compatibility with HTML5`s features - Current Status

InternetExplorer 8.0

Firefox 3.6

Chrome 5.0

Safari 4.0

Opera 10.5

InternetExplorer 9.0

Firefox 4.0

Chrome 6.0

Safari

Opera

26%

77%

86%

79%

72%

idexcel

4 P a g e

cost. This also eliminates the need to have different devel-opers with different skill sets, capable of developing these applications.

HTML5 provides a robust platform that can deliver consis-tent digital content, with the ability to intelligently query content.

With the help of HTML5:

Some of the advantages of using HTML5 are:

Write once, run anywhere - HTML5 supports both mobiles and desktops, and several features of HTML5 have been designed to run on low-powered devices such as tablets and smartphones. It can also run on multicore processors so that web based applications can become more powerful and faster.

Additional Features - Many new features incorporated into HTML5 enable it to support more interactive and complex applications and multimedia. It has syntactic features, and integration for ‘MathML’ for mathematical formulae and scalable vector graphics (SVG) content. There are also features to provide browser-based offline storage so that information is stored on the client device and not on the server. Using geolocation, apps can make use of real time location details of the user. There are also advanced graphical features such as gradients and shadows and touch-screen support. HTML5 also has several granular features that help developers to mini-mize the amount of JavaScript they need to write. With HTML5, the validation can be done within the browser. New validation features include type checking, manda-tory checking, range and field length validation etc.

HTML5 is a powerful alternative to other mobile and web development environments such as Microsoft Silverlight and Adobe Flash, and also proprietary plug-ins and platforms.

HTML5 can be used to develop a single application for different devices such as iPhone, Android and Windows Phone. Using HTML5 and enhanced capabilities of the browsers, only one application needs to be developed for all varieties of smart phones.

Test Automation Framework Design ConsiderationsMigrating to HTML5 reduces the life-cycle cost of the applications that involve application development for mobile device, or have rich animated media.

HTML5 enables developers to have a single code base and smaller development team.

It gives the ability to rapidly deploy applications on all the mobile platforms and can handle the majority of mobile experiences.

Using HTML5, it is possible to provide rich interactivity to fully engage the audience, leading to brand loyalty. It also helps track how the content is used.

HTML5 supports text reflow, interactivities, animation, graphic interaction, multimedia, annotation and text highlighting, and search.

All Android devices and Apple devices support Text to Speech (TTS) and read aloud with text sync/highlighting.

New HTML5 tool, PubHTML5 is capable of converting PDFs to online publications, eliminating the need of manual cut-and-paste to convert PDF content into html and then align the graphics to make it visually appealing.

It plays a critical role in reducing the cost and effort to create media-rich applications, desktop applications that heavily interact with the Web, or creating mobile apps for different devices.

By taking the components native to the browser without relying on Adobe Flash, the skill set required for the devel-opers is reduced, and hence it reduces the development

Migrating to HTML 5idexcel

5 P a g e

cost. This also eliminates the need to have different devel-opers with different skill sets, capable of developing these applications.

HTML5 provides a robust platform that can deliver consis-tent digital content, with the ability to intelligently query content.

With the help of HTML5:

Migrating to HTML5 reduces the life-cycle cost of the applications that involve application development for mobile device, or have rich animated media.

HTML5 enables developers to have a single code base and smaller development team.

It gives the ability to rapidly deploy applications on all the mobile platforms and can handle the majority of mobile experiences.

Using HTML5, it is possible to provide rich interactivity to fully engage the audience, leading to brand loyalty. It also helps track how the content is used.

HTML5 supports text reflow, interactivities, animation, graphic interaction, multimedia, annotation and text highlighting, and search.

All Android devices and Apple devices support Text to Speech (TTS) and read aloud with text sync/highlighting.

New HTML5 tool, PubHTML5 is capable of converting PDFs to online publications, eliminating the need of manual cut-and-paste to convert PDF content into html and then align the graphics to make it visually appealing.

It plays a critical role in reducing the cost and effort to create media-rich applications, desktop applications that heavily interact with the Web, or creating mobile apps for different devices.

By taking the components native to the browser without relying on Adobe Flash, the skill set required for the devel-opers is reduced, and hence it reduces the development

Migrating to HTML 5

Migrating existing applications to HTML5A lot of legacy content is stored in the proprietary file formats, and these formats are almost impossible to repackage and reuse, or deliver to the mobile devices. The proprietary tools are not capable of adding interactive features to make the content engaging for the end users. Interoperability between proprietary hardware and proprietary software is usually not possible as these tools impose artificial limitations and restrictions, and this directly impacts the ability of the company to penetrate the market place. As an example, iPad and iPhone from Apple do not support Flash, which is the most popular animation format in the industry.

There are several companies that have started creating mobile content strategies, taking the content directly to HTML5 or to store content in a baseline format such as XML. Migrating the existing content to HTML5 provides a convenient way to future-proof, consolidate and scale the content, while facilitating delivery to the Web and mobile devices. HTML5 is completely independent of any specific vendor application or tools, and hence has become an international web content standard. It can be rendered on any mobile device or any modern web browser. If business is willing to make one-time investment to convert legacy content assets to HTML5, the content can be delivered to almost all the existing and future browsers and mobile platforms. HTML5 provides a standards-based platform to deliver the digital content ensure the independence from software and device restrictions, and at the same time, it ensures that the content is proofed for all the upcoming device releases.

Rewriting the code from scratch to HTML5 framework is extremely time consuming, complex and resource inten-sive. It also requires a specialized skill set, and it many also create security exposure. To migrate the legacy content to

Although HTML5 supports various functionalities across different browsers, there are some features that are not supported by all the browsers. It is quite easy to detect if any particular feature of HTML5 is supported by the browser, and if not, developers can degrade gracefully by using some other feature or tool to achieve the same functionality. The last option can be to degrade the user experience by dropping the feature altogether

Videos can be streamed on the Web and mobile devices

Rich animation can be delivered to the users without the use of Adobe Flash

Geolocation of the user can be identified on the browser

Content can be stored in the browser, without database

Tag specific webpage items for search engines can understand the content better

Development effort for applications can be drastically reduced

Analytics tools can be used to monitor web traffic and to assess the most popular content

idexcel

6 P a g e

HTML5, there are few tools available that are optimized for mobile and web applications. These tools allow full control and access over your code and conversion process. They improve time to market, and offer low risk and low complexity.

Steps for Migration:

There is no doubt that it is quite risky to start the initiative of choosing the new technology for migration, and invest the resources into the new platform and architecture. However, to deliver the best value to the customers, it is

Migrating to HTML 5

essential to maintain high standards for performance and usability. Additionally, the platform must allow addition of new features in a shorter timeframe. HTML5 offers cutting-edge UI, mobile support and extensibility, making it an ideal candidate to migrate from the older applications such as Flex and Silverlight.

A lot of legacy content is stored in the proprietary file formats, and these formats are almost impossible to repackage and reuse, or deliver to the mobile devices. The proprietary tools are not capable of adding interactive features to make the content engaging for the end users. Interoperability between proprietary hardware and proprietary software is usually not possible as these tools impose artificial limitations and restrictions, and this directly impacts the ability of the company to penetrate the market place. As an example, iPad and iPhone from Apple do not support Flash, which is the most popular animation format in the industry.

There are several companies that have started creating mobile content strategies, taking the content directly to HTML5 or to store content in a baseline format such as XML. Migrating the existing content to HTML5 provides a convenient way to future-proof, consolidate and scale the content, while facilitating delivery to the Web and mobile devices. HTML5 is completely independent of any specific vendor application or tools, and hence has become an international web content standard. It can be rendered on any mobile device or any modern web browser. If business is willing to make one-time investment to convert legacy content assets to HTML5, the content can be delivered to almost all the existing and future browsers and mobile platforms. HTML5 provides a standards-based platform to deliver the digital content ensure the independence from software and device restrictions, and at the same time, it ensures that the content is proofed for all the upcoming device releases.

Rewriting the code from scratch to HTML5 framework is extremely time consuming, complex and resource inten-sive. It also requires a specialized skill set, and it many also create security exposure. To migrate the legacy content to

Assess - Start by assessing the code to get the better understanding. You can use assessment tools that can provide an immediate report that specifies the level of automation required to move the existing application to HTML5.

Translate - The translator platform can be used to convert the source code to intermediate language without code freeze of source app.

Compile - The compiler processes the translated code, and errors are highlighted for developer’s attention.

Configure - Developers can edit, amend code or selec-tively re-write parts of the application if required.

Generate - Target code can be generated in different formats, and iterations of compile, test and amend can be conducted.

Redesign - Rich design platforms can be used to optimize the interface and enhance capabilities of the new application.

idexcel

7 P a g e

Migrating to HTML 5

Migrating Silverlight to HTML5Flex and Silverlight are controlled by Adobe and Microsoft respectively, however, HTML is guided by the W3C consor-tium, and it is comprised of web developers, browser manufacturers, and several other interested parties. Silverlight is the stripped-down version of .NET framework for web application development. As compared to some .NET technologies such as Windows Forms, Silverlight is comparatively a complex framework, and is yet to mature

While HTML5 was evolving, several people have invested their money, energy and time into Silverlight. However, gradually the use of tablets and smart phones exploded, and the support of browsers declined for Silverlight plugin, most developers gradually started converting to JavaScript or HTML5. The interesting features of Silverlight are testability, data-binding, reusability and its language etc. As compared to Silverlight, HTML5 is quite different, and is the markup used by most websites these days. HTML5 supports same features and additionally makes it easier to build enterprise apps with large teams. It also provides a path for migrating the legacy systems.

HTML5 is a result of the competing forces of standardiza-tion and innovation, and these are the forces guiding it

to a level where it has good tool support for rapid applica-tion development. The run-time environment is a brows-er-based plugin that needs to be downloaded and installed for the content to be viewed. As Silverlight is a browser plugin based application, it is rapidly losing it market share to the upcoming proprietary technology options. The plugin based architecture also poses problems in terms of stability, performance, and security.

VS

forward by adding new capabilities not only to HTML5, but also to its associated technologies of CSS and JavaScript. Through standardization of HTML5, web developers get same APIs and features across different browsers. Devel-opers claim that HTML5 is a true cross-platform solution, and is likely to be the dominant market player in the near future. A huge advantage of HTML5 is its usage along with jQuery within ASP.net MVC framework, providing a flexible, fast and dynamic way of developing web based applications. There are rumors that Microsoft may abandon Silverlight mainly because the popularity of HTML5 continues to grow due to its advanced functionalities and wider support. However, discontinuing may be too radical a step for Microsoft, and hence it is more likely that they will shift

idexcel

Migrating to HTML 5

their approach, and will promote Silverlight apps in Windows phones, out of browser applications, games, and high performance media apps rather than as a web appli-cations platform for business systems.

The aim of HTML5 is to have a universal reach across all browsers and industries. Adaptation of HTML5 is not limited to any particular sector or domain, and is being implemented among computer software companies, building material suppliers, packaging providers, enter-tainment outlets, beverage companies, communication and network equipment companies, casualty insurers, airlines, sports and recreation, e-commerce, media and entertainment, non-profit, healthcare etc. The studies have shown that several Fortune 500 companies using HTML5 have been able to generate and sustain higher profits and revenue.

Mobile advertising has been rapidly growing as consumers are increasingly accessing the advertising content across different devices, and this provides newer opportunities to reach wider audiences. HTML5 has become a common choice for most advertisers for developing for the web, increasing the base for HMTL5 compatible environments. Studies indicate that out of 10 advertising professionals, nine feel that HTML5 is having a positive impact on the advertising industry.

Some of the sectors where HTML5 is yet to gain its popu-larity are publishing, outsourcing and logistics and trans-portation fields. There is however strong and steady growth of HTML5 to meet the challenging and ever chang-ing demands of these fields.

Supported Domains

Future of HTML5 In order to stay competitive, the old must be disregarded, and products and applications must be upgraded to the new standards. If not updated, the company may be labeled as non-compliant, creating unnecessary barriers for the users and the products. HTML5 is still under devel-opment, and hence its functionally can become somewhat inconsistent and limited. Additionally, it is also interpreted differently by different browsers. However, by standardiz-ing HTML5, it is possible to develop applications that are powerful, and are capable of running across a broad range of devices. As a result, HTML5 is fast being adopted as the de facto standard for the content delivery.

HTML5 has strong support from IT suppliers, and it will soon replace ubiquitous Flash. Facebook is using HTML5 to design its apps, and several software giants are gradually migrating their applications to HTML5 in order to stay abreast and embrace the latest technology.

However, users need modern browsers to experience most of the modern features of HTML5. When an applica-tion degrades gracefully, it is much inferior to Silverlight or Flex where the predictable environment is present. Addi-tionally, JavaScript is not Object Oriented and hence is not as formally structured as C# or Java. This requires far more skilled developers to develop HTML5 applications, which increases the cost of application development in the short run. There could also be lack of skill availability.

Modernizing or migrating applications can pose several challenges depending in architecture, test coverage and general quality of the legacy test code base. Depending on the target platform, few factors can change the entire scope of modernization. If Silverlight applications are built modularly using MEF, PRISM or some other mechanism, they can be migrated to HTML5 one module at a time to

8 P a g e

idexcel

Migrating to HTML 5

9 P a g e

In order to stay competitive, the old must be disregarded, and products and applications must be upgraded to the new standards. If not updated, the company may be labeled as non-compliant, creating unnecessary barriers for the users and the products. HTML5 is still under devel-opment, and hence its functionally can become somewhat inconsistent and limited. Additionally, it is also interpreted differently by different browsers. However, by standardiz-ing HTML5, it is possible to develop applications that are powerful, and are capable of running across a broad range of devices. As a result, HTML5 is fast being adopted as the de facto standard for the content delivery.

HTML5 has strong support from IT suppliers, and it will soon replace ubiquitous Flash. Facebook is using HTML5 to design its apps, and several software giants are gradually migrating their applications to HTML5 in order to stay abreast and embrace the latest technology.

However, users need modern browsers to experience most of the modern features of HTML5. When an applica-tion degrades gracefully, it is much inferior to Silverlight or Flex where the predictable environment is present. Addi-tionally, JavaScript is not Object Oriented and hence is not as formally structured as C# or Java. This requires far more skilled developers to develop HTML5 applications, which increases the cost of application development in the short run. There could also be lack of skill availability.

Modernizing or migrating applications can pose several challenges depending in architecture, test coverage and general quality of the legacy test code base. Depending on the target platform, few factors can change the entire scope of modernization. If Silverlight applications are built modularly using MEF, PRISM or some other mechanism, they can be migrated to HTML5 one module at a time to

reduce risk and ensure a smoother transition for the legacy applications users. Depending on different variables, there can be several possible migration paths for Silverlight applications. Along with following the Single Responsibility Principle (SRP), the business layer of the code reuse is improved by dependency injection and loose coupling. Ability to transi-tion and reuse is also dependent on code quality on the server.

Application users operate mainly offline, interacting with the local storage.

The application needs COM interoperability

The application requires extensive data entry

The application involves rich touch interactions for usage

The skill set and the preferences of the current devel-opment team are geared for the native development.

Migrating of native applications to HTML5 is a critical decision, and must be considered if:

idexcel

Migrating to HTML 5

10

ConclusionCompetitive landscape is changing rapidly. As compared to desktop or native applications, web applications provide wider reach. With the latest technological advancements, the desktops are becoming less common devices as compared to mobiles or tablets, and modern libraries and web frameworks continue to evolve in functionalities, narrowing the gaps in browser application capabilities as compared to the native desktop.

W3C plans to release stable version of HTML5 by the end of 2014. Adopting new standards is always challenging, full of roadblocks and hindrances, however, the adoption of HTML5 has been quite impressive with companies like Facebook, Disney, Apple, and Amazon showing significant interest towards it. It is always fun and more interesting to work with the latest technologies, and with the rapidly growing mobile devices market, HTML has proven to be a promising tech-nology. With the backing from the major giants, HTML5 could rule the browser landscape sooner than anticipated. HTML5 is here to stay and has great support from the device and browser vendors, and from the community.

P a g e

idexcel

Migrating to HTML 5

About the AuthorPonbharathi Bakthaduruvan works as a Technical Lead with Idexcel. He has over eight years’ experience in developing enterprise and rich internet applications using HTML5, CSS/CSS3, Adobe Flex and Java/J2EE technologies. He has exper-tise in software design, architecture, development, implementation and maintenance of enterprise applications and has delivered many successful projects . He has a deep knowledge of UI development using HTML5, CSS3, JavaScript, jQuery and developing enterprise level applications using Java, J2EE, Hibernate, Spring, JSP, Servlet, Adobe Flex and ActionScript.

About IdexcelIdexcel is an innovative provider of IT Products & Services focused on emerging technologies. We help world leading companies build efficiencies and stronger businesses. With more than 15 years into existence Idexcel’s main focus is client satisfaction and technology innovation. Our industry expertise and a global, collaborative workforce forms the backbone of our services. We offer high degree of skills in Enterprise Applications, Cloud Services, Data-warehousing, Big Data, Analytic, QA & Testing Services, IT consulting and Staffing. Idexcel product line includes: NDS, ERP, and Cync - A revolutionary credit monitoring application for the manufacturing and �nancial management.For more information log on to www.idexcel.com.

Global Head quarters459 Herndon Parkway Suite 11Herndon, VA 20170Tel: 703-230-2600Fax: 703-467-0218Email: inquiry@idexcel.com

India Operations“Crystal Plaza” 9, 10 ,11Bhuvanappa Layout, Hosur RoadBengaluru – 560 029KarnatakaTel: +91-80-2550 8830Email: inquiry@idexcel.com

© Copyright, Idexcel. All rights reserved. No part of this document may be reproduced, stored in a retrieval system, transmitted in any form or by any means, electronic, mechanical, photocopying, recording, or otherwise, without the express written permission from Idexcel. The information contained herein is subject to change without notice. All other trademarks mentioned herein are the property of their respective owners.

idexcel