Scribd Logo
Upload

Welcome to Scribd!

  • Flex Vs HTML5

    Uploaded by

    wuzziwug
    3K views21 pages
    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

    Original Title

    Flex vs HTML5

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    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

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    3K views21 pages

    Flex Vs HTML5

    Uploaded by

    wuzziwug
    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

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 21

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

    0
    1.
    L
    2 L

    TM
    0 L

    0 L

    0 L
    0 L

    3. TM
    1. TM

    3. TM

    4. TM
    2. TM

    XH
    H
    H

    H
    H
    HTML5
    199 199 199 199 200
    1 4 5 7 0

    <!DOCTYPE HTML>
    <html>
    <head><title>HTML
    5</title></head>
    <body>Hello World!</body>
    </html>
    Flex
    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.

    t
    t

    rip

    ip
    ip

    cr
    cr

    Sc

    nS0
    0

    0
    3. tio 2.
    nS

    1.

    3.
    0 on
    ay h

    1. tio

    Acex
    ex
    Pl las

    R
    ex
    er

    2. ti
    Ac

    AI
    Fl
    Ac

    Fl

    Fl
    F

    0
    0
    199 200 200 200 200 200
    7 0 3 4 6 7

    <?xml version="1.0" encoding="utf-8"?>


    <mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml" >
    <mx:Panel title="My Application" >
    <mx:Label text="Hello World!"/>
    </mx:Panel>
    </mx:Application>
    Openness
    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.

    Spec/SDK Open Standard (WHATWG)

    Open Source (MPL)


    Compiler N/A

    Runtime
    Closed->Open
    Closed (FVM)
    (IE->Chrome,V8,Webkit)

    Flex HTML5
    UI Widgets
    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.

    mx.controls.*

    MenuBar HDividedBox

    Tree TabNavigator

    <datagrid></datagrid>
    <menu></menu>
    DataGrid
    Flex HTML5
    Forms
    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.

    Control
    s
    mx.controls.ColorPicker, input type=“list”, =“range”,
    mx.controls.DateChooser =“date”

    Validati mx.validators.PhoneNumberValidator input type=“email”, =“url”


    on formIsValid checkValidity

    Flex HTML5
    Vector Graphics
    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.

    flash.display.Graphics <canvas></canvas>

    Flex HTML5
    3D Graphics
    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.

    flash.geom.Matrix3D

    canvas.getContext(‘3d’)

    PaperVision3D, …
    Flex HTML5
    Bitmap Manipulation
    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.

    mx.effects.*
    flash.geom.ColorTransform

    flash.filters.*
    canvas.getImageData,setImageData,
    flash.display.BitmapData drawImage
    Flex HTML5
    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.

    mx.controls.VideoDisplay
    Control <video src=“”></video>

    Format
    FLV OGG?

    Flex HTML5
    History
    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.

    History,
    Back historyManagementEnabled=“true"

    HistoryManager PopStateEvent

    Undo
    null UndoManager,
    UndoManagerEvent

    Flex HTML5
    Persistent Connections
    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.

    flash.net.Socket WebSocket

    Flex HTML5
    Drag + Drop
    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.

    flash.desktop.Clipboard

    flash.events.NativeDragEvent, DataTransfer,
    flash.desktop.TransferableData DragEvent

    Flex (AIR) HTML5


    File System
    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.

    Read File,
    input type=“upload”

    FileStream,

    Write FileMode localStorage?

    Flex(AIR) HTML5
    Offline Access
    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.

    Resources <html manifest=“http...”>


    WindowedApplication
    ApplicationCache

    State air.Event.NETWORK_CHANGE
    URLMonitor Navigator.onLine

    Data Database, SQLTransaction,


    flash.data.SQLConnection SQLResultSet
    localStorage

    Flex (AIR) HTML5


    Development
    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!).

    FlexBuilder DreamWeaver, etc.

    Flex HTML5
    Testing
    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.

    Unit ASUnit JSUnit

    Integrati Selenium,
    on Fluint?
    WebDriver, Watir

    Flex HTML5
    Compatibility
    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…

    3, 3,
    2, .. 2, ..

    10, 9, 8, 7, 6, 5, ….
    8, 7, 1, Beta,
    6, .. ..
    ?

    Flex HTML5
    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.

    You might also like