#fosscomm11
Creating x-browser HTML5 solutions

May 8th, 2011 - Patras

Mark Boas (@maboa)

happyworm.com

jPlayer.org

What is a Polyfill?

What is a Polyfill?


"A polyfill, or polyfiller, is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively."
Remy Sharp

"A form of Regressive Enhancement."
Alex Sexton

"A shim that mimics a future API providing fallback functionality to older browsers."
Paul Irish

Introducing HTML5 + Friends ♥

SVG

Scaleable Vector Graphics

DOM based

Interactive

Canvas

Fast

Low level

Handles animation

Games!

Web Storage

Cookies on steroids*

Local or Session

* Remy Sharp

New Semantic Elements

Header / Footer

Article

Aside

Section

Menu

Nav

Audio and Video

Embedded

Flexible

Get mixing!

Indexed DB

NoSQL

Structured

Local database

Better Forms

Validation

Date / Time

Progress bars

Sliders!

Web Workers

Threaded

Background processes

Event handling

File API

Asynchronous

Reads metadata

Works locally

WebGL

3D

GPU Accelerated

What's not to like?

WebSockets

Push

Full Duplex

TCP based

Drag and Drop API

HTML5 + Friends - Why we ♥ them


  • ♥ we can view source
  • ♥ put web apps on a par with native apps
  • ♥ no 3rd party plugins required
  • ♥ play nicely with each other
  • ♥ standards based
  • ♥ fun to use

Standards - Why we need them


  • ✿ interoperability
  • ✿ accessibility
  • ✿ level playing field
  • ✿ better competition
  • ✿ promotes discussion

HTML5 adoption, April 2011

More detailed Analysis


Without Polyfills
IEFirefoxSafariChromeOperaiOS SafariOpera MiniOpera MobileAndroid Browser
Three versions back6.0: 8%3.0: 32%3.1: 36%8.0: 85%10.5: 60%
Two versions back7.0: 13%3.5: 55%3.2: 43%9.0: 85%10.6: 67%3.2: 53%2.1: 49%
Previous version8.0: 27%3.6: 65%4.0: 61%10.0: 87%11.0: 69%4.0-4.1: 62%10.0: 47%2.2: 53%
Current9.0: 58%4.0: 83%5.0: 74%11.0: 88%11.1: 74%4.2-4.3: 65%5.0-6.0: 34%11.0: 68%2.3: 56%3.0: 68%
Near future9.0: 58%5.0: 85%5.0: 74%12.0: 88%11.5: 74%
source http://icanuse.com

More detailed Analysis


With Polyfills
IEFirefoxSafariChromeOperaiOS SafariOpera MiniOpera MobileAndroid Browser
Three versions back6.0: 40%3.0: 48%3.1: 53%8.0: 88%10.5: 71%
Two versions back7.0: 40%3.5: 65%3.2: 61%9.0: 88%10.6: 72%3.2: 62%2.1: 56%
Previous version8.0: 50%3.6: 72%4.0: 73%10.0: 90%11.0: 74%4.0-4.1: 71%10.0: 59%2.2: 59%
Current9.0: 61%4.0: 85%5.0: 81%11.0: 92%11.1: 78%4.2-4.3: 73%5.0-6.0: 39%11.0: 76%2.3: 62%3.0: 72%
Near future9.0: 61%5.0: 86%5.0: 81%12.0: 88%11.5: 76%
source http://icanuse.com

The good news is you can use HTML5 now



If ...

  • ★ you accept that HTML5 features won't work in certain browsers
  • ★ you provide fallbacks
  • ★ or some combination of the above

Should web content look identical across all browsers ?




(apparently) http://dowebsitesneedtolookexactlythesameineverybrowser.com/

But ...


HTML5 facilitates web application development and it is harder to degrade functionality than content and styling.
Couple of examples :
  • ✄ instead of an interactive chart, just show the data ?
  • ✄ instead of embedded video a link to the youtube page ?
However this may not always be possible/acceptable. Many clients will want closer experiences on all major browsers.

Quick example



  • ☆ jPlayer to handle audio in older browsers (via Flash)
  • ☆ custom polyfill to replace css transform:rotate with a spritemap
  • ☆ supports touch events

That was the polyfill - this is the actual thing ... ;)




Works in pretty much all browsers. Try it :
http://happyworm.com/jPlayerLab/circleplayer/v10/ and here https://mozillademos.org/demos/dashboard/demo.html
source on github https://github.com/maboa/circleplayer

Zen Player

By @simurai http://lab.simurai.com/ui/zen-player/
source on github https://github.com/simurai/ZEN-Player

Strategy


So what's the strategy for plugging them holes?

  • ✌ Identify the HTML5 elements you want to use
  • ✌ Detect hole
  • ✌ Select or create your own Polyfill
  • ✌ Apply Polyfill

All of this in such a way that HTML5 browsers pay the smallest possible penalty.

Strategy in Action


Starting simple. How do we stop older browsers choking on HTML5 tags?

Remy Sharp's JSBin.com

HTML5 Shiv/Shim

Apparently html5shiv == html5shim

http://code.google.com/p/html5shiv/

recommends you use :

HTML5Shiv allows you to use the new HTML5 tags in versions of browsers that don't understand them, without it, they may choke on these tags. It doesn't mean the tags will work of course, just stops browsers complaining about them. It also handles some print protection for IE.

Rock Solid Detection


  • ☹ Browser sniffing - boo!
  • ☺ Feature detection - \o/

Feature detection means :

  • ✌ You don't need to know what version supports what
  • ✌ It is future proof

Example test for audio element support :

var audioTagSupport = 
!!(document.createElement('audio').canPlayType);

More feature detection techniques can be found at http://diveintohtml5.org/detect.html

Introducing Modernizr


Luckily there is Modernizr http://www.modernizr.com/

Detects HTML5 and CSS3 support

  • ✌ appends class names indicating feature support to <html> which you can then pick up on and style
  • ✌ creates a JS object you can query to establish support
  • ✌ has something similar to HTML5shiv built in
  • ✌ customizable download
  • ✌ up to date, readable source on github
  • ✌ only 3.7k

So what do I do with this power?


Alex Sexton has created a simple script loader yepnope.js (1.6k) and this snippet is taken from yepnopejs.com

Example of using Modernizr with YepNope:

Pretty self explanatory really. Note you can also use yepnope to load CSS and it does all this asynchronously, so in theory doesn't block.

The Kitchen Sink Approach


HTML5 Boiler Plate (html5boilerplate.com)

A very interesting project from Paul Irish, Divya Manian and Shi Chuan

A framework that aims to provide a starting point for x-browser development by smoothing out the differences between browsers.

  • ✌ choose which elements to include with a custom framework builder
  • ✌ highly optimized scripts
  • ✌ does not include the main polyfills

Note that it is not limited to just HTML5 differences.

Issues Part I

Polyfills vary in quality.

Ideal situation :

You drop the polyfill in and everything just works. Although in theory it may be possible for some elements you'll be hard pressed to find a polyfill that does this.

Taking video this time as an example: 

<video width="640" height="360" 
  src="http://www.youtube.com/wtf.webm" 
  controls preload="auto" autoplay />

It's one thing to pick up on this tag in JavaScript feed the source to (say) a Flash player, preload and autoplay and even display controls. Making an exact equivalent of the HTML5 API is something else entirely.

Issues Part II

Polyfills don't always cover all the bases.

Typical example Flash Canvas (http://flashcanvas.net/):

FlashCanvas Pro passes more than 70% of HTML5 Canvas tests!

Which means if you want to use it you need to be aware of the 30% it fails and prepare accordingly.

Issues Part III

Polyfills may result in unacceptable performance on some browsers/platforms

  • ☞ polyfills more often than not are written in JavaScript
  • ☞ JavaScript generally runs more slowly on older browsers
  • ☞ polyfills sometimes co-opt an older technology
  • ☞ polyfills generally rely on a plugin

This of course depends on what you are trying to achieve but this means HTML5 implementations are likely to be quicker.

Issues Part IV

Polyfills and their vital stats are not easy to find.

What do we need to know?

  • ☞ Ease of use ('dropinability')
  • ☞ Performance
  • ☞ Coverage
  • ☞ Size
  • ☞ License
  • ☞ 3rd party plugin requirements

However you can find some information here :

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
http://code.google.com/p/html5-shims/wiki/LinksandResources
http://www.html5patch.com/

Beyond Polyfills

JavaScript Libraries

HTML5 API is great and all but it doesn't mean we can't build on it.

Libraries can and do add value and can have x-browser compatibility built in.

Some interesting libraries:

  • ☞ PhoneGap (HTML5 wrapper for mobile dev)
  • ☞ Processing.js (uses Canvas)
  • ☞ Popcorn (uses audio/video)
  • ☞ Raphaël (uses SVG)
  • ☞ D3.js (DOM)
  • ☞ Three.js (3D library uses Canvas, SVG, WebGL)

Another Web is Possible


HTML(5) is an evolving spec - hopefully a reactive one!

Eventually some browsers will drop off the radar but we are likely to need polyfills for some time still.

HTML5 (and friends) are tremendously exciting, it's a shame not to use them!

Hopefully the polyfill community will continue to grow and the quality and choice of solutions will increase.

Summing Up


  • ☞ Making good x-browser solutions will take time and effort
  • ☞ Weigh up the pros and cons
  • ☞ Don't be afraid to use frameworks / libraries
  • ☞ Take the time to understand what is happening
  • ☞ Don't skimp on the testing
  • ☞ Do get your hands dirty
  • ☞ Do roll your own
  • ☞ Share your problems and solutions

Thanks


Mark Boas

@maboa

happyworm.com

jPlayer.org

www.html5patch.com


Photos : Shawn Campbell, Q Thomas Bower, Francesca Palazzi, Christi, Miss Sydney Marie, Trang Nguyen, Jeremy Brooks, Crystal A Murray, caruba, Vipul ㏄ Mathur, Jessica Diamond, Natalie Woo, Loïc Twistiti