Everything you always wanted to know about flex*

*BUT WERE AFRAID TO ASK

Brian Genisio

What is Flex?

How does it compare to Silverlight/WPF?

What can we learn by studying both?

It Is OK To Be Curious!

Take Both Pills!

What Can Flex Do?

Toolset Overview

Silverlight ApplicationXAML/C#/VB.NET/F#/etc

Flex ApplicationMXML/ActionScript

SilverlightSDK

Silverlight RuntimeFlash Player

Flex SDK

Managed CodeResourcesCompiled AS3

Runtime OverviewBrowser

Flash Player Silverlight Runtime

Desktop

Silverlight Out Of

BrowserAir Player

iOS Android Blackberry Windows Phone 7

App 10001010

Air Player

Air Player

Silverlight Runtime

Flash Player in Browser

Air Player ?

Side-By-Side

Declarative Story

• Flex– MXML– Flex Builder– Catalyst

• Silverlight• XAML• Visual Studio• Expression Blend

Imperative Story

• Flex– ActionScript 3– Haxe– C/C++ Alchemy– Converters

• Java• C#

• Silverlight• C#• VB.Net• F#• Ruby• Python

Primary Language

• ActionScript 3.0– Dynamic by

default– Static by option– Classes/Interfaces– MetaData Tags– Quazi-Generics– XML Literals

• C#• Static by default• Dynamic by option• Classes/Interfaces• Attributes• Lambdas• Generics

Integrated Development Environments (IDEs)

• Flash Builder– Designer– Refactoring tools

• JetBrains IDEA• FlashDevelop• Tofino• Command line

• Visual Studio• Designer• Refactoring tools• Rich plug-ins

• Mono Develop• Sharp Develop• Command line

SDKs & Toolkits

• Flex– Flex SDK– FlexLib– Cairgnorm– Robotlegs– Mockito– FlexUnit

• Silverlight• Silverlight SDK• Silverlight Toolkit• Prism• MEF• Moq• NUnit

Design

• Flex– Photoshop– Illustrator– Catalyst– Over-the-wall

• Silverlight• Photoshop• Illustrator• Expression Blend• Tight integration

“The more designers are involved in the workflow, the more it looks like the original art”

– Bill Wagner –

Silverlight Designer <-> Developer

ProjectXAML, C#,

assets

Designer uses Expression Blend to

apply design

Designer uses Photoshop/Illustrator

to create mocks & assets

Developer uses Visual Studio to apply behavior and architecture

Flex Designer <-> Developer

Designer uses Photoshop/Illustrator

to create mocks & assets

Flex Project

New Flex Project

Designer uses Catalyst to apply design

Designer makes changes using Catalyst

Developer imports Flex project and works on it

Developer imports Flex project and merges it

into existing

Separation

Presentation Model

View Model

View

Model

Data Binding

• Flex– Expression-based– [Bindable]– Execute Methods– Formatters

• Silverlight• Declarative• INotifyPropertyChanged• ICommand• Value Converters

Testing

• Flex– FlexUnit– Mockito /

ASMocks– FB Runner

• Silverlight• MSTest / Nunit• Moq / Rhino Mocks• VS Runner / TD.Net

XML

• Flex– ECMA 4 XML– XML Literals– ActionLinq

• Silverlight• LINQ to XML• XDocument

Data Display

• Flex– DataGroup– List– DropDownList– Item Renderers– Data Grid

• Silverlight• ItemsControl• ListBox• ComboBox• Data Templates• Data Grid

Mobile

• Flex– Air for Android– iOS Pakcager– Blackberry

Playbook

• Silverlight• Windows Phone 7

Top 5 Things Silverlight is Good At

• Designer-Developer Workflow• Development Tools• Language Support• Third Party Support• Performance (including mobile)

Top 5 Things Flex is Good At

• Data Binding• Location, Location, Location• Visual State Management• Skinning Model• Form Validation

Flex.org

Get it!Try it!

Learn it!

• With James Ward – Adobe Evangelist• 3 Day Jam• http://FlexJam2011.eventbrite.com

Questions– http://HouseOfBilz.com– Brian.Genisio@srtsolutions.com– Twitter: @BrianGenisio

• Demos:– http://bitbucket.org/briangenisio/crosstra

ining

• ActionLinq:– http://

bitbucket.org/briangenisio/actionlinq

Smart People Developing Smart Software.www.srtsolutions.com