Thursday, January 22, 2009

HTML5 vs. Flex for RIAs (Ignite Style!)

Yesterday, I gave a talk about HTML5/Flex at Ignite Sydney. I signed up for the talk both because I wanted an excuse to research HTML5 more and because the format seemed like a challenge. Each person gets 5 minutes, 20 slides, 15 seconds each, with no leeway at all. It means that you have to be able to squeeze what you want to say in 15 seconds, but not squeeze too hard as you'll be left with an awkward 2 seconds of silence (trust me, 2 seconds is still awkward!). I prepared more for this 5 minute talk than I've prepared for any talk before, including spending 2 days researching Flex and HTML5, and a day sneaking in and out of conference rooms to rehearse my talk.

Anyway, in the end, it was a great experience, and I only messed up the final 5 words of the talk (end strong, oops). The other speakers were also awesome, particularly Kieran's talk about failures, Jason's talk about lean programming (with lots of stick figures), and MayMay's talk about gender and technology. I'm looking forward to seeing the talks at the next Ignite Sydney in May, and not having to be one of the damn-nerve-wracked speakers at it. :)

The slides are embedded below, and there'll be a Youtube video up in a few days. Since my talk involved alot of pre-research, I figured it'd be useful to list links relevant to each slides below. I hope this talk inspires others to research these technologies more, and for those interested in seeing HTML5 grow (or change), I encourage you to contribute to the WHATWG HTML5 mailing lists.. or just follow them on twitter! (@whatwg).

  • Intro:
    Flex & AJAX: Friends or Foes?, Slideshare: RIA Meets Desktop, Slideshare: Flash, Flex, AIR: A Brief Survey
  • RIA
  • HTML5: HTML5 Spec, ESW Wiki: History of HTML, History of HTML
  • Flex: Wikipedia: Adobe Flex, Wikipedia: Adobe Flash Player
  • Openness: Flex: Open Source, Adobe, Mozilla, and Tamarin, Tamarin, WHATWG
  • UI Widgets: Flex 3 Style Explorer, HTML5 Spec: The DataGrid Element,
    HTML5 Spec: The Menu Element
  • Forms: Flex 3 Style Explorer, Flex Quickstart: Validating Data, Flex Reference: Validators, HTML5 Spec: The Input Element, HTML5 Spec: Email state, HTML5 Spec: Form Constraints
  • Vector Graphics: Flex Reference: Graphics, Mandelbrot Flash Map, Mozilla: Canvas Tutorial, HTML5 Spec: The Canvas Element, Rendering Polygons with Canvas
  • 3D Graphics: Flash Player 10 Features 3D Support, Flex Reference: Matrix3d, Taking the Canvas to Another Dimension ,PaperVision3D ,Flash 3D Spider ,HTML5 Spec: The Canvas Element ,All together now: Video, 3D, File access
  • Bitmap Manipulation: Slideshare: Bitmap Manipulation with Flash ,Flex Graphics Tricks: Part 3 ,HTML5 Spec: The Canvas Element ,Flex Reference: BitmapData ,Demo: GPS Map in Canvas ,Pixel-based Manipulation in Canvas
  • Video: Flex Reference: VideoDisplay ,Demo: VideoDisplay in 3D ,FLV Format ,HTML5 Spec: The video element ,A call for video on the web - Opera
  • History: Using the HistoryManager ,Back & Forth: Custom History Management with Flex ,Flex Reference: HistoryManager ,HTML5 Spec: The History Interface ,HTML5 Spec: Undo History
  • Persistent Connections: Flex Reference: Socket ,Google Maps Collaboration Using Google's New ActionScript API + BlazeDS ,HTML5 Spec: Web Sockets
  • Drag + Drop: Flex Reference: Clipboard ,Drag+Drop in Flash ,MapClipboard Demo: Source Code ,Simple Drag&Drop in AIR ,HTML5 Element: Drag & Drop
  • File System: ,AIR: Local File System ,Upload input type ,HTML5 Spec: localStorage
  • Offline Access: Unlocking the AIR API ,Monitoring Network Activity ,HTML5 Spec: Offline Web Applications
  • Compatibility: Flash Player Penetration ,Browser Wars
  • Testing: ASUnit ,Fluint ,JSUnit ,Selenium ,Watir ,WebDriver
  • Who wins?
  • 16 comments:

    fspina said...

    awesome your presentation! I think so about all browser compatibles with Flex or Flash or anything else.
    However, new tags html5 for simplification the code source.

    Kevin said...

    The virtual machine in Flash Player has been open source since 2006 -- it's called Tamarin and was contributed to the Mozilla Foundation

    Pamela Fox said...

    Thanks, Kevin. I've updated the slides and added links to some information about the Tamarin project (and the distinction between Tamarin and the player itself).

    coquet said...

    Great presentation as a whole, although a small point makes it fall slightly short of perfect:

    AIR is not for FLEX.

    AIR provides the runtime for both Flex and HTML/javascript/"ajax" , given not an implementation of HTML5, but undoubtedly it will inherit support from their browser engine (webkit) once it becomes available.

    Just thought I'd point that out for consistency.

    Great Ignite talk :)

    Cheers


    Miguel Coquet

    Pamela Fox said...

    Great point, coquet. As someone who's only used AIR from Flex, I had a single-minded view of it. I've updated the slides to be more accurate in the description of AIR, and to better label which features come from AIR. So I suppose it's more of a comparison between developing apps that will be rendered with a plugin/non-browser runtime (Flex/AIR) versus the browser. That seems to be the distinction that polarizes most developers, anyway.
    Thanks for pointing that out!

    Ram said...

    enjoyed the rapidfire talk! Good points on the slides..

    2 questions..

    1. In light of Google's obvious support for html5 (wave!), do you think that support for the flash/flex api will be gradually killed?

    2. Will post beta version 3 of the api be also available for flash/flex?

    I intened to use some of the maps features for my site and want to know that if i choose the flex route (as i am more comfortable with that than the html/javascript hacks!), google wont drop support a year down the line..

    Thanks

    Pamela Fox said...

    Hi Ram -

    The Maps API for Flash is not in Labs, so that means that we are committed to supporting it for atleast 3 years.

    There probably won't be an actual version 3 (or 2) of the Flash API, but the engineer is working on modularizing and optimizing the current API to be more lightweight. He should be able to accomplish that behind the scenes.

    Use the Flash API, it's fun!

    Mizwar Smith said...

    Thanks ever so much, very useful article. If you do not mind, please visit my article related to travel to Pandeglang district in Banten, Indonesia at Kenali dan Kunjungi Objek Wisata di Pandeglang

    Best regards

    admincrazy said...

    I can here the new knowledge.
    Thanks for the great reference post.
    Kenali dan Kunjungi Objek Wisata di Pandeglang | Blog SEO | cah bagoes | oes tsetnoc | blogger

    bitheads said...

    I don’t know If I said it already, but this so good stuff keep up the good work. I read a lot of blogs on a daily basis and for the most part Belajar seo blogspot just wanted to make a quick comment to say I’m glad I found your blog. Thanks.

    Best regards
    Seo Motivation Oes tsetnoc

    venn99 said...

    naperville dentist
    aurora dentist
    online pharmacy
    chicago movers
    make money online
    make money
    internet tips
    free tips online
    online tips
    tips
    work from home
    video tips
    Shopping Tips
    Car Tips
    Computer Tips
    Travel Tips
    Finance Tips
    cash gifting
    cash gifting programs
    gifting
    buy backlinks
    backlinks
    How To Build A Grill Out Of A 55 Gallon Drum
    How To View Private Facebook Profiles
    How To Cure Sleep Paralysis
    What Are The Causes Of Sleep Paralysis
    How To Get On Facebook At School
    How To Detect Spyware
    Totally Free Spyware Removal Programs
    Where To Find The Best Spyware Software
    how to build a subwoofer box for your car
    ab workout routine
    making of love

    ACEsoft said...

    Nice blog for new generation.



    alstair
    WordrpessCMS@$150

    Grafica CDC said...

    Great post.

    Graficas
    Panfletos

    admin said...

    Good info thanks for sharing with us.
    Nice information, valuable and excellent, as share good stuff with good ideas and concepts, lots of great information and inspiration, both of which we all need, thanks for all the enthusiasm to offer such helpful information here.

    best regard

    Online Streaming

    pierce79 said...

    hi well i prefers the html is better in my personal opinion also i Buy viagra cause is also good in my personal opinion two .bye.

    suryo said...

    thanks to share


    Blogger Gurem

    .