HTML5 and jQuery for Flex Developers
-
Upload
ryan-stewart -
Category
Technology
-
view
11.280 -
download
2
description
Transcript of HTML5 and jQuery for Flex Developers
![Page 1: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/1.jpg)
For
Developers Wednesday, April 13, 2011
![Page 2: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/2.jpg)
Ryan StewartDeveloper Evangelist, Adobe
@ryanstewart
blog.digitalbackcountry.com
github.com/ryanstewart
Based in Seattle
Really into Beer
Wednesday, April 13, 2011
![Page 3: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/3.jpg)
Why this talk?
Wednesday, April 13, 2011
![Page 4: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/4.jpg)
“No matter how much you know, there is always more to learn.”
-Simeon Bateman (and some other people)
Wednesday, April 13, 2011
![Page 5: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/5.jpg)
The web is beautiful
Wednesday, April 13, 2011
![Page 6: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/6.jpg)
A Better title for this talk:
How to Build Flex-like RIAs with HTML5
Wednesday, April 13, 2011
![Page 7: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/7.jpg)
A Little History Lesson
Wednesday, April 13, 2011
![Page 8: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/8.jpg)
RIAs
Wednesday, April 13, 2011
![Page 9: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/9.jpg)
One of the first real RIAs was the Broadmoor
Hotel website
Wednesday, April 13, 2011
![Page 10: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/10.jpg)
From This
Wednesday, April 13, 2011
![Page 11: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/11.jpg)
To This
Wednesday, April 13, 2011
![Page 12: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/12.jpg)
Results:89% Increase in registrations
4.1% conversion rate (double industry average)
Wednesday, April 13, 2011
![Page 13: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/13.jpg)
What Made the Broadmoor SiteSo Special?
Wednesday, April 13, 2011
![Page 14: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/14.jpg)
1. A single page with no refresh
2. Rich components
Wednesday, April 13, 2011
![Page 15: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/15.jpg)
This was only possible with Flash
Wednesday, April 13, 2011
![Page 16: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/16.jpg)
Arguably, the Broadmoor sitepaved the way for Flex
Wednesday, April 13, 2011
![Page 17: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/17.jpg)
Fast forward *literally* 10 years
Wednesday, April 13, 2011
![Page 18: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/18.jpg)
HTML has caught up
Wednesday, April 13, 2011
![Page 19: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/19.jpg)
HTML has caught up(Sort of)
Wednesday, April 13, 2011
![Page 20: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/20.jpg)
But not a lot has changed!
Wednesday, April 13, 2011
![Page 21: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/21.jpg)
And that’s where HTML has started to catch up
Wednesday, April 13, 2011
![Page 22: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/22.jpg)
Building RIAs with HTML5 andjQuery is fun and exciting
Wednesday, April 13, 2011
![Page 23: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/23.jpg)
Building RIAs with HTML5 andjQuery is fun and exciting
Wednesday, April 13, 2011
![Page 24: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/24.jpg)
Building RIAs with HTML5 andjQuery is fun and exciting
possible
Wednesday, April 13, 2011
![Page 25: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/25.jpg)
My goal for today:Show you how to build an RIAwith HTML5 and jQuery that
is on par with a Flex RIA
Wednesday, April 13, 2011
![Page 26: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/26.jpg)
And show you some of the traps(and good parts) of doing HTML/JS
development
Wednesday, April 13, 2011
![Page 27: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/27.jpg)
Starting with a table
Wednesday, April 13, 2011
![Page 28: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/28.jpg)
HTML5 Components!
Wednesday, April 13, 2011
![Page 29: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/29.jpg)
Welcome to your first HTML5 nightmare
Wednesday, April 13, 2011
![Page 30: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/30.jpg)
That said, there are somebenefits
Wednesday, April 13, 2011
![Page 31: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/31.jpg)
Think about how Flexcreates components
Wednesday, April 13, 2011
![Page 32: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/32.jpg)
Flash Player
Wednesday, April 13, 2011
![Page 33: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/33.jpg)
Flash Player
Low level events (click, hover, etc)
Wednesday, April 13, 2011
![Page 34: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/34.jpg)
Flash Player
Low level events (click, hover, etc)
Drawing API
Wednesday, April 13, 2011
![Page 35: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/35.jpg)
Flash Player
Low level events (click, hover, etc)
Drawing API
Code for invalidation/layout
Wednesday, April 13, 2011
![Page 36: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/36.jpg)
Flash Player
Low level events (click, hover, etc)
Drawing API
Code for invalidation/layout
Component
Wednesday, April 13, 2011
![Page 37: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/37.jpg)
Whereas HTML5 componentsare “native” and will always
have device-specific UI
Wednesday, April 13, 2011
![Page 38: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/38.jpg)
Higher level components
Wednesday, April 13, 2011
![Page 39: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/39.jpg)
Intro to the DOM
Wednesday, April 13, 2011
![Page 40: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/40.jpg)
Meet jQuery
hi
Wednesday, April 13, 2011
![Page 41: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/41.jpg)
Selectors: Finding a path through the
trees
Wednesday, April 13, 2011
![Page 42: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/42.jpg)
jQuery Plugins
Wednesday, April 13, 2011
![Page 43: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/43.jpg)
My Spark grid kicks yourstupid grid’s butt
Wednesday, April 13, 2011
![Page 44: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/44.jpg)
A bit of a fork in the road
Wednesday, April 13, 2011
![Page 45: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/45.jpg)
There are some good grid
implementations(jQgrid)
Wednesday, April 13, 2011
![Page 46: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/46.jpg)
I wanted something that relies on table and was
easy to use/configure
Wednesday, April 13, 2011
![Page 47: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/47.jpg)
Graceful Degradation
Wednesday, April 13, 2011
![Page 48: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/48.jpg)
Adding Interactivity:And a problem with HTML5/JS
Wednesday, April 13, 2011
![Page 49: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/49.jpg)
In Flex, the high level componentsall have an object model behind them
Wednesday, April 13, 2011
![Page 50: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/50.jpg)
With JS, it can get a bit more hacky
Wednesday, April 13, 2011
![Page 51: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/51.jpg)
Oh how I miss you {Binding}
Wednesday, April 13, 2011
![Page 52: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/52.jpg)
Adding the data
Wednesday, April 13, 2011
![Page 53: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/53.jpg)
jQuery provides someeasy APIs for doing AJAX calls
Wednesday, April 13, 2011
![Page 54: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/54.jpg)
Dealing with complex applications
Wednesday, April 13, 2011
![Page 55: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/55.jpg)
Right now all the code is crammed together, no separation
of view, logic, etc.
Wednesday, April 13, 2011
![Page 56: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/56.jpg)
Just like with Flex there are a number of
application frameworks
Wednesday, April 13, 2011
![Page 57: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/57.jpg)
Wednesday, April 13, 2011
![Page 58: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/58.jpg)
Works with jQuery,provides unit testing,
documentation, and dependency management
Wednesday, April 13, 2011
![Page 59: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/59.jpg)
What DIDN’T we cover?
Wednesday, April 13, 2011
![Page 60: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/60.jpg)
Video/audio tag:
I figure you probably won’tbe using this in applications
Wednesday, April 13, 2011
![Page 61: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/61.jpg)
Canvas
Wednesday, April 13, 2011
![Page 62: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/62.jpg)
At first, I was very excitedabout Canvas
Wednesday, April 13, 2011
![Page 63: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/63.jpg)
But quickly realizedthat Canvas is tough to do
anything useful with
Wednesday, April 13, 2011
![Page 64: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/64.jpg)
No display list
Wednesday, April 13, 2011
![Page 65: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/65.jpg)
No events
Wednesday, April 13, 2011
![Page 66: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/66.jpg)
Basically just letsyou draw graphics but the APIs
are similar to the Flash drawing APIs
Wednesday, April 13, 2011
![Page 67: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/67.jpg)
Complex animation can be done...
but....
Wednesday, April 13, 2011
![Page 68: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/68.jpg)
http://www.cs.helsinki.fi/u/ilmarihe/canvas_animation_demo/mozcampeu09.html
Wednesday, April 13, 2011
![Page 69: HTML5 and jQuery for Flex Developers](https://reader034.fdocuments.in/reader034/viewer/2022042614/555278b3b4c905115b8b48bc/html5/thumbnails/69.jpg)
Ryan StewartDeveloper Evangelist, Adobe
@ryanstewart
blog.digitalbackcountry.com
github.com/ryanstewart
Q&A
Wednesday, April 13, 2011