Re-architecting the designer-developer workflow

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

360|Flex DC, September 2010

Re-architecting the
designer-developer workflow

Richard Lord
Tec...

Coming Up

A story

Lots of code

A new architecture

The Set-up

At BrightTALK we do webcasting

At BrightTALK we do webcasting

We have a set of standard players on our website
and we create custom players for specific clients.

Old workflow

Client Designer Developer

May 2008

A new player (using Cairngorm!)

Restyling with CSS

Goran (Lead Designer)

November 2008

Another client project (using Mate)

Meanwhile, Goran did something very un-designer

He built a widescreen player

Using the code from another player

This gave me an idea

Since our designer can write MXML, can we
enable him to build an app using only MXML?

January 2009

Components version 1

Too much influence from Mate
Too many non-visual components

Can we build an app using only visual MXML?

May 2009

Smart components

Smart components contain the view
and associated functionality.

Smart components can find
and talk to each other.

Designers choose smart components
based on user-interface functionality.

Designers assemble the user-interface,
and the application just works.

Designers apply skins and css to the
smart components to design the app

The approach

• Flex 3

• Dependency injection (with SmartyPants-IOC)

• Simple event bus

• Test driven developm...

... Live Code ...
(a twitter client)

MXML

<mx:Application>
<tw:TwitterContext/>

  <mx:VBox>
<tw:TweetsList/>
    <mx:TextInput id="searchInput"/>
    ...

The context is the only non-visual component.
It configures the dependency injection container.

TwitterContext
public class TwitterContext implements IMXMLObject {
[Inspectable]
public var oauthConsumerKey : String...

The other components are
the SearchButton and the TweetList.

SearchButton

public class SearchButton extends Button {

  [Inject]
  public var manager : SearchManager;

  [Inspe...

SearchButton calls a method on the SearchManager

SearchButton

calls method

SearchManager

SearchManager
public class SearchManager {

[Inject]
public var service : SearchService;

[Inject]
public ...

SearchManager calls a method on the SearchService

SearchService
SearchButton
...

SearchService
public class SearchService extends EventDispatcher {

[Inject]
public var request : TwitterRequest;
...

SearchService dispatches an event when complete

SearchService
SearchButton
...

SearchManager
public class SearchManager {

[Inject]
public var service : SearchService;

[Inject]
public ...

SearchManager updates the TweetCollection

SearchService
SearchButton
...

$Tweet Collection public class TweetCollection extends EventDispatcher { private var _tweets : Array; [Bindable( ...$

TweetCollection is bound to the TweetList

SearchService
SearchButton
...

Tweets List

public class TweetsList extends List {

[Inject]
public var tweetCollection : TweetCollection;

...

TweetCollection is bound to the TweetList

SearchService
SearchButton
...

At the component level, it is MVC(S)

SearchService
SearchButton
...

Traditional Flex MVC

View

Controller

Model

Service

Smart Components MVC

M M M M M M M M M M
V V V V V V V V V V
C C C ...

A component set is

• A collection of smart components that work
together.

• Each component set has a context c...

The application architecture

• An application is created in MXML using
components from one or more component set...

Is it new?

• The architecture feels new.

• Although I gained a lot of ideas from other
peoples work.

Is it new?

• On reflection, it has a strong similarity to MVC in
Smalltalk-80, which is 30 years old!

• Althou...

BrightTALK component Library

The BrightTALK component library is

• 158 components

• 547 classes

• 31,500...

New workflow

Developer

Client Designer

New technologies we could use

Since we started, new technologies have emerged.

• This architecture would work with F...

The basic principles are

• Doesn't matter whether you use Flex3, Flex4, or
something else?

• Doesn't matter w...

That's all folks

http://www.richardlord.net/presentations/

twitter.com/Richard_Lord