Ajax Best Practices

Given at Kansas City Developers Conference 2013

Transcript

1. Ajax Best Practices Garrett Pennington @gpennington
2. Customers who bought this item also bought Clean Javascript: Taming the Unicorn Patrick Delancy Testable Javascript James Kovacs Typescript: Beyond Javascript Jake Adams Graphic Design for Programmers Me!
4. jQuery Primer “write less, do more”
5. the jQuery object jQuery = $ (mostly) Array-like set of matched DOM elements jQuery function always returns a jQuery object
6. Basic Usage $(‘.foo’).css(‘color’, ‘#ff0000’);
7. Simple Performance Boosts Object caching: var foo = $(‘.foo’); foo.length Context $(‘.foo’, ‘div#content’).hide();
8. This or that What does this to in Javascript? Confusing Gets more confusing with jQuery
17. ajax Primer
18. History History ActiveX in IE5 XMLHttpRequest object later Browser Support Wasn’t drafted as web standard until 2006
19. Early Applications Outlook Web Access (2000) Gmail (2004) Google Maps (2005) Brought Desktop functionality to the web
20. Modern Applications Rdio Youtube Twitter Facebook EVERYTHING!!!one1!!
24. jQuery Ajax Advantages Takes care of x-browser quirks for you Simple API Disadvantage You’ll need to load jQuery Different jQuery methods (getJSON, load, etc-- all wrappers)
25. Best Practices post-your-car.com <--that doesn’t exist
26. Ajax request returns a string or DOM Common Practice
28. Ajax request returns JSON Best Practice
29. Ajax request returns JSON Return all properties of a record You can do more with it: HTML,Tables, SVG, etc Object primary keys are included
31. Ajax request returns JSON Create a boilerplate response that includes: Success Codes Human Readable Messages Request Time
33. Ajax request returns JSON What does ‘error’ mean? What if the query fails? What if the results are unexpected? What if the request isn’t authorized?
35. DOM elements are constructed in client Common Practice
36. DOM elements are constructed in client JSON provides us with all the data we need! Sometimes creating DOM elements is okay: Small values Upvotes, timestamps, table cell values
39. DOM elements are constructed in client Slow and complicated to construct client-side User could be viewing site on a potato Rendering markup in 2 places! Markup and JS are dependent on each other
41. Send back HTML in JSON Best Practice
42. Send back HTML in JSON Complex markup should be rendered server side JSON or HTML?
45. One-off ajax-only pages Common Practice
46. One-off ajax-only pages Mess of "pages" getCarsAjax.php addCarAjax.php /update/ Ajax is an afterthought Uni-taskers
47. Create an API! Best Practice
48. Create an API Private or public If its useful for you, then its useful for someone else Multi-use: Website Native apps Mashups
49. You need your REST Resource-Based Individual resources are identified in requests using URIs as resource identifiers. The resources themselves are conceptually separate from the representations that are returned to the client. For example, the server does not send its database, but rather, some HTML, XML or JSON that represents some database records expressed, for instance, in Finnish and encoded in UTF-8, depending on the details of the request and the server implementation. Manipulation of Resources Through Representations When a client holds a representation of a resource, including any metadata attached, it has enough information to modify or delete the resource on the server, provided it has permission to do so. Self-descriptive Messages Each message includes enough information to describe how to process the message. For example, which parser to invoke may be specified by an Internet media type (previously known as a MIME type). Responses also explicitly indicate their cache-ability. Hypermedia as the Engine of Application State (HATEOAS) Clients deliver state via body contents, query-string parameters, request headers and the requested URI (the resource name). Services deliver state to clients via body content, response codes, and response headers. This is technically referred-to as hypermedia (or hyperlinks within hypertext). www.restapitutorial.com/lessons/whatisrest.html
50. You need your REST Build an API that: Resource Based Verb is in HTTP Method GET, POST, UPDATE, DELETE Include in response the URI of the resource itself API delivers state in header: HTTP 201 - Created HTTP 204 - Deleted
53. Objects are added to the global object Common Practice
54. Objects are added to the global object Pollutes the global namespace No organization
55. Create a namespace Best Practice
56. Case Studie - Youtube Youtube yt yt.config_
57. Case Study - Amazon Amazon amzn amznJQ
58. Case Study - Google google .browser Array of values? Why?
60. Multiple instances of ajax code Common Practice
61. Multiple instances of ajax code One ajax method per resource, maybe more Mostly, the code looks the same Let's DRY off
62. One generic instance of ajax code Best Practice
63. One generic instance of ajax code One(ish) ajax method Return parsers in response Attach parser to namespaced object
65. Make the whole app with ajax Common Practice
66. Make the whole app with ajax Increased complexity Moves heavy lifting to the client
67. Switch between contexts with synchronous requests Best Practice
68. Switch between contexts with synchronous requests context/resource The web is still synchronous-- it's okay Your resource based url structure hints at context separations
70. Have an API Best Practice?
71. Your site IS the API Experimental Practice
72. Web 1.0 About Commerce How can we make money? Ebay Paypal Amazon
73. Web 2.0 Separation of Content and Style Maturation of web Social Media
74. Where are we now?
75. Somewhere between Web 3.0 and 5.0? All about Data Profitable (1.0) entities that Connect (2.0) us Now let’s do something interesting with all that data
76. “Mobile First” Design philosophy that starts with the most important, necessary content and enhances as the client's capabilities expand.
77. How about “Data First” Design philosophy that starts with data and expands to presentation if necessary. Serialized data by default. Maybe get a richer mimetype because of: User agent in header ?format=html
80. Development and Testing console.log(“Work, damn you!”);
81. Development Firebug > Inspector Tools The console object console.log console.dir console.time
82. Testing Selenium Phantom JS QUnit Mocha
83. Testing You can use your standard test runner to test ajax uses Check for “X-Requested-With” header = "XMLHttpRequest”
84. Thanks for listening! Questions? @gpennington