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?

    Unknown 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).

    Anonymous 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 :)


    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!

    Unknown 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..


    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!

    ACEsoft said...

    Nice blog for new generation.


    Grafica CDC said...

    Great post.


    Unknown 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.

    Unknown said...

    thanks to share

    Blogger Gurem