HTML5: Next Generation Web Development

HTML5: Next-Gen Web Development<presenter name>

What is HTML?• HyperText Markup Language (HTML) is

the main markup language for creating web pages and other information that can be displayed in a web browser.

• HTML is written in the form of elements consisting of tags enclosed in angle brackets (like <html>), within the web page content.

• The purpose of a web browser is to read the HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.

Enhances HTML with native support for latest multimedia and graphics

Leverages standards-based tools Consumes HTML4, XHTML and

DOM Compatible with JavaScript & CSS3 Contains JS APIs for complex web

applications Runs on smartphones and tablet

browsers Produces cross-channel web apps

What is HTML5?

Compatible

File/Hardware Access

Offline Storage

Graphics/Media

Canvas Screen controls and animation

Native media types (Including audio/video)

Store data locally

OS Integration

FEATURES

• Basic HTML Application is all HTML, server

side apps• Hybrid (Wrapper)

Run inside a native container, and leverage the device browser engine (but not the browser) to render the HTML and process the JS locally

• Mixed-Mode Version of native application

where some forms are rendered in the web view while others are rendered using the native SDK

• SPA – Single Page Application Native app experience in a

browser (Kony method)

HTML5 Flavors

Road to HTML5

1991

HTML

1998

CSS2

2002

TablelessWeb Design

1994

HTML2

1996

CSS1

JavaScript

1997

HTML4 2000

XHTML1 2005

AJAX

2009

Growth of HTML5

8

The Hype & The Promise• Development Advantages

No specialized skillset Single code base Backwards compatibility Easy to update / upgrade Cross channel and OS Faster time to market

• Business Advantages No commercial app stores Connect and reach more users Designed with mobile in mind Cost effective

HTML5 Has It’s Own Challenges

“We have definitely shifted from HTML5 to native. The primary reason for that is, we’re seeing that more and more people are spending more time in the app, and the app is running out of memory. The second reason we’ve gone native is trying to get some of the animations, that smoothness, we felt like we needed native to really do that well.”

Kiran Prasad, Senior Director for Mobile Engineering - Linkedin

“The biggest strategic mistake we made as a company was betting too much on HTML5 as opposed to native.”

Mark Zuckerberg

Browser Fragmentation All major browsers don’t

equally support HTML5 across all platforms

Compatibility testing must be done on all potential target browsers

Not a uniform standard Varies from browser-to-

browser and browser version

Must continuously optimize web app for multiple devices, browsers and platforms.

HTML5 Development Approach

Challenges• Less stable than native• Pulls in data much more slowly

than native• Browser fragmentation• No app store discoverability• May take longer to generate

revenue• Scarcity of mobile web developers• Less offline capabilities• Poor gaming capabilities• Not as UI rich as native• Less device access capabilities

Advantages• Leverage effective web search

technology for discoverability• Native mobile developers are

getting more expensive• More capable than HTML4• Multimedia support• Cost efficient• Cross-platform• Less maintenance• Multivariate testing• Faster time-to-market• Smaller device footprint• Easy to update / upgrade• Can be wrapped in hybrid format

Develop web apps with HTML5, JS and CSS3

Reuse UI/UX and business logic with HTML5/4 SPA method

Incorporate native device capabilities into hybrid apps

Same app definition used for web and native applications

Deliver device specific browser-optimized HTML5/4 markup

Import and reuse 3rd-party frameworks

Kony Development PlatformNext Generation HTML5

Tools / Frameworks

API

Outcomes

Integration

Device Specific

HTML 5/4

Kony mBaaS

Channel Specific

Hybrid Mixed-Mode

Kony & HTML5• SPA utilized to separate UI/UX from

business logic• HTML5/4 browser variation handling• Responsive and adaptive design• Native device capabilities, including

HTML5/4 with device detection for 10,000 device types

• Audio and video elements to support multimedia rendering without plugins

• Touch events and gestures• CSS3 for 2D & 3D transformations,

targeted media queries, gradients, rounded corners, shadows, and more

• Input elements to support a variety of types: number, email, URL, range, datapicker, etc.

• Semantic elements for sections, headers, footers, etc…

Eliminating HTML5 Challenge with KonyKony HTML5

Browser Fragmentation

Kony handles the variances to support HTML5 across “All” browsers

Developer codes the variances to support HTML5 across browsers

Cost Single platform for development and integration

Additional code required to handle current variances and development required for server side components

Testing Integrate test environment to test applications on “ALL” target devices

Apps must be tested on a range of popular devices. Developers must standup test suite for each target device

PerformanceHighly optimized code to maintain performance across varying hardware specifications

HTML5 may be designed to run on various devices, but no reliable way to maintain performance across varying hardware specifications

Where HTML5 is a Good Fit• Viable Solutions

Content driven industries without large user bases Publishing, magazines, newsletters, etc… Information/content-driven, forms-based

and mapping apps • Low Storage Requirement

Local storage limits for mobile web apps is 50 MB

• Simple Graphics Does not require highest quality UI/UX

• Extensive Device Interaction IS NOT Required HTML5 has limited support for device API’s

????

HTML5 is a fantastic technology that provides significant browsing improvements. However, it will not reduce the need for companies to provide native applications as a part of their mobile channel mix.

HTML5 development requires HTML, CSS3 and JavaScript expertise. If creating hybrid mobile apps without Kony, expertise with targeted device APIs is required.

Non–standard browsers implementations are caused by competitive forces, competition won’t go away. Browsers wars will produce continued fragmentation.

Many technologists hope HTML5 will be the silver bullet to tame the mobile chaos. HTML5 simply adds another development outcome organizations must support.

Debunking the Myths

HTML5 is all I need to go mobile.

I only need one skillset to build

HTML5 Applications.

Browsers will eventually

standardize HTML5.

Cost of developing an mobile app with HTML5 is less.

MYTH ✓FACT

MYTH

MYTH

MYTH

✓FACT

✓FACT

✓FACT

• Determine if HTML5 satisfies your business and user needs. It may be the right answer for your development efforts.

• Companies wanting to compete effectively in the mobile marketplace can’t rely on browser technology alone.

• With Kony, supporting new technologies like HTML5 becomes a business decision because we handle the mobile chaos for you.

• No need to gamble on the future of the mobile industry.

Summary

Technology

HTML5: Next Generation Web Development