HTML5 and jQuery for Flex Developers

For DevelopersWednesday, April 13, 2011

Ryan Stewart Developer Evangelist, Adobe ryan@adobe.com blog.digitalbackcountry.com @ryanstewart github.com/ryanstewart Based in Seattle Really into BeerWednesday, April 13, 2011

Why this talk?Wednesday, April 13, 2011

“No matter how much you know, there is always more to learn.” -Simeon Bateman (and some other people)Wednesday, April 13, 2011

The web is beautifulWednesday, April 13, 2011

A Better title for this talk: How to Build Flex-like RIAs with HTML5Wednesday, April 13, 2011

A Little History LessonWednesday, April 13, 2011

RIAsWednesday, April 13, 2011

One of the first real RIAs was the Broadmoor Hotel websiteWednesday, April 13, 2011

From ThisWednesday, April 13, 2011

To ThisWednesday, April 13, 2011

Results: 89% Increase in registrations 4.1% conversion rate (double industry average)Wednesday, April 13, 2011

What Made the Broadmoor Site So Special?Wednesday, April 13, 2011

1. A single page with no refresh 2. Rich componentsWednesday, April 13, 2011

This was only possible with FlashWednesday, April 13, 2011

Arguably, the Broadmoor site paved the way for FlexWednesday, April 13, 2011

Fast forward *literally* 10 yearsWednesday, April 13, 2011

HTML has caught upWednesday, April 13, 2011

HTML has caught up (Sort of)Wednesday, April 13, 2011

But not a lot has changed!Wednesday, April 13, 2011

And that’s where HTML has started to catch upWednesday, April 13, 2011

Building RIAs with HTML5 and jQuery is fun and excitingWednesday, April 13, 2011

Building RIAs with HTML5 and jQuery is fun and exciting possibleWednesday, April 13, 2011

My goal for today: Show you how to build an RIA with HTML5 and jQuery that is on par with a Flex RIAWednesday, April 13, 2011

And show you some of the traps (and good parts) of doing HTML/JS developmentWednesday, April 13, 2011

Starting with a tableWednesday, April 13, 2011

HTML5 Components!Wednesday, April 13, 2011

Welcome to your first HTML5 nightmareWednesday, April 13, 2011

That said, there are some benefitsWednesday, April 13, 2011

Think about how Flex creates componentsWednesday, April 13, 2011

Flash PlayerWednesday, April 13, 2011

Flash Player Low level events (click, hover, etc)Wednesday, April 13, 2011

Flash Player Low level events (click, hover, etc) Drawing APIWednesday, April 13, 2011

Flash Player Low level events (click, hover, etc) Drawing API Code for invalidation/layoutWednesday, April 13, 2011

Flash Player Low level events (click, hover, etc) Drawing API Code for invalidation/layout ComponentWednesday, April 13, 2011

Whereas HTML5 components are “native” and will always have device-specific UIWednesday, April 13, 2011

Higher level componentsWednesday, April 13, 2011

Intro to the DOMWednesday, April 13, 2011

hi Meet jQueryWednesday, April 13, 2011

Selectors: Finding a path through the treesWednesday, April 13, 2011

jQuery PluginsWednesday, April 13, 2011

My Spark grid kicks your stupid grid’s buttWednesday, April 13, 2011

A bit of a fork in the roadWednesday, April 13, 2011

There are some good grid implementations (jQgrid)Wednesday, April 13, 2011

I wanted something that relies on table and was easy to use/configureWednesday, April 13, 2011

Graceful DegradationWednesday, April 13, 2011

Adding Interactivity: And a problem with HTML5/JSWednesday, April 13, 2011

In Flex, the high level components all have an object model behind themWednesday, April 13, 2011

With JS, it can get a bit more hackyWednesday, April 13, 2011

Oh how I miss you {Binding}Wednesday, April 13, 2011

Adding the dataWednesday, April 13, 2011

jQuery provides some easy APIs for doing AJAX callsWednesday, April 13, 2011

Dealing with complex applicationsWednesday, April 13, 2011

Right now all the code is crammed together, no separation of view, logic, etc.Wednesday, April 13, 2011

Just like with Flex there are a number of application frameworksWednesday, April 13, 2011

Wednesday, April 13, 2011

Works with jQuery, provides unit testing, documentation, and dependency managementWednesday, April 13, 2011

What DIDN’T we cover?Wednesday, April 13, 2011

Video/audio tag: I figure you probably won’t be using this in applicationsWednesday, April 13, 2011

CanvasWednesday, April 13, 2011

At first, I was very excited about CanvasWednesday, April 13, 2011

But quickly realized that Canvas is tough to do anything useful withWednesday, April 13, 2011

No display listWednesday, April 13, 2011

No eventsWednesday, April 13, 2011

Basically just lets you draw graphics but the APIs are similar to the Flash drawing APIsWednesday, April 13, 2011

Complex animation can be done... but....Wednesday, April 13, 2011

http://www.cs.helsinki.fi/u/ilmarihe/ canvas_animation_demo/mozcampeu09.htmlWednesday, April 13, 2011

Q&A Ryan Stewart Developer Evangelist, Adobe ryan@adobe.com blog.digitalbackcountry.com @ryanstewart github.com/ryanstewartWednesday, April 13, 2011

http://blog.digitalbackcountry.com	2124
http://paper.li	37
http://webcache.googleusercontent.com	11
http://www.lionel-tardy.com	8
http://translate.googleusercontent.com	7
http://www.techgig.com	5
http://blogs.adobe.com	4
http://www.slideshare.net	3
http://www.hanrss.com	2
http://207.46.192.232	2
http://conversation.cgu.edu	2
http://blog.digitalbackcountry.com HTTP	1
url_unknown	1
http://jucagi.wordpress.com	1

HTML5 and jQuery for Flex Developers

by Ryan Stewart on Apr 13, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

14 Embeds 2,208

Statistics

HTML5 and jQuery for Flex Developers — Presentation Transcript