FOWA Notes: Enabling Next Generation Web Apps In and Beyond the Browser - Mark Anders

Enabling Next Generation Web Apps In and Beyond the Browser

Mark Anders - Sr Principal Scientist - Adobe Systems, Inc

Started with ASP at Microsoft.

I left MS and joined macromedia because of flash.

Flash can look like this:

Spacialiser - interpretive dance for your pc

Or you can have things like this:

Mortgage calculator

I didn't know what to do with the timeline. Actionscript is complicated.

Flex is a developer friendly way to create flash apps with code. Programming style (tags + script) is familiar to web developers.

Uses MXML and CSS

Rich actionscript framework.

UI components Effects and skins

SDK is free to download and you don't need to buy anything from adobe.

Shares some features with HTML and some with flash. Unlike HTML flex was designed for app development. (no more slicing up images to create a navbar)

Developing with Flex:

Using Flex-builder - going to create a Flickr Browser.

Behind the scenes code is generated as MXML

States allow you to set-up changes to the app.

E.g we have a base state for entering a flickr tag and a 100% view for the results.

Adding a click attribute to the MXML defining the button allows me to change between the states

To get the photos from Flickr I add the url to a "service" and then need to create a databinding to get the contents of the input.

The Tilelist (where the photos are displayed) has to be connected to the results returned by the server. I can use an itemRenderer which will provide thumbnailing.

I also add a call to the button to send the request to the server.

runs the app and shows images for the tag kikubird returned from Flickr.

Example Flex Apps.

Picnik Photoediting Tool

To enable flex 2 we needed to do a lot of work behind the scenes on Flash.

It's a Virtual Machine which runs the actionscript code. Uses JIT compilation.

ActionScript 3

ECMA 262 Classes natively supported Can be optionally strongly typed. - Can still use loosely typed code. Support for try/catch Regex Runtime error checking. ECMAScript for XML (E4X)

We're seeing 10X increase in performance for AS3

Demo Performance by Faizan Buzdar - CEO Scrybe:

Local Data encryption with ActionScript

Encrypting data with AS2 - 12706 milliseconds

Encrypting data with AS3 - 1034 milliseconds

Loading contacts:

AS3 much faster pulling data and the animations are smoother.

As an app grows every ounce of performance becomes more important.

Ring of fire demo

AS2 134ms per frame

AS3 10ms per frame

Teaming up with Mozilla for project Tamarin

AVM2 source donated to Mozilla Foundation. Tamarin will be the core of Firefox 4?

Apollo

Is a runtime environment. That allows you to build desktop apps with Flash. Local file access, drag and drop, clipboard access. Custom Chrome etc.

Demo of Apollo apps.

Maptacular - Mashup with GoogleApps.

We can add flash overlays on top of Google maps

Ebay Desktop

To find out more go to:

www.flex.org

http://www.mozilla.org

http://www.adobe.com/go/apollo