HTML5 and jQuery for Flex Developers

  • 11,085 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
11,085
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
112
Comments
0
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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