HTML5 and jQuery for Flex Developers
Post on 13-May-2015
11280 Views
Preview:
DESCRIPTION
Transcript
For
Developers Wednesday, April 13, 2011
Ryan StewartDeveloper Evangelist, Adobe
@ryanstewart
blog.digitalbackcountry.com
ryan@adobe.com
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 SiteSo 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 sitepaved 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 andjQuery is fun and exciting
Wednesday, April 13, 2011
Building RIAs with HTML5 andjQuery is fun and exciting
Wednesday, April 13, 2011
Building RIAs with HTML5 andjQuery is fun and exciting
possible
Wednesday, April 13, 2011
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
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 somebenefits
Wednesday, April 13, 2011
Think about how Flexcreates 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 componentsare “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
Meet jQuery
hi
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 yourstupid 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 componentsall 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 someeasy 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’tbe using this in applications
Wednesday, April 13, 2011
Canvas
Wednesday, April 13, 2011
At first, I was very excitedabout Canvas
Wednesday, April 13, 2011
But quickly realizedthat 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 letsyou 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
Ryan StewartDeveloper Evangelist, Adobe
@ryanstewart
blog.digitalbackcountry.com
ryan@adobe.com
github.com/ryanstewart
Q&A
Wednesday, April 13, 2011
top related