html5 and jquery for flex developers

For

Developers Wednesday, April 13, 2011

Ryan StewartDeveloper Evangelist, Adobe

@ryanstewart

blog.digitalbackcountry.com

[email protected]

github.com/ryanstewart

Based in Seattle

Really into Beer

Wednesday, April 13, 2011

mailto:[email protected]


Why this talk?


“No matter how much you know, there is always more to learn.”

-Simeon Bateman (and some other people)


The web is beautiful


A Better title for this talk:

How to Build Flex-like RIAs with HTML5


A Little History Lesson


RIAs


One of the first real RIAs was the Broadmoor

Hotel website


From This


To This


Results:89% Increase in registrations

4.1% conversion rate (double industry average)


What Made the Broadmoor SiteSo Special?


1. A single page with no refresh

2. Rich components


This was only possible with Flash


Arguably, the Broadmoor sitepaved the way for Flex


Fast forward *literally* 10 years


HTML has caught up


HTML has caught up(Sort of)


But not a lot has changed!


And that’s where HTML has started to catch up


Building RIAs with HTML5 andjQuery is fun and exciting


Building RIAs with HTML5 andjQuery is fun and exciting

possible


My goal for today:Show you how to build an RIAwith HTML5 and jQuery that

is on par with a Flex RIA


And show you some of the traps(and good parts) of doing HTML/JS

development


Starting with a table


HTML5 Components!


Welcome to your first HTML5 nightmare


That said, there are somebenefits


Think about how Flexcreates components


Flash Player


Flash Player

Low level events (click, hover, etc)


Flash Player


Drawing API


Flash Player


Drawing API

Code for invalidation/layout


Flash Player


Drawing API

Code for invalidation/layout

Component


Whereas HTML5 componentsare “native” and will always

have device-specific UI


Higher level components


Intro to the DOM


Meet jQuery

hi


Selectors: Finding a path through the

trees


jQuery Plugins


My Spark grid kicks yourstupid grid’s butt


A bit of a fork in the road


There are some good grid

implementations(jQgrid)


I wanted something that relies on table and was

easy to use/configure


Graceful Degradation


Adding Interactivity:And a problem with HTML5/JS


In Flex, the high level componentsall have an object model behind them


With JS, it can get a bit more hacky


Oh how I miss you {Binding}


Adding the data


jQuery provides someeasy APIs for doing AJAX calls


Dealing with complex applications


Right now all the code is crammed together, no separation

of view, logic, etc.


Just like with Flex there are a number of

application frameworks


Works with jQuery,provides unit testing,

documentation, and dependency management


What DIDN’T we cover?


Video/audio tag:

I figure you probably won’tbe using this in applications


Canvas


At first, I was very excitedabout Canvas


But quickly realizedthat Canvas is tough to do

anything useful with


No display list


No events


Basically just letsyou draw graphics but the APIs

are similar to the Flash drawing APIs


Complex animation can be done...

but....


http://www.cs.helsinki.fi/u/ilmarihe/canvas_animation_demo/mozcampeu09.html






Ryan StewartDeveloper Evangelist, Adobe

@ryanstewart

blog.digitalbackcountry.com

[email protected]

github.com/ryanstewart

Q&A




html5 and jquery for flex developers

Technology

flash playerlow level

html5 andjquery

html5 components

html5 nightmarewednesday

flash playerwednesday

high level components

real rias

rias withhtml5wednesday