api prefetching - html5devconf - oct. 21, 2014
DESCRIPTION
Single page apps and Front-end rendering are all the rage. They have a lot of benefits, but one major downside is the need to make an API call once the page is first loaded. This presentation shows off a trick (and library) to easily fix that problem, regardless of front-end framework.TRANSCRIPT
![Page 1: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/1.jpg)
Front-End or Back-End Templating?
Getting the best of both
Jon Abrams (@JonathanAbrams)
![Page 2: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/2.jpg)
Server Side Rendering
Jon Abrams (@JonathanAbrams)
e.g. Most PHP, Rails, and Django apps
![Page 3: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/3.jpg)
Client Server
Goes to URL
Final HTML rendered
User interacts
Final HTML rendered
Entire web page reloaded
Jon Abrams (@JonathanAbrams)
Server Side Rendering
![Page 4: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/4.jpg)
Client Side Rendering
Jon Abrams (@JonathanAbrams)
Loading…
![Page 5: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/5.jpg)
Client Side Rendering
Jon Abrams (@JonathanAbrams)
e.g. AngularJS, Backbone, and EmberJS apps
![Page 6: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/6.jpg)
Client Server
Goes to URL
Returns layout HTMLBrowser processes JS
Initiates API call
Returns JSON data
User interacts Another API call
Returns JSON data
Jon Abrams (@JonathanAbrams)
Client Side Rendering
![Page 7: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/7.jpg)
Benefits: Server Side vs Client Side
![Page 8: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/8.jpg)
Server Side: • Returns data + layout
in one go round-trip. • Doesn’t require
JavaScript support from client.
• Has great frameworks like Rails and Django.
Benefits: Server Side vs Client Side
Client: • Web app uses same API
as mobile apps. • No refreshing while
using the app. • Has great frameworks
like Angular and Ember.
![Page 9: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/9.jpg)
API Pre-Fetching
Jon Abrams (@JonathanAbrams)
![Page 10: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/10.jpg)
Client Server
Goes to URL
User interacts
Returns layout HTML + JSON data
Returns JSON data
Jon Abrams (@JonathanAbrams)
API Pre-Fetching
![Page 11: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/11.jpg)
<script src="/jquery.js"></script> <script> window.apiPrefetchData = { "/api/posts": […], "/api/user": {…} }; </script> <script src="/main.js"></script>
API Pre-FetchingRendered index.html:
![Page 12: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/12.jpg)
Front-end rendering without API prefetching
Final Rendering Step Start Time: 607 msJon Abrams (@JonathanAbrams)
![Page 13: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/13.jpg)
Front-end rendering with API prefetching
Final Rendering Step Start Time: 519 ms17% Faster
![Page 14: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/14.jpg)
apiPrefetch.jshttps://github.com/JonAbrams/apiPrefetch.js
Jon Abrams (@JonathanAbrams)
![Page 15: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/15.jpg)
apiPrefetch.js
https://github.com/JonAbrams/apiPrefetch.js
<script src="/apiPrefetch.js"></script> <script src="/jquery.js"></script> <script> window.apiPrefetchData = { "/api/posts": […], "/api/user": {…} }; </script> <script src="/main.js"></script>
![Page 16: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/16.jpg)
apiPrefetch.js
https://github.com/JonAbrams/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>
Main.js:
![Page 17: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/17.jpg)
Back-end Requirements for API Pre-fetching
Jon Abrams (@JonathanAbrams)
![Page 18: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/18.jpg)
Escape ‘forward-slash’
1
![Page 19: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/19.jpg)
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)
![Page 20: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/20.jpg)
Escape ‘forward-slash’
Jon Abrams (@JonathanAbrams)
JSON.stringify(obj).replace(/\//g, “\\/“);
![Page 21: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/21.jpg)
Map your view URLs to your API URLs
2
![Page 22: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/22.jpg)
Map your view URLs to your API URLs
For example:mysite.com/tweets -> mysite.com/api/tweets
Jon Abrams (@JonathanAbrams)
![Page 23: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/23.jpg)
Your front-end app needs to run in HTML5 mode
3
![Page 24: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/24.jpg)
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 goodmysite.com/#stuff is bad
Jon Abrams (@JonathanAbrams)
![Page 25: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/25.jpg)
Your API request handlers need to be invokable by
the server itself.
4
![Page 26: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/26.jpg)
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)
![Page 27: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/27.jpg)
Use cookies for authentication
5
![Page 28: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/28.jpg)
Use cookies for authentication
Or else the server doesn’t know if the user can access the data on initial fetch.
Jon Abrams (@JonathanAbrams)
![Page 29: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/29.jpg)
Libraries / Frameworks• Front-end: apiPrefetch.js
• Node.js: Synth (synthjs.com)
• Rails: ?
• Java: ?
• Python: ?
• PHP: ?
Jon Abrams (@JonathanAbrams)
![Page 30: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/30.jpg)
Why Pre-fetch API calls but not static assets?
![Page 31: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/31.jpg)
• 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.
Why Pre-fetch API calls but not static assets?
Jon Abrams (@JonathanAbrams)
![Page 32: API Prefetching - HTML5DevConf - Oct. 21, 2014](https://reader033.vdocuments.mx/reader033/viewer/2022060121/55941cb61a28abe92b8b47cf/html5/thumbnails/32.jpg)
LinksapiPrefetch.js: github.com/JonAbrams/apiPrefetch.js
Synth: synthjs.com
Me on Twitter: twitter.com/JonathanAbrams