Ext JS - Direct Bridging The Gap A DMSBT Presentation By Timothy Chandler

Ext JS – An Introduction Ext JS is a cross-browser JavaScript library for building rich internet applications. A Mature Framework. ▫3 Years Old. ▫Current Version is 3.0RC1. Supports all major browsers. Is highly extensible. Includes lots of off-the-shelf components and widgets. Ext JS - Direct

Introducing Ext.Direct Ext.Direct is a new package in Ext JS 3.0 Ext.Direct is JSONRPC on steroids. It aims to: ▫Bridge the gap between the client and the server. ▫Solve a lot of headaches involved in creating RIA’s such as:  Validation.  Code Structure – Separation of Logic Trees. ▫Streamline RIA development by:  Enabling developers to write less code.  Simplifying the Client to Server communication. Ext JS - Direct

Direct Providers Ext.Direct uses providers to handle communication between client and server. Providers facilitate in providing a seamless bridge between client and server. Ext JS - Direct

Direct Providers - JSON Provides a basis for JSON requests to the Direct Server. Good for extending. Can create other providers from this one. Ext JS - Direct

Direct Providers - Remoting It is an RPC bridge for method calling. Execute server side methods seamlessly with client-side stubs Ext JS - Direct

Direct Providers - Polling Bridges to a specific address on the server. Calls the address periodically. ▫Timing is controlled with the interval configuration setting. Ext JS - Direct

The Direct Store Provides a way of cleanly handling persistent data to and from the server. Can be used as a basis for an Active Record mechanism. Can be used for maintaining application state over sessions. Ext JS - Direct

The Direct Server Ext.Direct is cross-platform. Server language/platform doesn’t matter. Should be hot-swappable. Has to conform to the Ext.Direct specification. Ext JS - Direct

Existing Direct Server Implementations PHP Java.NET ColdFusion Ruby Perl Ext JS - Direct

Direct Server Specification - Required Components Configuration ▫Specifies class/module and method exposure. ▫Server Metadata. ▫Can be:  Programmatic  JSON  XML  Metadata Ext JS - Direct

Direct Server Specification - Required Components API ▫Generates a client-side descriptor based on the configuration. ▫Descriptor output can be:  Pure Javascript  Use a tag and point it to the API address.  JSON Ext JS - Direct

Direct Server Specification - Required Components Router ▫Routes requests from the client to the appropriate classes/modules and their methods. Ext JS - Direct

Direct Server Specification - Configuration - Programmatic Use the native language. Ext JS - Direct

Direct Server Specification - Configuration - Programmatic Ext JS - Direct Listing 1 – Programmatic Configuration - PHP $server=array( 'providers'=>array ( array ( 'type=>'remoting', 'handler' =>'updater', 'interval' =>1000 ), array ( 'type‘ =>'polling', 'namespace’=>'chat', 'modules‘=>array ( array('name'=>'join','args'=>0), array('name'=>'setName','args'=>1), array('name'=>'send','args'=>1) ) ); $server=array( 'providers'=>array ( array ( 'type=>'remoting', 'handler' =>'updater', 'interval' =>1000 ), array ( 'type‘ =>'polling', 'namespace’=>'chat', 'modules‘=>array ( array('name'=>'join','args'=>0), array('name'=>'setName','args'=>1), array('name'=>'send','args'=>1) ) );

Direct Server Specification - Configuration - JSON Use tools from the native language to read a JSON configuration file. Ext JS - Direct

Direct Server Specification - Configuration - JSON Ext JS - Direct Listing 2 – JSON Configuration {providers: [ { type: 'remoting', handler: 'updater', interval: 1000 }, { type: 'polling', namespace: 'chat', modules: [ {'name':'join','args':0}, {'name':'setName','args':1}, {'name':'send','args':1} ] } ]} {providers: [ { type: 'remoting', handler: 'updater', interval: 1000 }, { type: 'polling', namespace: 'chat', modules: [ {'name':'join','args':0}, {'name':'setName','args':1}, {'name':'send','args':1} ] } ]}

Direct Server Specification - Configuration - XML Use tools from the native language to read a XML configuration file. Ext JS - Direct

Direct Server Specification - Configuration - XML Ext JS - Direct Listing 3 – XML Configuration

Direct Server Specification - Configuration - Metadata Some languages require less information because they are able to dynamically introspect methods and classes at runtime. Ext JS - Direct

Direct Server Specification - Configuration - Metadata Ext JS - Direct Listing 4 – Metadata Configuration

Direct Server Specification - API Uses the configuration to generate output which the client can then bind to Ext.Direct. Ext.Direct will create client-side versions of bound methods. ▫Become native JavaScript function calls. ▫Are always asynchronous. ▫Returns are handled by providing a callback function as the last argument of the function call. Ext JS - Direct

Direct Server Specification - API Ext JS - Direct Listing 5 – API Output Ext.namespace('Ext.app'); Ext.app.DIRECT_API= [{ "type":"polling", "url":" "interval":1000 },{ "type":"remoting", "url":" "namespace":"Ext.app.chat", "actions":{ "main": [ {"name":"join","len":"0"}, {"name":"setName","len":"1"}, {"name":"send","len":"1"} ] } }]; Ext.namespace('Ext.app'); Ext.app.DIRECT_API= [{ "type":"polling", "url":" "interval":1000 },{ "type":"remoting", "url":" "namespace":"Ext.app.chat", "actions":{ "main": [ {"name":"join","len":"0"}, {"name":"setName","len":"1"}, {"name":"send","len":"1"} ] } }];

Direct Server Specification - Router Must accept two different types of requests. ▫JSON-Encoded Raw HTTP Post. ▫Form Post. Must handle file uploads when using form posts. JSON-Encoded Raw HTTP Posts must be decoded. Must accept batched requests. Must dispatch batch responses. Responses must be JSON encoded. Ext JS - Direct

Direct Server Specification - Router - Response Types Event ▫A JSON response containing two additional keys used to fire an event through the client. These keys are:  name – The name of the event to fire.  data – Data to be sent back with the response.  This is available as one of the event handler’s arguments.  This data is not decoded when it reaches the client. Do it manually if the data is JSON. Ext JS - Direct

Direct Server Specification - Router - Response Types RPC ▫A JSON response containing an additional ‘result’ key. Ext JS - Direct

Direct Server Specification - Router - Response Types Exception ▫A JSON response containing two additional keys.  message – The error message.  where – Details regarding where the error occurred. ▫Exceptions should only be thrown if the server is in debug mode. ▫Exceptions should be suppressed if the server is NOT in debug mode.  Output should also be destroyed before the exception handler ends, resulting in an empty response.  This can only enhance security. Ext JS - Direct

Direct Server Specification - Router – Other Response keys tid ▫The transaction ID of the request that has just been processed. action ▫The class/module of the request that has just been processed. method ▫The method of the request that has just been processed. Ext JS - Direct

Ext.Direct By Example Refer to external example. ▫URL: Ext JS - Direct

Questions? Ext JS - Direct

Thank You!