FlexFlex - tikalk.com · FlexFlex RIAvolutionize RIAvolutionize your your web appweb app Ilan Avigdor Ilan Avigdor "Tikal Knowledge ... Plugin vs. Browser

HostedbyTikal. www.tikalk.com Cost-BenefitOpenSource

IsraelIsraelJBJBossossUUserserGGrouproupSessionSession0909

FlexFlexRIAvolutionizeyourwebappRIAvolutionizeyourwebapp

IlanAvigdorIlanAvigdor"TikalKnowledge""TikalKnowledge"[email protected]@Tikalk.com

Hosted by Tikal 2 www.tikalk.com

Israel

JBUG

AgendaAgenda

Introduction Architecture

»Client+Demo

»Communication

»Server Conclusions


Israel

JBUG

RIA ConceptsRIA Concepts

DesktopRich,InternetReach

Applicationvs.Site

Pluginvs.Browser

Runsonclientmachine


Israel

JBUG

FLEX ConceptsFLEX Concepts

Layeronflashfordevelopers

ActionScript3.0

CompiledforAVM2


Israel

JBUG

Advantages - RIAAdvantages - RIA

ForUsers

»Desktop-likeexperience

»Responsiveness

»Cross-browser

»Statefull(nounnecessarypage

reloads)


Israel

JBUG

Advantages - RIAAdvantages - RIA

ForDevelopers

»OOP–Webforthenon-webbers

»Statefull

»Maintenance-Onecodebaseforweb

anddesktop

»Effortlessdeployment


Israel

JBUG

Disadvantages – RIADisadvantages – RIA

Plugindependency

Initialloadandinitialization

Desktop-like

»Memoryleaks

»CPUbottlenecks


Israel

JBUG

Advantages – Adobe FLEXAdvantages – Adobe FLEX

Capabilities

Ubiquity

DeploymentFlexibility

ProvenTechnology

Expressiveness

Openness

Innovation


Israel

JBUG

Disadvantages – Adobe FlexDisadvantages – Adobe Flex

LimitedtoFlashplayerabilities

SWFisproprietary

PopUpwindowslimitedtobrowsersize

MultiThreadingnotsupported

Searchengines–Not


Israel

JBUG

ArchitectureArchitecture


Israel

JBUG

ArchitectureArchitecture

Client

Communicationwithserver

Server


Israel

JBUG

Flex Client FeaturesFlex Client Features

RichComponentLibrary Displaylistprogramming MXML EventModel Effects Styling&skinning Binding Charting(notincluded) Constraintbasedlayout

http://examples.adobe.com/flex3/componentexplorer/explorer.html


Israel

JBUG

Flex Client Features Flex Client Features cont.cont.

Drag&Drop Historymanagement Printing Communicationwithwrapper Sharedobject Highlycustomizable Richmediaintegration Modularity


Israel

JBUG

Flex Visual ComponentsFlex Visual Components

General Buttons Date Loaders Menu Text Containers Repeaters

http://examples.adobe.com/flex3/componentexplorer/explorer.html


Israel

JBUG

Flex ComponentsFlex Components

Print Validators Formatters Effects States Transitions Datavizualization

» Charts

» DataGrid

» OLAPDataGrid


Israel

JBUG

Display ProgrammingDisplay Programming


Israel

JBUG

MXMLMXML

<mx:Application ><mx:Button id="button" />

/mx:Application>

Equalspublic class Example extends Application

{internal var button:Button;

public function Example() {super();button = new Button();addChild(button);

}


Israel

JBUG

Flex Event ModelFlex Event Model


Israel

JBUG

Flex BindingFlex Binding

<mx:Application> <mx:TextInputid="src"/> <mx:Textid="dest" text="{src.text.toUpperCase()}"/></mx:Application>


Israel

JBUG ArchitectureArchitecture

Client – MVC ArchitectureClient – MVC Architecture


Israel

JBUG

Why?

»Out-Of-The-BoxMVCframework

»Crossprojects

»Betterscalability

Which?

»Cairngorm

»PureMVC

ArchitectureFlex Frameworks


Israel

JBUG

DEMO


Israel

JBUG

Protocols

CommunicationPatterns

»RPC

»DataPush

ArchitectureCommunication With Server


Israel

JBUG

HTTP

SOAP

XML

Binary(POP3,SMTP,IMAP,andNNTP)

RTMP

JSON

AMF3

Communication With ServerProtocols


Israel

JBUG


Communication with ServerCommunication with ServerProtocols benchmarkProtocols benchmark


Israel

JBUG

Fluorine-.Net

Red5–java

Cinnamon–java

SabreAMF–PHP5

Rubyamf–Rails

PyAMF-Python

Communication With ServerAMF3 ImplementationsAMF3 Implementations


Israel

JBUG

RequestResponse

»HTTP

»WebServices

»Remoting

DataPush

»Sockets-Bidirectionalconnection

»Messaging-Pub/Sub

Communication With ServerCommunication PatternsCommunication Patterns


Israel

JBUG Communication with ServerCommunication with Server

HTTPHTTP

<mx:HTTPService url="http://localhost/req.php"method="POST">

<mx:request> <username>UserName</username><address>Address</address>

</mx:request></mx:HTTPService>

http://localhost/req.php


Israel


Web ServiceWeb Service

<mx:WebService id="userReq" wsdl=”http://Localhost/users.cfc?wsdl">

<mx:operation name="returnRecords" result="returnRecordsHandler()" />

<mx:operation name="insertRec"result="insertCFCHandler()" />

</mx:WebService>

private function clickHandler():void { userReq.insertRec(n.text,address.text); }


Israel


RemotingRemoting

<mx:RemoteObject id="userReq"destination="ColdFusion"source="flexapp.returnusers">

<mx:method name="insertRecord"result="insertHandler()"/>

</mx:RemoteObject>

private function Onclick():void{userReq.insertRecord( name.text,

address.text); }


Israel


SocketsSockets<mx:Application >

private function Onconnect(event:Event):void{

trace("Connected");}

private function Ondata(event:DataEvent){trace ("data arrived" + event.data);}

<net:XMLSocket id="sock"connect="Onconnect()" data="OnData()"/>

<mx:Buttonclick="{sock.connect('localhost',4444)}"/>

</mx:Application>


Israel


Messaging RegistrationMessaging Registration<mx:Producer id="chat"

destination="MyTransientTopic" /> <mx:Consumer id="chatSubscriber"

destination="MyTransientTopic"

message="receive(event)" />


Israel


Messaging Send/ReceiveMessaging Send/Receiveprivate function sendChatMessage():void {

msg = new AsyncMessage();

msg.body = input.text;

chat.send(msg);

}

receive(event:MessageEvent):void{

var msg:AsyncMessage = event.message as AsyncMessage; output.text += msg.body ;

}


Israel

JBUG

LiveCycleES–J2EE

LiveCycleDS–J2EE

BlazeDS(opensource)–J2EE

Granite(opensource)–J2EE

WebOrb(opensource)

».NET,J2EE,ROR,PHP

ArchitectureArchitectureServer side PlatformsServer side Platforms


Israel

JBUG Server side PlatformsServer side Platforms

LiveCycle ESLiveCycle ES


Israel

JBUG Server side PlatformsServer side Platforms

LiveCycle DS vs. BlazeDSLiveCycle DS vs. BlazeDS

LiveCycle DS ExpressLiveCycle DS Express LiveCycle DS CommunityLiveCycle DS Community


Israel

JBUG

.Net»Remoting,DataManagementMessaging,RTMP,AMF

Java»Remoting,DataManagementMessaging

Rubi»Remoting

PHP»Remoting

Server side PlatformsServer side PlatformsWebOrbWebOrb


Israel

JBUG

Stable(Productionready)»AMF3»Ejb3services(sessionbeans)»Ejb3persistence(Hibernate)withlazy-loadingsupport»SpringserviceswithAcegisecurity»Pojoservices

Experimental(beta)»Datapush(Gravity)»Seamservices»Guice/Warpservices

Server side PlatformsServer side PlatformsGraniteGranite


Israel

JBUG

QA?


Israel

JBUG

Appendix


Israel

JBUG Architecture

Client – Cairngorm Architecture


Israel

JBUG Architecture

Client – PureMVC Architecture


Israel

JBUG

DevelopedandusedbyAdobeConsulting

Pros

»defacto-standardformostorganizations

»Easytolearn

Flex frameworksCairngorm

http://weblogs.macromedia.com/amcleod/archives/2007/05/cairngorm_22_-_2.cfm


Israel

JBUG

ConsCons

»Extensiveuseofsingletons

»Doesnotofferanelegantwayforits

controllertocommunicatebacktoits

views(workaroundexists)

»Problematicwhenusingmodules.

Flex frameworksCairngorm

http://flexexamples.blogspot.com/2007/12/can-cairngorm-and-modules-play-nice_15.html


Israel

JBUG

NoFlexdependencyorawareness Pros»CleanerseparationofviewandVos»Considered"better"

Cons»NoServiceLocator-liketool»NoModel-ViewDataBinding»Requiresmorework»Morecomplex

Flex frameworksPureMVC

Documents

FlexFlex - tikalk.com · FlexFlex RIAvolutionize RIAvolutionize your your web appweb app Ilan Avigdor Ilan Avigdor "Tikal Knowledge ... Plugin vs. Browser