Building a Real-World Application With Flex 2 David Coletta Virtual Ubiquity, Inc. [email_address]

This talk is about What are we building? What is Flex? Why use it? What happens when you try to use it for a real-world application? How do you work around the inevitable problems?

What are we building?

What is Flex?

Why use it?

What happens when you try to use it for a real-world application?

How do you work around the inevitable problems?

Buzzword the first real word processor for the web No install: just surf and go Ubiquitous access to your documents Cross-browser, cross-platform True WYSIWYG with page breaks, headers/footers, beautiful typography Powerful collaboration features

No install: just surf and go

Ubiquitous access to your documents

Cross-browser, cross-platform

True WYSIWYG with page breaks, headers/footers, beautiful typography

Powerful collaboration features

Does the world need another word processor? Our big bets People will trade functionality for ubiquity People will trade functionality for fun There’s room for innovation beyond the traditional WP user interface Paper still matters

Our big bets

People will trade functionality for ubiquity

People will trade functionality for fun

There’s room for innovation beyond the traditional WP user interface

Paper still matters

Target market: students They work from four different computers every day Even if they own laptops, they don’t want to carry them around They like trying new stuff They haven’t bought Office yet

They work from four different computers every day

Even if they own laptops, they don’t want to carry them around

They like trying new stuff

They haven’t bought Office yet

Demo

What we wanted in a platform Modern language Great developer tools Rapid Development All the GUI building blocks Rich media Internet protocols Interoperability with different back ends Functionality High-performance runtime Small download footprint Performance High market penetration Cross-browser, cross-platform Runs well on locked-down machines Ubiquity

Modern language

Great developer tools

All the GUI building blocks

Rich media

Internet protocols

Interoperability with different back ends

High-performance runtime

Small download footprint

High market penetration

Cross-browser, cross-platform

Runs well on locked-down machines

Why we chose Flex ActionScript 3 Eclipse IDE Rapid Development Rich application framework JPG, GIF, PNG, Video, embedded Flash movies HTTP, SOAP, XML Functionality New VM for AS3 with 10x speed over Flash 8 1 to 2 MB player download Performance Flash player has 98% penetration Runs on Internet Explorer, Firefox, Safari, Windows, Mac OS X Ubiquity

ActionScript 3

Eclipse IDE

Rich application framework

JPG, GIF, PNG, Video, embedded Flash movies

HTTP, SOAP, XML

New VM for AS3 with 10x speed over Flash 8

1 to 2 MB player download

Flash player has 98% penetration

Runs on Internet Explorer, Firefox, Safari, Windows, Mac OS X

Developer benefits of Flex Modern Eclipse-based IDE with plug-ins for extensibility Great integration with source code control (CVS, Subversion) ActionScript has very easy learning curve from C# or Java Fast incremental compiler

Modern Eclipse-based IDE with plug-ins for extensibility

Great integration with source code control (CVS, Subversion)

ActionScript has very easy learning curve from C# or Java

Fast incremental compiler

“ Write once, run anywhere” candidate platforms Java AJAX .NET Framework (Windows-only) Flex 2 and Flash (WPF/E is coming)

Java

AJAX

.NET Framework (Windows-only)

Flex 2 and Flash

(WPF/E is coming)

It’s all about altitude All platforms are equivalent… Managed code Performance Security … once you download them! Which platform is most nearly ubiquitous?

All platforms are equivalent…

Managed code

Performance

Security

… once you download them!

Which platform is most nearly ubiquitous?

The Flash/Flex ecosystem Source: Wikipedia Flash 1, 2, 3 (1996-1998): Movie clips, browser integration, external standalone player Flash 4, 5, 6 (1999-2002): Scripting, ActionScript 1.0, XML, HTML text formatting Flash 7, 8 (2003-2005): ActionScript 2.0, Object-oriented programming, CSS support Flash 9 (2006): ActionScript 3.0, New virtual machine (AVM2), JIT compiler Flash Professional (authoring) Flex Builder (development) Captivate OpenLaszlo More…

Requirements for a real-world application  Tracing facility  Rich application framework  Unit test framework  Dynamically loaded code  Localizable external resources  IDE with debugger  Profiler ? Licensable third party libraries ? Community of developers ? Automated GUI testing

Flash Player limitations Very limited access to local file system No native clipboard support No drag and drop to OS Hosted inside of browser (We’re trying to make users forget they are in a browser!)

Very limited access to local file system

No native clipboard support

No drag and drop to OS

Hosted inside of browser

(We’re trying to make users forget they are in a browser!)

Major challenges of living in the browser Local file system access Upload via HTTP POST, then download For debugging, use FileSystemObject (IE) and nsILocalFile (Firefox) Native clipboard support Use hidden browser design-mode control Hosted inside of browser Careful UI design JavaScript to catch control keys and mousewheel events Requires browser-specific JavaScript implementations

Local file system access

Upload via HTTP POST, then download

For debugging, use FileSystemObject (IE) and nsILocalFile (Firefox)

Native clipboard support

Use hidden browser design-mode control

Hosted inside of browser

Careful UI design

JavaScript to catch control keys and mousewheel events

Requires browser-specific JavaScript implementations

Apollo is coming “ Apollo is the code name for a cross-operating system runtime being developed by Adobe that allows developers to leverage their existing web development skills (Flash, Flex, HTML, JavaScript, Ajax) to build and deploy Rich Internet Applications (RIAs) to the desktop.” Alpha 1 shipped in March

“ Apollo is the code name for a cross-operating system runtime being developed by Adobe that allows developers to leverage their existing web development skills (Flash, Flex, HTML, JavaScript, Ajax) to build and deploy Rich Internet Applications (RIAs) to the desktop.”

Alpha 1 shipped in March

Apollo

Problems Apollo solves Local file system access System clipboard access System drag-and-drop Browser chrome Lots of other desktop integration

Local file system access

System clipboard access

System drag-and-drop

Browser chrome

Lots of other desktop integration

Problems Apollo creates Increased complexity of install Design challenge of offline model Security Second platform to support (but it’s worth it!)

Increased complexity of install

Design challenge of offline model

Security

Second platform to support

(but it’s worth it!)

Minor hassles of Flex & AS3 Single-threaded execution model Code cannot block the UI, must always unwind Use asynchronous event handling (completion functions) There are benefits too: very few race conditions! No protected access for constructors Various alternatives for singletons Unreferenced code is always optimized away Make static variables or arrays with references Debugger

Single-threaded execution model

Code cannot block the UI, must always unwind

Use asynchronous event handling (completion functions)

There are benefits too: very few race conditions!

No protected access for constructors

Various alternatives for singletons

Unreferenced code is always optimized away

Make static variables or arrays with references

Debugger

What does it feel like to work in Flex? Interpreted language vs. compiled language Web application vs. standalone app New platform few books few tools few third-party libraries smaller community

Interpreted language vs. compiled language

Web application vs. standalone app

New platform

few books

few tools

few third-party libraries

smaller community

XML It’s not evil, just misunderstood It’s everywhere in the Flex ecosystem MXML component definitions Web services E4X now part of AS3 language Embrace it to make best use of Flex

It’s not evil, just misunderstood

It’s everywhere in the Flex ecosystem

MXML component definitions

Web services

E4X now part of AS3 language

Embrace it to make best use of Flex

Choreography What is choreography? Harder than just plopping stuff on the screen Once you open the door, hard to turn back Challenges: Algorithms for keeping track of where objects come from and where they go Timing: how long to start, how long to play (different users have different tolerances) Balance between usefulness, eye candy, distraction

What is choreography?

Harder than just plopping stuff on the screen

Once you open the door, hard to turn back

Challenges:

Algorithms for keeping track of where objects come from and where they go

Timing: how long to start, how long to play (different users have different tolerances)

Balance between usefulness, eye candy, distraction

Testing techniques FlexUnit Home-grown (“LiveTest”) Mercury QuickTest Pro

FlexUnit

Home-grown (“LiveTest”)

Mercury QuickTest Pro

Conclusion If you need rich media best possible language performance cross-browser, cross-platform support trouble-free install and … you can live with the restrictions of Flash Player… Then Flex has no equal

If you need

rich media

best possible language performance

cross-browser, cross-platform support

trouble-free install

and … you can live with the restrictions of Flash Player…

Then Flex has no equal

Additional resources Flex.org Christophe Coenraets: 30 Minute Flex Test-Drive for Developers The Joy of Flex (www.colettas.org)

Flex.org

Christophe Coenraets: 30 Minute Flex Test-Drive for Developers

The Joy of Flex (www.colettas.org)