![API Pre-Fetching
Rendered index.html:
<script src="/jquery.js"></script>
<script>
window.apiPrefetchData = {
"/api/posts": […],
"/api/user": {…}
};
</script>
<script src="/main.js"></script>](https://image.slidesharecdn.com/2014-10-20-jonabrams-html5devconf-141021193454-conversion-gate02/85/API-Prefetching-HTML5DevConf-Oct-21-2014-11-320.jpg)
![apiPrefetch.js
<script src="/apiPrefetch.js"></script>
<script src="/jquery.js"></script>
<script>
window.apiPrefetchData = {
"/api/posts": […],
"/api/user": {…}
https://github.com/JonAbrams/apiPrefetch.js
};
</script>
<script src="/main.js"></script>](https://image.slidesharecdn.com/2014-10-20-jonabrams-html5devconf-141021193454-conversion-gate02/85/API-Prefetching-HTML5DevConf-Oct-21-2014-15-320.jpg)
API Prefetching - HTML5DevConf - Oct. 21, 2014
- 1. Front-End or Back-End Templating? Getting the best of both Jon Abrams (@JonathanAbrams)
- 2. Server Side Rendering e.g. Most PHP, Rails, and Django apps Jon Abrams (@JonathanAbrams)
- 3. Server Side Rendering Client Server Goes to URL Final HTML rendered User interacts Final HTML rendered Entire web page reloaded Jon Abrams (@JonathanAbrams)
- 4. Client Side Rendering Jon Abrams (@JonathanAbrams) Loading…
- 5. Client Side Rendering e.g. AngularJS, Backbone, and EmberJS apps Jon Abrams (@JonathanAbrams)
- 6. Client Side Rendering Client Server Goes to URL Returns layout HTML Browser processes JS Initiates API call Returns JSON data User interacts Another API call Returns JSON data Jon Abrams (@JonathanAbrams)
- 7. Benefits: Server Side vs Client Side
- 8. Benefits: Server Side vs Client Side Server Side: • Returns data + layout in one go round-trip. • Doesn’t require JavaScript support from client. • Has great frameworks like Rails and Django. Client: • Web app uses same API as mobile apps. • No refreshing while using the app. • Has great frameworks like Angular and Ember.
- 9. API Pre-Fetching Jon Abrams (@JonathanAbrams)
- 10. API Pre-Fetching Client Server Goes to URL User interacts Returns layout HTML + JSON data Returns JSON data Jon Abrams (@JonathanAbrams)
- 11. API Pre-Fetching Rendered index.html: <script src="/jquery.js"></script> <script> window.apiPrefetchData = { "/api/posts": […], "/api/user": {…} }; </script> <script src="/main.js"></script>
- 12. Front-end rendering without API prefetching Final Rendering Step Start Time: 607 ms Jon Abrams (@JonathanAbrams)
- 13. Front-end rendering with API prefetching Final Rendering Step Start Time: 519 ms 17% Faster
- 14. apiPrefetch.js https://github.com/JonAbrams/apiPrefetch.js Jon Abrams (@JonathanAbrams)
- 15. apiPrefetch.js <script src="/apiPrefetch.js"></script> <script src="/jquery.js"></script> <script> window.apiPrefetchData = { "/api/posts": […], "/api/user": {…} https://github.com/JonAbrams/apiPrefetch.js }; </script> <script src="/main.js"></script>
- 16. apiPrefetch.js <script> $.getJSON('/api/posts') // gets prefetched data $.getJSON('/api/posts') // hits server $.getJSON('/api/stuff') // uses prefetched data $.post('/api/user') // hits server $.getJSON('/api/user') // uses prefetched data </script> https://github.com/JonAbrams/apiPrefetch.js Main.js:
- 17. Back-end Requirements for API Pre-fetching Jon Abrams (@JonathanAbrams)
- 19. Escape ‘forward-slash’ Or else users can inject code. "</script><script>alert(“oh no!”)</script>” To make it safe: </script><script>Still a harmless string</script> Jon Abrams (@JonathanAbrams)
- 20. Escape ‘forward-slash’ JSON.stringify(obj).replace(///g, “/“); Jon Abrams (@JonathanAbrams)
- 21. 2 Map your view URLs to your API URLs
- 22. Map your view URLs to your API URLs For example: mysite.com/tweets -> mysite.com/api/tweets Jon Abrams (@JonathanAbrams)
- 23. 3 Your front-end app needs to run in HTML5 mode
- 24. Your front-end app needs to run in HTML5 mode The server is not sent anything after the # character in a URL. e.g. mysite.com/stuff is good mysite.com/#stuff is bad Jon Abrams (@JonathanAbrams)
- 25. 4 Your API request handlers need to be invokable by the server itself.
- 26. Your API request handlers need to be invokable by the server itself. The same code used to handle incoming API requests need to be invoked by your view request handler too. Jon Abrams (@JonathanAbrams)
- 27. 5 Use cookies for authentication
- 28. Use cookies for authentication Or else the server doesn’t know if the user can access the data on initial fetch. Jon Abrams (@JonathanAbrams)
- 29. Libraries / Frameworks • Front-end: apiPrefetch.js • Node.js: Synth (synthjs.com) • Rails: ? • Java: ? • Python: ? • PHP: ? Jon Abrams (@JonathanAbrams)
- 30. Why Pre-fetch API calls but not static assets?
- 31. Why Pre-fetch API calls but not static assets? • Assets are already cached by the browser. • Assets can be served from a CDN. • Can be fetched (or even pre-fetched) before the JS is executed. • Assets can be sent down with the initial response when HTTP 2.0 is a thing. Jon Abrams (@JonathanAbrams)
- 32. Links apiPrefetch.js: github.com/JonAbrams/apiPrefetch.js Synth: synthjs.com Me on Twitter: twitter.com/JonathanAbrams