Downloaded 12 times
![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 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/75/API-Prefetching-HTML5DevConf-Oct-21-2014-11-2048.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/75/API-Prefetching-HTML5DevConf-Oct-21-2014-15-2048.jpg)
More Related Content
Similar to API Prefetching - HTML5DevConf - Oct. 21, 2014
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 JonAbrams (@JonathanAbrams)
- 10. API Pre-Fetching ClientServer Goes to URL User interacts Returns layout HTML + JSON data Returns JSON data Jon Abrams (@JonathanAbrams)
- 11. API Pre-Fetching Renderedindex.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 JonAbrams (@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)
- 18.
- 19. Escape ‘forward-slash’ Orelse 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 yourview URLs to your API URLs
- 22. Map your viewURLs to your API URLs For example: mysite.com/tweets -> mysite.com/api/tweets Jon Abrams (@JonathanAbrams)
- 23. 3 Your front-endapp needs to run in HTML5 mode
- 24. Your front-end appneeds 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 APIrequest handlers need to be invokable by the server itself.
- 26. Your API requesthandlers 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 cookiesfor 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 APIcalls but not static assets?
- 31. Why Pre-fetch APIcalls 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