Re-architecting the designer-developer workflow

LFPUG, July 2010 Re-architecting the designer-developer workﬂow Richard Lord twitter.com/Richard_Lord Technical Architect www.richardlord.net BrightTALK www.brighttalk.com

Coming Up A story Lots of code A new architecture

The Set-up

At BrightTALK we do webcasting

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

Old workﬂow 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 inﬂuence 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 ﬁnd 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 development • Lots of refactoring • MVC is NOT a requirement

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

One non-visual element remains, the context, to handle application conﬁguration

MXML <mx:Application> <tw:TwitterContext/> <mx:VBox> <tw:TweetsList/> <mx:TextInput id="searchInput"/> <tw:SearchButton label="Search" searchTerm="{searchInput.text}"/> </mx:VBox> </mx:Application>

Search Button public class SearchButton extends Button { [Inject] public var manager : SearchManager; [Inspectable] public var searchTerm : String; public function SearchButton() { addEventListener( MouseEvent.CLICK, performSearch ); } public function performSearch( event : MouseEvent ) : void { manager.search( searchTerm ); } }

Search Manager public class SearchManager { [Inject] public var service : SearchService; [Inject] public var tweetCollection : TweetCollection; [PostConstruct] public function setUpListeners( injector : Injector ) : void { service.addEventListener( TweetEvent.TWEETS_LOADED, updateTweets ); } public function search( searchTerm : String ) : void { service.send( searchTerm ); } private function updateTweets( event:TweetEvent ):void { tweetCollection.assign( event.tweets ); } }

Search Service public class SearchService extends EventDispatcher { [Inject] public var request : TwitterRequest; [PostConstruct] public function setUpListeners( injector : Injector ) : void { request.addEventListener( ServiceEvent.COMPLETE, parseResults ); } public function send( searchTerm : String ) : void { request.url = "http://search.twitter.com/search.atom"; request.sendData = new URLVariables(); request.sendData.q = searchTerm; request.sendAndLoad(); } private function parseResults( event : ServiceEvent ) : void { var tweets : TweetCollection = parseFeed( event.data as XML ); dispatchEvent( new TweetEvent( TweetEvent.TWEETS_LOADED, tweets )); } }

Tweet Collection public class TweetCollection extends EventDispatcher { private var _tweets : Array; [Bindable( event="tweetsChanged" )] public function get tweets() : Array { return _tweets; } public function set tweets( value : Array ) : void { if ( value != _tweets ) { _tweets = value; dispatchEvent( new Event( "tweetsChanged" ) ); } } public function assign( other : TweetCollection ) : void { tweets = other.tweets; } }

Tweets List public class TweetsList extends List { [Inject] public var tweetCollection : TweetCollection; private var tweetsWatcher : ChangeWatcher; [PostConstruct] public function setUp( injector : Injector ) : void { tweetsWatcher = BindingUtils.bindProperty( this, "dataProvider", tweetCollection, "tweets" ); } }

The Architecture (Twitter Smart Components)

At the component level SearchService SearchButton calls method calls method dispatches event SearchManager updates data TweetList is bound to TweetCollection

It is MVC(S) SearchService SearchButton CONTROLLER SERVICE SearchManager TweetList MODEL VIEW TweetCollection

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 C C C C C C C S S S S S S S S S S Each component is a slice of functionality implemented using MVCS architecture

A component set is • A collection of smart components that work together. • Each component set has a context component for its dependency-injection conﬁguration. • Each component set has an event bus for components to talk to each other.

The application architecture • An application is created in MXML using components from one or more component sets.

Is it new? • The architecture feels new. • Although I gained a lot of ideas from other peoples work.

Is it new? • On reﬂection, it has a strong similarity to MVC in Smalltalk-80, which is 30 years old! • Although our components are smarter than those in Smalltalk-80.

BrightTALK component Library The BrightTALK component library is • 110 components • 418 classes • 24,650 lines of code Working very well so far. We now build all our projects this way.

New workﬂow Developer Client Designer

New technologies we could use Since we started, new technologies have emerged. • This architecture would work with Flex 4 components • This architecture could be implemented using Swiz, Robotlegs, or Parsley • We now use Signals instead of Events

That's all folks www.richardlord.net twitter.com/Richard_Lord

http://www.richardlord.net	773
http://www.lfpug.com	30
http://www.slideshare.net	4
http://www.hanrss.com	1

Re-architecting the designer-developer workflow

by Richard Lord on Mar 12, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 808

Statistics

Re-architecting the designer-developer workflow — Presentation Transcript