Cross-Training in Silverlight and Flex

Brian Genisio

What is Flex?

What is Silverlight/WPF?

What can we learn by studying both?

It Is OK To Be Curious!

Take Both Pills!

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

Flash/Air Player ?

Flash Player in Browser

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– Jasmine-Flex

• Silverlight• Silverlight SDK• Silverlight Toolkit• Prism• MEF• Moq• Nunit• SpecFlow

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 –

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

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

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– Jasmine-Flex

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

XML

• Flex– ECMA 4 XML

(E4X)– XML Literals– ActionLinq

• Silverlight• LINQ to XML• XDocument• XML Literals in VB.Net

Data Display

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

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

State Management

• Flex– Current State– Inline Properties– Transitions

• Silverlight• Visual State Manager

(VSM)• Visual States• State Transitions

Mobile

• Flex– Air for Android– iOS Packager– 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!

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

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

ing

• ActionLinq:– http://bitbucket.org/briangenisio/actionlinq

• Jasmine-Flex– http://github.com/briangenisio/jasmine-flex

Smart People Developing Smart Software.www.srtsolutions.com