• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Advanced Server Integration with Data and Direct
 

Advanced Server Integration with Data and Direct

on

  • 1,901 views

Many Ext JS developers have yet to take advantage of Ext Direct to directly call server methods from the browser. During this session, you'll learn how to leverage Ext.Direct's existing functionality ...

Many Ext JS developers have yet to take advantage of Ext Direct to directly call server methods from the browser. During this session, you'll learn how to leverage Ext.Direct's existing functionality to make accessing your server data easier while eliminating common boiler-plate code. This session focuses on introductory material.

Statistics

Views

Total Views
1,901
Views on SlideShare
1,733
Embed Views
168

Actions

Likes
0
Downloads
100
Comments
0

4 Embeds 168

http://www.sencha.com 164
http://ontwikkel.expeur.nl 2
http://marketplace3.extjs.com 1
http://devs.sencha.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • Good afternoon everyone and thanks for joining us at SenchaCon. I&apos;m here today to tell you about Ext.Direct and how it can help you to write your applications quicker and with less effort. <br /> <br /> Ext.Direct allows you to seamlessly invoke server-side methods as if they were local to the browser. This lets you focus on the business aspects of your application rather than writing boiler plate Ajax code. Direct is capable of integrating with all server-side platforms and already has implementations for the most popular languages and frameworks in use today. <br /> <br /> First we&apos;re going to take a look at the most commonly used patterns to interact with your server via Ajax and compare it to using Direct. Then I&apos;ll show you how Direct works and how you can use both of these techniques in conjunction with one another so that you can gradually transition to using Direct. <br /> <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • So what if a server-side stack doesn&#x2019;t already exist for your language/framework? <br />
  • So what if a server-side stack doesn&#x2019;t already exist for your language/framework? <br />
  • So what if a server-side stack doesn&#x2019;t already exist for your language/framework? <br />
  • <br />
  • First see whats required in the API Descriptor <br />
  • First see whats required in the API Descriptor <br />
  • First see whats required in the API Descriptor <br />
  • First see whats required in the API Descriptor <br />
  • First see whats required in the API Descriptor <br />
  • First see whats required in the API Descriptor <br />
  • First see whats required in the API Descriptor <br />
  • First see whats required in the API Descriptor <br />
  • So lets see how we can remote some methods and generate a descriptor like this <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Advanced Server Integration with Data and Direct Advanced Server Integration with Data and Direct Presentation Transcript

  • Ext.Direct Lets you work faster by writing less code AARON CONRAN, SENCHA
  • Ext.Direct
  • Remoting
  • Remoting Expose server-side classes as if they were local to the client-side ContactList • addMember • addMemberToGroup • getGroups • getMembersByGroup • removeMember • removeMemberFromGroup
  • Lack of Boiler Plate automatically handled automatically handled
  • Lack of Boiler Plate • Ajax Request automatically • Invoke page handled • JSON encoding automatically • JSON decoding handled
  • Ext.Direct Invocation Invoke Direct Server Router Class Response
  • Invocation
  • Server-side agnostic
  • Server-side agnostic Implementations • PHP • Java • C# • Ruby • ColdFusion • Python • Perl
  • Benefits
  • Batching
  • Batching • Common slowdown of Ajax applications is chatty behavior • Multiple invocations batched together in single request
  • Centralized Router
  • Centralized Router • Improves Debugging • Allows centralized security policies
  • Compatible
  • Compatible • Direct and Ajax can be used together • Not an on or off switch; gradually can make the transition
  • How it works
  • Setting up Direct
  • Setting up Direct • Download and install a Server-side Stack • Configure remotable methods • Include API via script tag • Invoke client-side stubs
  • Server-side /* @remotable */ public function getMembersByGroup($group) { // grab members by group out of DB }
  • Server-side • Configure methods as remotable • Done via metadata, json, xml, or programmatic /* @remotable */ public function getMembersByGroup($group) { // grab members by group out of DB }
  • Client-side
  • Client-side • Client-side generates stub method based off of this configuration information • Including script tag (generates valid javascript)
  • Invocation
  • Magic
  • Magic When client-side stubs are invoked within a certain threshold of time, they are batched together and sent over an Ajax request Direct handles invoking the appropriate callback
  • Server-side Router Direct Router
  • Server-side Router • Routes requests to appropriate server-side method • Once configured, nothing you need to do as a developer. Direct Router
  • Implementing a Stack
  • Steps to create a Stack
  • Steps to create a Stack 1. Configure Determine how Classes/Methods will be exposed as remotable. 2. Generate API Descriptor Iterate over exposed classes and methods and create descriptor 3. Implement Router
  • Generated API Router URL Methods len and name Classes API Descriptor
  • Mark a method as Remotable C# Java CFML
  • CFML Stack
  • CFML Stack Let’s go over the basics of how to implement a stack
  • CFML Stack Get All Classes
  • CFML Stack Get Class MetaData
  • CFML Stack Check ExtDirect attributes
  • CFML Stack Output API Descriptor as JSON or JavaScript
  • CFML Stack Class Arguments Method Transaction Request (could be an array)
  • CFML Stack Raw Post Body (not form submit)
  • CFML Stack Invoke Class by Request
  • CFML Stack Encoding Response Matching Transactions
  • CFML Stack Exception Handling
  • Additional
  • Additional File Uploads - formHandler Error Handling - Debug Mode Long Running Requests Caching API Descriptors Caching Class Instances
  • Direct Specification
  • Direct Specification http://www.sencha.com/products/js/direct.php
  • Additional Resources
  • Additional Resources • Ext.Direct http://www.sencha.com/products/direct/ • Ext JS Direct Forums http://www.sencha.com/forum/forumdisplay.php?47- Ext.Direct • Ext.Direct Pack http://www.sencha.com/products/js/download.php Reference implementations: PHP, .NET, Ruby & CFML
  • Questions?