Robotlegs on Top of Gaia

WhoWho

Jesse Warden

Flex & Flash Consultant

Career: Director, Flash, Flex

Education: Art, Self-Taught Coder

Robotlegs/GaiaRobotlegs/Gaia

Gaia

Robotlegs

Using Them Together

+ =Hot Dog!Hot Dog!

Why?Why?

Flash Sites: Scaleable Mess

Flex Sites: Re-invent the wheel ...Badly.

GaiaGaia

Framework & Toolset for Building Flash Websites

Inspired by Ruby on Rails

Gaia InventorGaia InventorSteven SacksGaia Inventor

stevensacks.netTwittah: stevensacks

Industry ToolsIndustry Tools

SWFObject

SWFAddress

TweenLite

Thunderbolt

Example SitesExample Sites

Client SitesClient SitesMercedes, Disney, Rolling Rock, Honda, Mercedes, Disney, Rolling Rock, Honda, Burn After Reading, Keith Urban, Burn After Reading, Keith Urban, Dermalogica, Absolut, Star Trek Movie, Dermalogica, Absolut, Star Trek Movie, Electronic Arts: Tiberium, NIP/Tuck, 180 Electronic Arts: Tiberium, NIP/Tuck, 180 Energy DrinkEnergy Drink

Site XMLSite XML

<site title="Gaia Scaffold Site"> <page id="index" src="index.swf">

<page id="nav" src="nav.swf"> <page id="home"

src="home.swf" title="Home">

<asset id=”music” src=”rock.mp3”/>

</page> </page> </page></site>

ScaffoldingScaffolding

Gaia’s APIGaia’s API

goto();

TransitionsTransitions

transitionIn();

transitionOut();

transitioninComplete();

transitionOutComplete();

FlowsFlows

Normal

Preload

Reverse

Cross

DepthDepth

AssetsAssets

PreloadingPreloading

multiple Files, Byte Accuracy

Override Runtime API

Pre-loaders for Pages

Pre-loaders for Assets

Other FeaturesOther Features

SEO Scaffolding (yes, it works)

DEEPlinking API on top of SWFAddress

Bindings support in Site.xml

GaiaGaia

Bread and Butter

RobotlegsRobotlegs

MVCS Framework

ActionScript 3

RobotlegsRobotlegs

Pure AS3 = Yes

Flex = Yes

AIR = Yes

Flash = Yes (CS4/CS5)

RobotlegsRobotlegsShaun Smith

Robotlegs Inventor

Shaun.boyblack.co.zaTwittah: darscan

RobotlegsRobotlegs

Comes with a Reference Implementation (MVCS)

Robert Penner’s “Signals”

Elad Elrom’s “Passive View Example”

AsyncCommand

Dependency INjectionDependency INjection

The New “New”

All you need to know: [Inject]

SWiftSuspenders

SmartyPants IoC

GUICE: A Different Java Spring

Dependency InjectionDependency Injection

Solves PureMVC’s Casting Problem

var myView: viewObject as MainView;

var proxy:MyProxy = facade.retreiveProxy(MyProxy.NAME) as MyProxy;

Easier to code to Interfaces

DI ExampleDI Example

private var proxy:MyProxy;

var proxy:MyProxy = facade.retreiveProxy(MyProxy.NAME) as MyProxy;trace(proxy.myVO);

---------------------------

[Inject]public var model:MyModel

trace(model.myVO);

EventsEvents

Communications Through Events

Event GotchasEvent Gotchas

Tons

Sub-Systems

More Events > More properties

ViewView

GUIGUI

FormForm

ChartChart

Video PlayerVideo Player

List of ImagesList of Images

Dumb ViewDumb View

Dumb

2 things

1. Accept Data

2. Dispatch User Gestures

ValueObjectValueObject

HOld “Value”

2nd Most Valuable Class

Strongly Typed

Can Differ From Server to help GUI

VO GotchasVO Gotchas

To Build yerself...

...or have a Factory do it

constructor Params foil Serialization

Use Optional Values if you must

It changes, affects Entire App

RobotlegsRobotlegs

Context

Mediator

Services

Model

Command

Actor (Base Class)

ContextContext

Initialize FrameworkInitialize Framework

Event BusEvent Bus

Multiple Contexts for Modular Multiple Contexts for Modular DevelopmentDevelopment

ActorActor

Base Class for Model and Service

Has Context Injected

Base Class to communicate to the Framework

MediatorMediator

Mediator PatternMediator Pattern

View Communicate w/ FrameworkView Communicate w/ Framework

1 View per Mediator1 View per Mediator

Keeps Framework outKeeps Framework out

Not all views need MediatorsNot all views need Mediators

ServiceService

Retrieve and/or Send Data

Remote and/or Local Services

Parse Data to VO’s

Dispatch Success or Failure

Don’t Listen to Framework Events

Great Unit Test Candidates

Service PracticesService Practices

Doesn’t Store Data

Dispatch Event, has Data in It

Extend Actor

Store’s Data

Dispatch Event, NO Data in It

Extend EventDispatcher

Service Gotcha’sService Gotcha’s

Foreign DataForeign Data

FActoriesFActories::#1 Source of Bugs#1 Source of Bugs

Compiler Doesn’tCompiler Doesn’tHelp youHelp you

Manual TimeoutsManual Timeouts

Explode EarlyExplode Early

Model(s)Model(s)

Observer Pattern

Stores Global Data

Usually Wraps a VO

Doesn’t Listen for Framework Events

Dispatches Data Changes

Persists

Extends Actor

Model(s)Model(s)

Re-Factor to:

Data needs to persist

1> Mediator/Command Use Data

CommandCommand

Command Pattern

Controller Work

DRY

Re-Factor To

Doesn’t Listen to Framework Events

Command ExampleCommand Example

Login Form

Update Profile

Edit Server Data

User GesturesUser Gestures

Command’s are Usually User Gestures

Login, Logout, SaveUser

AddTag

Save

Command Pro’sCommand Pro’s

DRY

Centralized Logic

Data Problem = 2 places to look

1. Service

2. Command

Not Hunting Through Mediators

RAD (Rapid Application Development)

COmmand Con’sCOmmand Con’s

Code Bloat Early in Project

Handling Context Sensitive Data?...2 Commands

20 User Gestures = 40 Commands

Commands for Everything

AsyncCommandAsyncCommand

Asynchronous Command

Why?

Java/C/C++ Devs Invented Command Pattern

Blocking Language

Executes Server Request and Codepauses

AsyncCommandAsyncCommand

ActionScript is not Blocking

It is Asynchronous

Sometimes things need to wait

To wait, they need context

To have context, they need to exist

Commands die immediately

AsyncCommandAsyncCommand

AsyncCommand’s do not Block

You Control when they die

You can handle Server responseswith Context

React & Respond w/ Less code

fork to call other Commands

Gaia + RobotlegsGaia + Robotlegs

Gaia builds yer Site

Robotlegs Handles:

Business Logic

Application Logic

+

Why?Why?

Agency

Shields from Ever Changing client Visuals

View Changes, App/Biz Logic Doesn’t

Dev

Don’t Break Gaia’s modules

RAD & Scaleable

How?How?

Export SWC “Magic Checkbox”

Step by StepStep by Step

1. Setup Gaia Project

2. Register Context in Main.as

3. Page or child View implement Interface

4. Register Interface for Mediator

Rules n’ GotchasRules n’ Gotchas

Interface for Bridge Pattern

Gaia Pages use Bridge Pattern

Not all Gaia Pages need a Mediator

ConclusionsConclusions

Gaia is the Foundation for Site

Robotlegs Handles Biz & App Logic

Together, they Build a Scaleable & Flexible Site

Questions?Questions?

Jesse WardenJesse Warden

Twittah: jesterxlTwittah: jesterxl

jessewarden.comjessewarden.com