For                            DevelopersWednesday, April 13, 2011
Ryan Stewart                               Developer Evangelist, Adobe                                        ryan@adobe.c...
Why this talk?Wednesday, April 13, 2011
“No matter how much you know,                            there is always more to learn.”                                  ...
The web is beautifulWednesday, April 13, 2011
A Better title for this talk:              How to Build Flex-like RIAs with                          HTML5Wednesday, April...
A Little History LessonWednesday, April 13, 2011
RIAsWednesday, April 13, 2011
One of the first real RIAs                             was the Broadmoor                                 Hotel websiteWedn...
From ThisWednesday, April 13, 2011
To ThisWednesday, April 13, 2011
Results:                   89% Increase in registrations                        4.1% conversion rate                     (...
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 excitingWednesday, April 13, 2011
Building RIAs with HTML5 and                    jQuery is fun and exciting                                 possibleWednesd...
My goal for today:                   Show you how to build an RIA                   with HTML5 and jQuery that            ...
And show you some of the traps         (and good parts) of doing HTML/JS                   developmentWednesday, April 13,...
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                       ...
Flash Player          Low level events (click, hover, etc)                              Drawing API                       ...
Whereas HTML5 components                   are “native” and will always                     have device-specific UIWednesd...
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 ...
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                         ...
I wanted something                       that relies on table and was                          easy to use/configureWednes...
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, ...
Just like with Flex                             there are a number of                            application frameworksWed...
Wednesday, April 13, 2011
Works with jQuery,                provides unit testing,            documentation, and dependency                   manage...
What DIDN’T we cover?Wednesday, April 13, 2011
Video/audio tag:                       I figure you probably won’t                       be using this in applicationsWedn...
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 wi...
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                        ...
Upcoming SlideShare
Loading in...5
×

HTML5 and jQuery for Flex Developers

11,412

Published on

Talk at 360Flex 2011 on building Flex-like RIAs with jQuery and HTML5 and some of the good parts and pitfalls.

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
11,412
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
123
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 and jQuery for Flex Developers"

  1. 1. For DevelopersWednesday, April 13, 2011
  2. 2. Ryan Stewart Developer Evangelist, Adobe ryan@adobe.com blog.digitalbackcountry.com @ryanstewart github.com/ryanstewart Based in Seattle Really into BeerWednesday, April 13, 2011
  3. 3. Why this talk?Wednesday, April 13, 2011
  4. 4. “No matter how much you know, there is always more to learn.” -Simeon Bateman (and some other people)Wednesday, April 13, 2011
  5. 5. The web is beautifulWednesday, April 13, 2011
  6. 6. A Better title for this talk: How to Build Flex-like RIAs with HTML5Wednesday, April 13, 2011
  7. 7. A Little History LessonWednesday, April 13, 2011
  8. 8. RIAsWednesday, April 13, 2011
  9. 9. One of the first real RIAs was the Broadmoor Hotel websiteWednesday, April 13, 2011
  10. 10. From ThisWednesday, April 13, 2011
  11. 11. To ThisWednesday, April 13, 2011
  12. 12. Results: 89% Increase in registrations 4.1% conversion rate (double industry average)Wednesday, April 13, 2011
  13. 13. What Made the Broadmoor Site So Special?Wednesday, April 13, 2011
  14. 14. 1. A single page with no refresh 2. Rich componentsWednesday, April 13, 2011
  15. 15. This was only possible with FlashWednesday, April 13, 2011
  16. 16. Arguably, the Broadmoor site paved the way for FlexWednesday, April 13, 2011
  17. 17. Fast forward *literally* 10 yearsWednesday, April 13, 2011
  18. 18. HTML has caught upWednesday, April 13, 2011
  19. 19. HTML has caught up (Sort of)Wednesday, April 13, 2011
  20. 20. But not a lot has changed!Wednesday, April 13, 2011
  21. 21. And that’s where HTML has started to catch upWednesday, April 13, 2011
  22. 22. Building RIAs with HTML5 and jQuery is fun and excitingWednesday, April 13, 2011
  23. 23. Building RIAs with HTML5 and jQuery is fun and excitingWednesday, April 13, 2011
  24. 24. Building RIAs with HTML5 and jQuery is fun and exciting possibleWednesday, April 13, 2011
  25. 25. 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
  26. 26. And show you some of the traps (and good parts) of doing HTML/JS developmentWednesday, April 13, 2011
  27. 27. Starting with a tableWednesday, April 13, 2011
  28. 28. HTML5 Components!Wednesday, April 13, 2011
  29. 29. Welcome to your first HTML5 nightmareWednesday, April 13, 2011
  30. 30. That said, there are some benefitsWednesday, April 13, 2011
  31. 31. Think about how Flex creates componentsWednesday, April 13, 2011
  32. 32. Flash PlayerWednesday, April 13, 2011
  33. 33. Flash Player Low level events (click, hover, etc)Wednesday, April 13, 2011
  34. 34. Flash Player Low level events (click, hover, etc) Drawing APIWednesday, April 13, 2011
  35. 35. Flash Player Low level events (click, hover, etc) Drawing API Code for invalidation/layoutWednesday, April 13, 2011
  36. 36. Flash Player Low level events (click, hover, etc) Drawing API Code for invalidation/layout ComponentWednesday, April 13, 2011
  37. 37. Whereas HTML5 components are “native” and will always have device-specific UIWednesday, April 13, 2011
  38. 38. Higher level componentsWednesday, April 13, 2011
  39. 39. Intro to the DOMWednesday, April 13, 2011
  40. 40. hi Meet jQueryWednesday, April 13, 2011
  41. 41. Selectors: Finding a path through the treesWednesday, April 13, 2011
  42. 42. jQuery PluginsWednesday, April 13, 2011
  43. 43. My Spark grid kicks your stupid grid’s buttWednesday, April 13, 2011
  44. 44. A bit of a fork in the roadWednesday, April 13, 2011
  45. 45. There are some good grid implementations (jQgrid)Wednesday, April 13, 2011
  46. 46. I wanted something that relies on table and was easy to use/configureWednesday, April 13, 2011
  47. 47. Graceful DegradationWednesday, April 13, 2011
  48. 48. Adding Interactivity: And a problem with HTML5/JSWednesday, April 13, 2011
  49. 49. In Flex, the high level components all have an object model behind themWednesday, April 13, 2011
  50. 50. With JS, it can get a bit more hackyWednesday, April 13, 2011
  51. 51. Oh how I miss you {Binding}Wednesday, April 13, 2011
  52. 52. Adding the dataWednesday, April 13, 2011
  53. 53. jQuery provides some easy APIs for doing AJAX callsWednesday, April 13, 2011
  54. 54. Dealing with complex applicationsWednesday, April 13, 2011
  55. 55. Right now all the code is crammed together, no separation of view, logic, etc.Wednesday, April 13, 2011
  56. 56. Just like with Flex there are a number of application frameworksWednesday, April 13, 2011
  57. 57. Wednesday, April 13, 2011
  58. 58. Works with jQuery, provides unit testing, documentation, and dependency managementWednesday, April 13, 2011
  59. 59. What DIDN’T we cover?Wednesday, April 13, 2011
  60. 60. Video/audio tag: I figure you probably won’t be using this in applicationsWednesday, April 13, 2011
  61. 61. CanvasWednesday, April 13, 2011
  62. 62. At first, I was very excited about CanvasWednesday, April 13, 2011
  63. 63. But quickly realized that Canvas is tough to do anything useful withWednesday, April 13, 2011
  64. 64. No display listWednesday, April 13, 2011
  65. 65. No eventsWednesday, April 13, 2011
  66. 66. Basically just lets you draw graphics but the APIs are similar to the Flash drawing APIsWednesday, April 13, 2011
  67. 67. Complex animation can be done... but....Wednesday, April 13, 2011
  68. 68. http://www.cs.helsinki.fi/u/ilmarihe/ canvas_animation_demo/mozcampeu09.htmlWednesday, April 13, 2011
  69. 69. Q&A Ryan Stewart Developer Evangelist, Adobe ryan@adobe.com blog.digitalbackcountry.com @ryanstewart github.com/ryanstewartWednesday, April 13, 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×