SlideShare uma empresa Scribd logo
1 de 69
Baixar para ler offline
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

Mais conteúdo relacionado

Semelhante a HTML5 and jQuery for Flex Developers

Using+javascript+to+build+native+i os+applications
Using+javascript+to+build+native+i os+applicationsUsing+javascript+to+build+native+i os+applications
Using+javascript+to+build+native+i os+applications
Muhammad Ikram Ul Haq
 
"The Reality of Digital Science"
"The Reality of Digital Science""The Reality of Digital Science"
"The Reality of Digital Science"
Kaitlin Thaney
 
Don't Repeat Your Mistakes: JavaScript Unit Testing
Don't Repeat Your Mistakes: JavaScript Unit TestingDon't Repeat Your Mistakes: JavaScript Unit Testing
Don't Repeat Your Mistakes: JavaScript Unit Testing
aaronjorbin
 
Boston Globe: Responsive Web Design
Boston Globe: Responsive Web DesignBoston Globe: Responsive Web Design
Boston Globe: Responsive Web Design
The Media Consortium
 
Inspiratiemiddag_Vincent_Everts_Finalist generatie_einstein_komt_eraan_07042011
Inspiratiemiddag_Vincent_Everts_Finalist generatie_einstein_komt_eraan_07042011Inspiratiemiddag_Vincent_Everts_Finalist generatie_einstein_komt_eraan_07042011
Inspiratiemiddag_Vincent_Everts_Finalist generatie_einstein_komt_eraan_07042011
Finalist - open IT oplossingen
 

Semelhante a HTML5 and jQuery for Flex Developers (20)

Linking: Making Data Open and Useful
Linking: Making Data Open and UsefulLinking: Making Data Open and Useful
Linking: Making Data Open and Useful
 
Linking: Making Data Open and Useful
Linking: Making Data Open and UsefulLinking: Making Data Open and Useful
Linking: Making Data Open and Useful
 
Namesmatter
NamesmatterNamesmatter
Namesmatter
 
Introducing Cloud9 at DynCon 2011
Introducing Cloud9 at DynCon 2011Introducing Cloud9 at DynCon 2011
Introducing Cloud9 at DynCon 2011
 
Using+javascript+to+build+native+i os+applications
Using+javascript+to+build+native+i os+applicationsUsing+javascript+to+build+native+i os+applications
Using+javascript+to+build+native+i os+applications
 
Usability tour-pceu-2011
Usability tour-pceu-2011Usability tour-pceu-2011
Usability tour-pceu-2011
 
"The Reality of Digital Science"
"The Reality of Digital Science""The Reality of Digital Science"
"The Reality of Digital Science"
 
A Look at the Future of HTML5
A Look at the Future of HTML5A Look at the Future of HTML5
A Look at the Future of HTML5
 
Don't Repeat Your Mistakes: JavaScript Unit Testing
Don't Repeat Your Mistakes: JavaScript Unit TestingDon't Repeat Your Mistakes: JavaScript Unit Testing
Don't Repeat Your Mistakes: JavaScript Unit Testing
 
Boston Globe: Responsive Web Design
Boston Globe: Responsive Web DesignBoston Globe: Responsive Web Design
Boston Globe: Responsive Web Design
 
Speed Dating: How Speeding up your Blog Improves your SEO
Speed Dating: How Speeding up your Blog Improves your SEOSpeed Dating: How Speeding up your Blog Improves your SEO
Speed Dating: How Speeding up your Blog Improves your SEO
 
The Fast, The Slow and the Lazy
The Fast, The Slow and the LazyThe Fast, The Slow and the Lazy
The Fast, The Slow and the Lazy
 
Node js techtalksto
Node js techtalkstoNode js techtalksto
Node js techtalksto
 
Spectrum of IT BPO Services in the Philippines
Spectrum of IT BPO Services in the PhilippinesSpectrum of IT BPO Services in the Philippines
Spectrum of IT BPO Services in the Philippines
 
Groke
GrokeGroke
Groke
 
Beyond Page Objects
Beyond Page ObjectsBeyond Page Objects
Beyond Page Objects
 
You're doing it wrong
You're doing it wrongYou're doing it wrong
You're doing it wrong
 
Einstein finalist.nl
Einstein finalist.nlEinstein finalist.nl
Einstein finalist.nl
 
Inspiratiemiddag_Vincent_Everts_Finalist generatie_einstein_komt_eraan_07042011
Inspiratiemiddag_Vincent_Everts_Finalist generatie_einstein_komt_eraan_07042011Inspiratiemiddag_Vincent_Everts_Finalist generatie_einstein_komt_eraan_07042011
Inspiratiemiddag_Vincent_Everts_Finalist generatie_einstein_komt_eraan_07042011
 
Intro to Micro-frameworks
Intro to Micro-frameworksIntro to Micro-frameworks
Intro to Micro-frameworks
 

Mais de Ryan Stewart

Mais de Ryan Stewart (11)

Intro to PhoneGap
Intro to PhoneGapIntro to PhoneGap
Intro to PhoneGap
 
From mobile browser to mobile app
From mobile browser to mobile appFrom mobile browser to mobile app
From mobile browser to mobile app
 
Developing with Phonegap - Adobe Refresh 2012
Developing with Phonegap - Adobe Refresh 2012Developing with Phonegap - Adobe Refresh 2012
Developing with Phonegap - Adobe Refresh 2012
 
Debugging and deploying with phone gap
Debugging and deploying with phone gapDebugging and deploying with phone gap
Debugging and deploying with phone gap
 
PhoneGap: Building Mobile Applications with HTML/JS
PhoneGap: Building Mobile Applications with HTML/JSPhoneGap: Building Mobile Applications with HTML/JS
PhoneGap: Building Mobile Applications with HTML/JS
 
Getting Started with Flex and PHP
Getting Started with Flex and PHPGetting Started with Flex and PHP
Getting Started with Flex and PHP
 
Flash Builder and Flex Future - Multiscreen Development
Flash Builder and Flex Future - Multiscreen DevelopmentFlash Builder and Flex Future - Multiscreen Development
Flash Builder and Flex Future - Multiscreen Development
 
Introduction to Flex Hero for Mobile Devices
Introduction to Flex Hero for Mobile DevicesIntroduction to Flex Hero for Mobile Devices
Introduction to Flex Hero for Mobile Devices
 
Getting Started with Flex and PHP
Getting Started with Flex and PHPGetting Started with Flex and PHP
Getting Started with Flex and PHP
 
Mapping and Geolocation with the Flash Platform
Mapping and Geolocation with the Flash PlatformMapping and Geolocation with the Flash Platform
Mapping and Geolocation with the Flash Platform
 
DelveNYC: Flash Catalyst
DelveNYC: Flash CatalystDelveNYC: Flash Catalyst
DelveNYC: Flash Catalyst
 

Último

Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Último (20)

Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 

HTML5 and jQuery for Flex Developers