• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Flex vs. HTML5 for RIAS
 

Flex vs. HTML5 for RIAS

on

  • 61,982 views

This presentation compares Flex versus HTML 5 in terms of features that compose a typical RIA (rich internet application). ...

This presentation compares Flex versus HTML 5 in terms of features that compose a typical RIA (rich internet application).

This talk given at Ignite Sydney 2009, where every talk was 20 slides, 5 minutes, 15 seconds each slide. These slides have been annotated with the narration from the talk. Check Youtube soon for the actual video.

Relevant links are in this blog post:
http://tr.im/html5flex

Statistics

Views

Total Views
61,982
Views on SlideShare
60,967
Embed Views
1,015

Actions

Likes
19
Downloads
780
Comments
5

11 Embeds 1,015

http://www.slideshare.net 917
http://www.flexturkce.com 31
http://www.othismos.com 22
http://blog.newitfarmer.com 17
http://www.e-presentations.us 13
http://paper.li 6
http://a0.twimg.com 3
http://corvinofrancesco.altervista.org 3
http://translate.googleusercontent.com 1
http://blog.cooooo.co 1
http://wildfire.gigya.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

15 of 5 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Peut-être serez-vous intéressé par nos formations pour apprendre à concevoir des applications riches ?
    - http://www.mediabox.fr/programme-html5-ria.html
    - http://www.mediabox.fr/programme-flex.html
    Are you sure you want to
    Your message goes here
    Processing…
  • nice work and i like how the last slide says when trying to decide between flex and html5, 'it is up to you if you want a quick fix or long term solution'

    it leaves it to the reader to decide which is which...

    i know which one is the long term solution but i'm not going to spoil it. ;)
    Are you sure you want to
    Your message goes here
    Processing…
  • It's great presentation which explaining difference of flex and HTML5. Thank you.
    Are you sure you want to
    Your message goes here
    Processing…
  • The Canvas element is not vector, it is bitmap. SVG and VML are HTML5's answer to vector in comparison to Flash.
    Are you sure you want to
    Your message goes here
    Processing…
  • What is in Flex envisioned for Accessibility?
    In HTML is arranged WAI-ARIA, a Framework for Accessible Rich Internet Applications. I miss some details concerning this aspect.

    But the slideshow is very interesting, thnx.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • The web is now strewn with rich web apps, and honestly, they’re kind of a bitch to make. In 5 minutes, I’ll describe 2 emerging technologies that will make web app development faster so that you can spend more time using Chrome’s incognito window. http://anthonyfranco.wordpress.com/2007/06/22/flex-and-ajax-friends-or-foes/ http://www.slideshare.net/peterelst/ria-meets-desktop-439958 http://www.slideshare.net/tbisaacs/flash-flex-air-a-brief-survey?src = related_normal&rel =290787

Flex vs. HTML5 for RIAS Flex vs. HTML5 for RIAS Presentation Transcript

  • Flex vs. HTML 5 for RIAs Pamela Fox @pamelafox http://imagine-it.org Ignite Sydney 2009
  • The web is now strewn with rich web apps, and honestly, they’re kind of a bitch to make. In the next 5 minutes, I’ll describe 2 emerging technologies that will make web app development faster.
  • RIA RIA stands for “Rich Internet Application.” It’s basically a web app that has all the functionality a user expects of a desktop app – like Google Spreadsheets compared to MS Excel. RIAs are pretty much a hack right now, but with new technologies, they’re becoming less so.
  • HTML5 HTML 1.0 HTML 2.0 HTML 3.0 HTML 3.2 HTML 4.0 HTML5 1991 1994 1995 1997 2000 XHTML 1.0 <!DOCTYPE HTML> <html> <head><title>HTML 5</title></head> <body>Hello World!</body> </html> HTML5 is the next evolution of HTML, and will be backward compatible with existing HTML. As the spec is being worked on, parts of it being gradually adopted by the various browsers. The whole spec likely won’t be officially done for another decade.
  • Flex Flash Player ActionScript 1.0 ActionScript 2.0 Flex 1.0 ActionScript 3.0 1997 2000 2003 2004 Flex 3.0 2006 Flex 2.0 AIR 2007 <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <mx:Application xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; > <mx:Panel title=&quot;My Application&quot; > <mx:Label text=&quot;Hello World!&quot;/> </mx:Panel> </mx:Application> Flex is basically Flash for application designers - so it combines the power of Flash with things like UI widgets. AIR is a framework that works with Flex to let you make downloadable desktop applications.
  • Openness Spec/SDK Compiler Runtime Flex HTML5 Open Standard (WHATWG) Open Source (MPL) Closed->Open (IE->Chrome,V8,Webkit) Closed (FVM) N/A Adobe has open-sourced the Flex SDK/Spec/Compiler, but not the flash player runtime. The WHATWG group is working on the open HTML5 spec, but most browser runtimes are closed.
  • UI Widgets Flex HTML5 <datagrid></datagrid> <menu></menu> mx.controls.* HDividedBox TabNavigator Tree MenuBar DataGrid Flex prides itself on providing many different UI widgets (containers, lists, menus, navigators, etc). HTML5 shies away from this and other presentational tags, just adding datagrid and menu. And as indicated by that question mark, there are no implementations of these tags yet, so we have no idea what they might look like.
  • Forms Controls Validation Flex HTML5 mx.controls.ColorPicker, mx.controls.DateChooser input type=“list”, =“range”, =“date” input type=“email”, =“url” checkValidity mx.validators.PhoneNumberValidator formIsValid HTML5 adds many new input types, Flex adds a couple nifty controls, and both of them offer new ways of validating user input without much effort. For example, you can check the validity of an email address (which would otherwise be a huge RegEx). You can also query a boolean to see if a form is valid, and in HTML5, you can use pseudo classes for styling invalid form fields.
  • Vector Graphics Flex HTML5 flash.display.Graphics <canvas></canvas> Vector graphics means drawing lines and shapes of different styles. Flash has always had graphics as its focus and been amazing at this, HTML has petered around with various incompatible specs like SVG and VML. Finally, HTML5 introduces the canvas element which gives us fast vector graphics.
  • 3D Graphics Flex HTML5 flash.geom.Matrix3D PaperVision3D, … canvas.getContext(‘3d’) 3D Graphics means creating scenes, setting up cameras/lighting, and doing 3d transformations. Though Flash only recently offered actual native 3d support in Player 10, there are many open-source flash 3d projects that simulate 3d just fine. The HTML5 spec suggests that there may be a 3d context for the canvas object, and a few browsers are experimenting with what that might look like.
  • Bitmap Manipulation Flex HTML5 canvas.getImageData,setImageData,drawImage flash.filters.* mx.effects.* flash.geom.ColorTransform flash.display.BitmapData Once you have graphics, you want to manipulate them. Flex lets you change the individual pixels, or easily apply different filters, effects, and transforms. Canvas only gives you raw pixel access, but with that, anything is possible… just harder.
  • Video Flex HTML5 OGG? Control Format mx.controls.VideoDisplay FLV <video src=“”></video> Flash has always been the obvious choice for displaying videos on the web -- Youtube is the big example of that - and Flex makes it even easier with more controls. HTML finally introduces native browser support for videos via a video tag which will most likely support the OGG video format.
  • History Back Undo Flex HTML5 History, PopStateEvent historyManagementEnabled=“true&quot; HistoryManager UndoManager, UndoManagerEvent null There are two types of history a user expects in an app. The first is navigational history - i.e. browser back button - which both Flex and HTML5 support. The second is undo history, such as in a drawing app, and only HTML5 proposes native support for that.
  • Persistent Connections Flex HTML5 WebSocket flash.net.Socket It’s always been possible to do this by connecting to sockets in Flash, which is why we see so many games and collaborative apps in Flash. There are various hacks for how to do this in HTML, such as COMET, but HTML5 makes it infinitely easier by providing native support for web sockets.
  • Drag + Drop Flex (AIR) HTML5 DataTransfer, DragEvent flash.desktop.Clipboard flash.events.NativeDragEvent, flash.desktop.TransferableData It’s not just dragging and dropping inside an application, but also dragging, dropping and copying, pasting from the desktop or across different applications. All of this is made possible in HTML5, and in Flex AIR applications.
  • File System
    • Read
    • Write
    Flex(AIR) HTML5 input type=“upload” File, FileStream, FileMode localStorage? Users expect their apps to access stuff on the file system. Flex AIR apps can both read and write to the file system, while HTML5 just maintains the upload input type. HTML5 does however have a localStorage API which can accomplish similar things.
  • Offline Access
    • Resources
    • State
    • Data
    Flex (AIR) HTML5 flash.data.SQLConnection Database, SQLTransaction, SQLResultSet localStorage <html manifest=“http...”> ApplicationCache air.Event.NETWORK_CHANGE URLMonitor Navigator.onLine WindowedApplication This means the app must cache its resources and data, and as a bonus, know whether its offline or online. Flex AIR apps and HTML5 websites have the ability to do all of this. There’s no implementation of it for HTML5 yet, but you can use Gears for a similar experience.
  • Development Flex HTML5 FlexBuilder DreamWeaver, etc. It’s always easier to build apps with an IDE. For Flex, there’s FlexBuilder, built off the Eclipse platform and just a few hundred dollars. For HTML, there are many options but the most popular is DreamWeaver (also from Adobe!).
  • Testing Unit Integration Flex HTML5 JSUnit ASUnit Selenium, WebDriver, Watir Fluint? Unit testing is easy in both Flex and HTML5 via ASUnit and JSUnit. Integration (or end-to-end) testing is a bit trickier. There are popular open-source options for HTML5, and nothing really established for Flex yet.
  • Compatibility Flex HTML5 10, 9, 8, 7, 6, 5, …. 3, 2, .. 3, 2, .. 8, 7, 6 , .. 1, Beta, .. ? Flex developers need to worry about the version of Flash Player installed, while HTML developers need to worry about all the different browsers and different versions of browsers. In the HTML5 Spec, there’s a legend next to each section indicating browser support. And, of course, everyone has to worry about mobile support. Or lack thereof…
  • Who wins? When you’re deciding what language to write your web app in, the big advantage of Flex is that it actually exists . The HTML5 spec is exactly that - just a spec- so the best you can hope for is gradual adoption over the next decade. So it’s up to you whether you want a quick fix or a long-term solution. (Or, don’t decide: Just use them both, and get the best of both worlds!)