HTML5 and jQuery for Flex Developers

For

Developers
Wednesday, April 13, 2011

Ryan Stewart
Developer Evangelist, Adobe

ryan@adobe.com

blog.digitalbackcountry.com
@ryanstewart

github.com/ryanstewart

Based in Seattle
Really into Beer


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 Site
So Special?


1. A single page with no refresh

2. Rich components


This was only possible with Flash


Arguably, the Broadmoor site
paved 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 and
jQuery is fun and exciting


Building RIAs with HTML5 and
jQuery is fun and exciting
possible


My goal for today:
Show you how to build an RIA
with 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 some
benefits


Think about how Flex
creates 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 components
are “native” and will always
have device-specific UI


Higher level components


Intro to the DOM


hi

Meet jQuery


Selectors: Finding a
path through the
trees


jQuery Plugins


My Spark grid kicks your
stupid 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 components
all 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 some
easy 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’t
be using this in applications


Canvas


At first, I was very excited
about Canvas


But quickly realized
that Canvas is tough to do
anything useful with


No display list


No events


Basically just lets
you 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


Q&A

Ryan Stewart
Developer Evangelist, Adobe

ryan@adobe.com

blog.digitalbackcountry.com
@ryanstewart

github.com/ryanstewart


HTML5 and jQuery for Flex Developers

Recomendados

Recomendados

Más contenido relacionado

Similar a HTML5 and jQuery for Flex Developers

Similar a HTML5 and jQuery for Flex Developers (20)

Más de Ryan Stewart

Más de Ryan Stewart (11)

Último

Último (20)

HTML5 and jQuery for Flex Developers