Catching Up With Flex

Catching up with Flex How to evolve in large Flash RIA development by Kristofer Sommestad http://blog.sommestad.net/

Mixing ours with others' Spent some time: investigating how others work with Flash RIA development summarized how we work with Flash RIA development trying to boil down how we could improve This presentation is based on my own reflections and learnings

Why this matters The world of Flash RIA development is changing with the rise of Adobe Flex Flex technologies have matured in the past years We are likely to benefit from changing our workflow

What I will talk about What Flex is and how it differs from Flash Changes in Flex 4 How this is interesting to us

What I've kind of left out Details on implementations and techniques Remote Procedure Calls (RPC) with Flex/Flash The developer-designer work-flow (i.e. Flash Catalyst) Other tools offered by Adobe; Profiler etc Testing; Unit and Functional testing

What Flash is... "Adobe Flash is a multimedia platform [...] developed and distributed by Adobe Systems." - Wikipedia Note: Flash Professional is the development tool we use to create art and compile our code We often use the word "Flash" to describe development of Flash RIA:s

What Flex is... "Adobe Flex is a software development kit released by Adobe Systems for the development and deployment of cross-platform rich Internet applications ..." - Wikipedia

What Flex is... "Flex" is a (buzz) word commonly used to describe development of Flash RIA:s Same end result - a swf - as with Flash compilation Additional tools, for example: MXML Flex framework Flex compiler Flash Builder (a.k.a. Flex Builder) Actively supported and developed by Adobe, about to release Flex 4 (Q4 2009 ?)

Perceptions of Flex "We don't need MXML" "Not good enough support from Open Source products" "IDE not good enough" "The applications are too heavy (bytewise)"

The progression of Flex Matured with every new release since; 1, 2, 3 and soon 4 SDK is open source and has an engaged community Flex 4 a big step towards improved productivity, focus on: designer/developer work-flow IDE productivity and testing data-centric development (not really interesting to us) We haven't had good enough arguments to change before release of Flex 4

Flex key features MXML Flex framework Flex compiler Flash Builder (a.k.a. Flex Builder) Skinning support

MXML: What is it? "MXML is an XML-based user interface markup language [...] used mainly to declaratively lay out the interface of applications" - Wikipedia First introduced in 2004 Been considered "newbie code" Extensive improvements with Flex 4

MXML: Why we haven't liked it... Ugly and messy code, mixing up View with Controller code too much Poor skinning support in Flex components Difficult to combine MXML views with custom art assets WYSIWYG editors have never been any good Unnecessary - we know how to code, dammit!

MXML: Why we should like it Great updates in Flex 4, providing: good skinning support easier use of custom components (i.e. widgets) other framework improvements etc Increases productivity: the WYSIWYG actually works (seriously!) faster to create and iterate views doesn't require hardcore AS competence Swiz framework (and others?) give good MVC support to avoid messy code - finally it has all come together

Flex framework Contains a large set of UI components: Buttons, drop-downs, lists, scrollbars, navigation systems, data lists etc etc Contains lots of utitilites, i.e. for: Localization, Resource Management, Code utilities Can be loaded runtime and is cached in the Flash Player

Flex compiler A lot faster than compiling in Flash Professional Command line support - possibilities for continuous builds etc Art assets still needs Flash Professional compilation

Flash Builder (a.k.a. Flex Builder) ActionScript IDE, built on Eclipse Full MXML support A good WYSIWYG editor for laying out views Profiling (performance) and debugging tools Beta 2 released in October Better coding support than before

Skinning support - with Flex 4 Very few used skinning in Flex 3 Adobe has put a lot of focus on skinning Applications can use themes: CSS with style rules (colors, fonts, etc) custom art asset libraries for UI components (buttons, scrollbars, drop-downs etc) Should be a lot faster to create and edit skins Offers more flexibility, i.e. completely different button styles with transitions etc

Perceptions of Flex - revisited "We don't need MXML" MXML serves a great purpose in RIA:s, i.e. with improved productivity. A tool, not a requirement. "Not good enough support from Open Source products" Turned around; probably better support for Flex (and MXML) application than regular Flash applications "IDE not good enough" Flex 4 is closing in on FDT and has better Flex support "The applications are too heavy (bytewise)" Could still be an issue, but Runtime Shared Libraries help a lot

So is this something for us? The pros and cons and how they compare

Why we should use Flex, part 1 MXML and its simplicity Flex compiler - faster and available from command line Flash Builder profiling/debugging

Why we should use Flex, part 2 It's just the way people work these days - standards Better support from rest of Adobe CS, i.e. Flash Catalyst, as well as the community Support from 3rd party (open source) products: FlexMonkey, FlexUnit, Swiz etc Lots for free in the Flex framework: UI components Skinning/themes/CSS Resource management and localization etc

Potenital risks with the Flex approach Learning curve for MXML, project structure, compilation etc Smaller applications can get excessively large bytewise when using Flex framework (Final version of Flex 4 not released yet) ((We haven't developed any real projects with Flex))

Pros vs Cons Arbitrarily weighed 1-5 with short-term (within ~6 months) and long-term aspect. A selection of pros and cons: Pro Short-term Long-term Con Short-term Long-term MXML 1 3 Learning curve 5 1 Compiler 2 4 Flex 4 requires 4 0 Functional 2 3 FP10 testing Larger file 2 2 Flex framework 0 3 sizes Skinning 0 4 support ... ... ... Total: 9 31 Total: 11 4

How this could change things in development

Overview of the development today ActionScript code (Business ActionScript layer) ActionScript code (View layer) ActionScript Widget Art & Layout Flash Professional Compilation Flash Professional Localization Custom - XML/ActionScript Skinning Custom - XML, swf:s UI Components (Buttons, drop- Custom - ActionScript downs etc) Resource management Custom - XML (settings etc) Widget management (layout, Custom - XML etc loading etc) Functional testing Human click-tests Unit testing None Server-side code Java, custom messaging

How we could work with Flex ActionScript code (Business ActionScript ActionScript layer) ActionScript code (View layer) ActionScript ActionScript and/or MXML Widget Art & Layout Flash Professional Flash Professional, Flash Catalyst and/or MXML Compilation Flash Professional Flex Localization Custom - XML/ActionScript Flex framework Skinning Custom - XML, swf:s Flex framework - CSS, swf:s UI Components (Buttons, drop- Custom - ActionScript Flex framework downs etc) Resource management Custom - XML Flex framework (settings etc) Widget management (layout, Custom - XML (Gruif) MXML (could still use Gruif too) loading etc) Functional testing Human click-tests FlexMonkey (or other) Unit testing None FlexUnit (or other) Server-side code Java, custom messaging Java, custom messaging, LCES etc

Who would benefit from the change? Client developers Better development tools (debug, profiling, compiler) Shorter development cycles; view iterations Integration developers Quicker, easier and more efficient skinning process Non-client developers (designers, artists, server developers) Less client developer dependencies Testers Running functional tests (could be done without Flex too) The guys with the $ Improved productivity = less time = more money

Reflections on this journey Often an over-the-top belief in Flex - rare to find anyone questioning Flex A lot of focus on rookie development and ridiculously small applications Plenty of code examples with ugly and bad code, even in the Flex book(s)

Reflections on this journey Very few have shared experiences from developing actual, big Flash RIA:s - hard to know do's and don'ts Digging deeper has changed my perspective to be more positive about Flex Learning more about Swiz really made things fall in to place

Learning more Read the Flex 3 book Read online Flex 3 & 4 documentation Download the Flash Builder & Catalyst 4 trial Lots to read online Develop, develop, develop!

Some sources Adobe Flex documentation Scott Delap InfoQ presentation Swiz documentation Wikipedia Blogs: InsideRIA and others [All my bookmarks from Googling, blog reading etc]

Catching Up With Flex

by Jadestone on Oct 23, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 7

Statistics

Catching Up With Flex — Presentation Transcript