Ajax, Pjax and Beyond

If you've had even a passing experience with developing websites you will no doubt have used Ajax to make in-page requests to a web server, and then handling its responses to make some change(s) to the current page. But, if you're not careful, you can end up with code that becomes heavily reliant on the HTML front-end document structure, making development, debugging and continued maintenance increasingly difficult.

Current web technologies (such as Web components, React and Vue.js) tend to be geared towards retrieving only data from the server and then processing them on the client in order to update or re-construct view(s) of that data. Individual portions of a web page are isolated from one another, communicating only via data-binding or events. However, there's a learning curve to incorporating these technologies, and in complex cases, one's entire application architecture (including how the front-end is constructed and rendered) will be driven by the implementation details. There is another way.

This talk will outline my experiences of generalising some alternative but well-known techniques in order to develop a complex web application without these mental overheads, so it's actually fun and rewarding.

Transcript

1. Ajax, Pjax and Beyond A personal [technical] journey Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 1
2. What isn't Ajax? Web pages Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 2
3. What is Ajax? Doing something on a web server without interrupting what a user is doing Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 3
4. Ajax Example Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 4
5. Ajax Example Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 5
6. Demo Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 6
7. Disadvantages Website becomes littered with little bits of code that have to: 4 detect action performed by user 4 construct and send request to server 4 interpret response and perform updates Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 7
8. Lots of this.. Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 8
9. Introducing Pjax Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 9
10. How does it work? 4 make Ajax request to server 4 server knows what content is required 4 server responds with new content 4 Pjax puts new content in correct place Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 10
11. Magic code Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 11
12. Example Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 12
13. However.. 4 server needs to detect a Pjax request (X-PJAX header) 4 server still needs to send back correct contents for the requested HTML element Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 13
14. Solutions? Laravel: https://github.com/spatie/laravel-pjax Takes entire response from server (i.e. full page) and filters out the HTML element required Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 14
15. Problems with Pjax 4 Difficult to intercept requests and add extra data 4 Can only update one HTML element Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 15
16. Example Problem Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 16
17. Solutions? Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 17
18. Do modern JavaScript frameworks help? 4 Angular, React, Vue.js, Polymer... 4 Event-binding 4 Data-binding Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 18
19. But.. Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 19
20. But.. Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 20
21. And.. Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 21
22. But.. Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 22
23. Then.. Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 23
24. But.. Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 24
25. Hooray..? Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 25
26. But.. Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 26
27. Hooray..? Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 27
28. And-then-your-favourite-framework- decides-that-its-next-version-will- have-lots-of-breaking-changes-and- support-for-the-current-version-will- be-dropped-even-before-you-expect- to-ship-your-app Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 28
29. I want something that's 4 Easy to understand 4 Extensible 4 Maintainable Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 29
30. Thinks back to 2006 for inspiration.. Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 30
31. Thinks back to 2006 for inspiration.. Rails RJS Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 31
32. Remote JavaScript1 1 http://slash7.com/assets/2006/10/8/RJS-Demistified_Amy-Hoy-slash7_1.pdf Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 32
33. Remote JavaScript1 Easy to understand 1 http://slash7.com/assets/2006/10/8/RJS-Demistified_Amy-Hoy-slash7_1.pdf Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 33
34. Thinks forward to 2013 for inspiration.. Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 34
35. Thinks forward to 2013 for inspiration.. Server generated JavaScript responses https://signalvnoise.com/posts/3697-server-generated- javascript-responses 4 Used in Basecamp Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 35
36. Server generated responses 4 form is submitted via a Ajax-powered form 4 server creates or updates something 4 server generates a JavaScript response that includes updated HTML 4 client evaluates the JavaScript returned by the server, which then updates the page Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 36
37. Advantages 4 Re-use code 4 Less computational power required on the client 4 Easy-to-follow execution flow Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 37
38. Let's do this! Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 38
39. What does an application typically do when an Ajax request is made: 4 Creates some HTML (on server) 4 Updates some HTML element (in browser) 4 Runs some Javascript (in browser) Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 39
40. Suppose we instruct web browser via JSON? Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 40
41. Suppose we instruct web browser via JSON? { html: "<div id="#task-list">Some new task list</div>", replaceSelector: "#task-list", script: "$('#new-task').highlight();" } Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 41
42. Suppose we need to do multiple updates Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 42
43. Suppose we need to do multiple updates 4 Show success banner 4 Update bookmarks list 4 Update bookmark button Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 43
44. Ordered Collection { collection: [ 0: { html: "<div id="#banner">Bookmark added</div>", replaceSelector: "#banner" }, 1: { html: "<div id="#sidebar-bookmarks">Bookmarks list</div>", replaceSelector: "#sidebar-bookmarks" }, 2: { html: "<div id="#bookmark-button">Unbookmark</div>", replaceSelector: "#bookmark-button" }, ] } Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 44
45. On Client: Single response Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 45
46. On Client: Multiple responses Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 46
47. On Server Write code the way you want it to read Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 47
48. On Server Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 48
49. Let's look at some code! Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 49
50. Choose from: 4 Hooking up Ajax requests automatically 4 Coping with Ajax and non-Ajax requests 4 Extending the system 4 Updating URLs in the browser Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 50
51. Data Attributes Ajax, Pjax and Beyond, @ninthspace, 17 May 2016 51