Post on 21-Dec-2015
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