Advanced Server Integration with Data and Direct

2,144 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,144
On SlideShare
0
From Embeds
0
Number of Embeds
169
Actions
Shares
0
Downloads
108
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

  • Good afternoon everyone and thanks for joining us at SenchaCon. I'm here today to tell you about Ext.Direct and how it can help you to write your applications quicker and with less effort.

    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.

    First we'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'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.
















































  • So what if a server-side stack doesn’t already exist for your language/framework?
  • So what if a server-side stack doesn’t already exist for your language/framework?
  • So what if a server-side stack doesn’t already exist for your language/framework?

  • First see whats required in the API Descriptor
  • First see whats required in the API Descriptor
  • First see whats required in the API Descriptor
  • First see whats required in the API Descriptor
  • First see whats required in the API Descriptor
  • First see whats required in the API Descriptor
  • First see whats required in the API Descriptor
  • First see whats required in the API Descriptor
  • So lets see how we can remote some methods and generate a descriptor like this

































  • Advanced Server Integration with Data and Direct

    1. 1. Ext.Direct Lets you work faster by writing less code AARON CONRAN, SENCHA
    2. 2. Ext.Direct
    3. 3. Remoting
    4. 4. Remoting Expose server-side classes as if they were local to the client-side ContactList • addMember • addMemberToGroup • getGroups • getMembersByGroup • removeMember • removeMemberFromGroup
    5. 5. Lack of Boiler Plate automatically handled automatically handled
    6. 6. Lack of Boiler Plate • Ajax Request automatically • Invoke page handled • JSON encoding automatically • JSON decoding handled
    7. 7. Ext.Direct Invocation Invoke Direct Server Router Class Response
    8. 8. Invocation
    9. 9. Server-side agnostic
    10. 10. Server-side agnostic Implementations • PHP • Java • C# • Ruby • ColdFusion • Python • Perl
    11. 11. Benefits
    12. 12. Batching
    13. 13. Batching • Common slowdown of Ajax applications is chatty behavior • Multiple invocations batched together in single request
    14. 14. Centralized Router
    15. 15. Centralized Router • Improves Debugging • Allows centralized security policies
    16. 16. Compatible
    17. 17. Compatible • Direct and Ajax can be used together • Not an on or off switch; gradually can make the transition
    18. 18. How it works
    19. 19. Setting up Direct
    20. 20. Setting up Direct • Download and install a Server-side Stack • Configure remotable methods • Include API via script tag • Invoke client-side stubs
    21. 21. Server-side /* @remotable */ public function getMembersByGroup($group) { // grab members by group out of DB }
    22. 22. 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 }
    23. 23. Client-side
    24. 24. Client-side • Client-side generates stub method based off of this configuration information • Including script tag (generates valid javascript)
    25. 25. Invocation
    26. 26. Magic
    27. 27. 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
    28. 28. Server-side Router Direct Router
    29. 29. Server-side Router • Routes requests to appropriate server-side method • Once configured, nothing you need to do as a developer. Direct Router
    30. 30. Implementing a Stack
    31. 31. Steps to create a Stack
    32. 32. 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
    33. 33. Generated API Router URL Methods len and name Classes API Descriptor
    34. 34. Mark a method as Remotable C# Java CFML
    35. 35. CFML Stack
    36. 36. CFML Stack Let’s go over the basics of how to implement a stack
    37. 37. CFML Stack Get All Classes
    38. 38. CFML Stack Get Class MetaData
    39. 39. CFML Stack Check ExtDirect attributes
    40. 40. CFML Stack Output API Descriptor as JSON or JavaScript
    41. 41. CFML Stack Class Arguments Method Transaction Request (could be an array)
    42. 42. CFML Stack Raw Post Body (not form submit)
    43. 43. CFML Stack Invoke Class by Request
    44. 44. CFML Stack Encoding Response Matching Transactions
    45. 45. CFML Stack Exception Handling
    46. 46. Additional
    47. 47. Additional File Uploads - formHandler Error Handling - Debug Mode Long Running Requests Caching API Descriptors Caching Class Instances
    48. 48. Direct Specification
    49. 49. Direct Specification http://www.sencha.com/products/js/direct.php
    50. 50. Additional Resources
    51. 51. 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
    52. 52. Questions?

    ×