KEMBAR78
HTML5 and jQuery for Flex Developers | PDF
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




Wednesday, 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 beautiful




Wednesday, April 13, 2011
A Better title for this talk:

              How to Build Flex-like RIAs with
                          HTML5



Wednesday, April 13, 2011
A Little History Lesson




Wednesday, April 13, 2011
RIAs




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



Wednesday, April 13, 2011
From This




Wednesday, April 13, 2011
To This




Wednesday, 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 components



Wednesday, April 13, 2011
This was only possible with Flash




Wednesday, April 13, 2011
Arguably, the Broadmoor site
                      paved the way for Flex




Wednesday, April 13, 2011
Fast forward *literally* 10 years




Wednesday, April 13, 2011
HTML has caught up




Wednesday, 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 up




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




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




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


Wednesday, 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 RIA



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



Wednesday, April 13, 2011
Starting with a table




Wednesday, April 13, 2011
HTML5 Components!




Wednesday, April 13, 2011
Welcome to your first
               HTML5 nightmare




Wednesday, April 13, 2011
That said, there are some
                                     benefits




Wednesday, April 13, 2011
Think about how Flex
                            creates components




Wednesday, April 13, 2011
Flash Player




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




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

                            Drawing API




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

                              Drawing API

                       Code for invalidation/layout


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

                              Drawing API

                       Code for invalidation/layout
                               Component
Wednesday, April 13, 2011
Whereas HTML5 components
                   are “native” and will always
                     have device-specific UI



Wednesday, April 13, 2011
Higher level components




Wednesday, April 13, 2011
Intro to the DOM




Wednesday, April 13, 2011
hi

                                 Meet jQuery




Wednesday, April 13, 2011
Selectors: Finding a
                             path through the
                                   trees



Wednesday, April 13, 2011
jQuery Plugins




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




Wednesday, April 13, 2011
A bit of a fork in
                                the road




Wednesday, 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/configure



Wednesday, April 13, 2011
Graceful
                            Degradation




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




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




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




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




Wednesday, April 13, 2011
Adding the data




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




Wednesday, April 13, 2011
Dealing with complex applications




Wednesday, 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 frameworks



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



Wednesday, 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 applications



Wednesday, April 13, 2011
Canvas




Wednesday, April 13, 2011
At first, I was very excited
                                   about Canvas




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



Wednesday, April 13, 2011
No display list




Wednesday, April 13, 2011
No events




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



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

                            but....



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




Wednesday, April 13, 2011
Q&A

                            Ryan Stewart
                            Developer Evangelist, Adobe

                                     ryan@adobe.com

                                     blog.digitalbackcountry.com
                                     @ryanstewart

                                     github.com/ryanstewart


Wednesday, April 13, 2011

HTML5 and jQuery for Flex Developers