HTML5: The New Application Platform

-


Who I Am

,

twitter@DanShappir

blog: ericomguy.blogspot.com

Agenda

What's a HTML5 Web Application?

The Power Of The Cloud
+
Native App Richness
HTML5 Web Apps

What is "Native App Richness"?

HTML5 Web Applications are, first and foremost, about the client

Real HTML5 Web Application

Benefits of HTML5 Web Applications

HTML5 Web Applications don't need:

You won't need to go to BriForum anymore!

HTML5 web applications can provide the richness and power of native desktop applications, without the headaches

So what is HTML5?

The first HTML standard with a logo!

"The Hole"

The browser was not designed to be a general purpose application platform
Douglas Crockford, 2006

But people had been using the browser as an application platform since the mid nineties

The Band-Aid

Using browser plug-ins (add-ons) - inside the browser but outside the standard:
  1. Java Applets - dead
  2. Adobe Flash - dying
  3. Microsoft Silverlight - stillborn
  4. IE6 + ActiveX - zombie
The transition to a plug-in free Web is happening today.

The Plug

The main area that has not been adequately addressed by HTML is a vague subject referred to as Web Applications. This specification attempts to rectify this

HTML5 was originally called Web Applications 1.0

Flash is no longer necessary to watch video or consume any kind of web content ... new open standards created in the mobile era, such as HTML5, will win

What is HTML5?

Web App Building Blocks

Simple HTML Application

<!DOCTYPE html>
<html>
<head>
    <title>Simple HTML Application</title>
    <style>
        button {
            color:white; background:blue;
        }
    </style>
</head>
<body>
    <button id="btn">Click me</button>
    <script>
        document.getElementById("btn").onclick = function {
            alert("clicked");
        };
    </script>
</body>
</html>

JavaScript Performance in Google Chrome

Source: Google

HTML5 Functionality Areas


Connectivity - WebSockets and Server-Sent Events
Styling - effects, transitions, animations
Device Access - geolocation, microphones & cameras
3D Graphics - WebGL, CSS3 3D
Multimedia - audio & video
Performance & Integration - Web Workers, new AJAX
Semantics - richer tags
Offline & Storage - work without internet connection

New Form Capabilities

<input name="email" type="email" placeholder="Your email address"
required autofocus>








The Cool Tool

Modern browsers have built-in development environments!

  • Chrome Dev Tools
  • Mozilla Firebug (extension)
  • Safari Web Inspector
  • Opera Dragonfly
  • IE F12 Developer Tools

Not available on mobile platforms (but you can sometime do remote debugging)

Right-click and select Inspect element, or click F12

Chrome Dev Tools are a Web App!

Chrome Dev Tools Features & Capabilities

  1. Live view of HTML DOM tree - this isn't View Source!
  2. Live view of CSS properties
  3. Live view of page resources
  4. Monitor network activity
  5. Debug JavaScript
  6. Profile memory and CPU
  7. Audit page performance (performance tips)
  8. View messages and errors
  9. Interactive console

Other browsers provide a subset of this functionality

Lots of Graphic Options

Everything GPU accelerated!

Canvas

WebGL (3D Web Graphics Library)

Audio & Video

Enhanced Communication

WebRTC - Web Real-Time Communication

Client-Side Storage

Web Intents

Proposed Device APIs

Changes in Browser Adoption Cycle

Develop for the latest and greatest

The Downsides of HTML5

When is Native App Preferable?

When is HTML5 App Preferable?

At all other times

Dan's HTML5 Postulate

HTML5 when you can; native when you must

HTML5 Resources

Thank You

twitter: @DanShappir

blog: ericomguy.blogspot.com