api prefetching - html5devconf - oct. 21, 2014

32
Front-End or Back-End Templating? Getting the best of both Jon Abrams (@JonathanAbrams)

Upload: jonabrams

Post on 02-Jul-2015

513 views

Category:

Engineering


1 download

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

Front-End or Back-End Templating?

Getting the best of both

Jon Abrams (@JonathanAbrams)

Page 2: API Prefetching - HTML5DevConf - Oct. 21, 2014

Server Side Rendering

Jon Abrams (@JonathanAbrams)

e.g. Most PHP, Rails, and Django apps

Page 3: API Prefetching - HTML5DevConf - Oct. 21, 2014

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

Client Side Rendering

Jon Abrams (@JonathanAbrams)

Loading…

Page 5: API Prefetching - HTML5DevConf - Oct. 21, 2014

Client Side Rendering

Jon Abrams (@JonathanAbrams)

e.g. AngularJS, Backbone, and EmberJS apps

Page 6: API Prefetching - HTML5DevConf - Oct. 21, 2014

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

Benefits: Server Side vs Client Side

Page 8: API Prefetching - HTML5DevConf - Oct. 21, 2014

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

API Pre-Fetching

Jon Abrams (@JonathanAbrams)

Page 10: API Prefetching - HTML5DevConf - Oct. 21, 2014

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

<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

Front-end rendering without API prefetching

Final Rendering Step Start Time: 607 msJon Abrams (@JonathanAbrams)

Page 13: API Prefetching - HTML5DevConf - Oct. 21, 2014

Front-end rendering with API prefetching

Final Rendering Step Start Time: 519 ms17% Faster

Page 14: API Prefetching - HTML5DevConf - Oct. 21, 2014

apiPrefetch.jshttps://github.com/JonAbrams/apiPrefetch.js

Jon Abrams (@JonathanAbrams)

Page 15: API Prefetching - HTML5DevConf - Oct. 21, 2014

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

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

Back-end Requirements for API Pre-fetching

Jon Abrams (@JonathanAbrams)

Page 18: API Prefetching - HTML5DevConf - Oct. 21, 2014

Escape ‘forward-slash’

1

Page 19: API Prefetching - HTML5DevConf - Oct. 21, 2014

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

Escape ‘forward-slash’

Jon Abrams (@JonathanAbrams)

JSON.stringify(obj).replace(/\//g, “\\/“);

Page 21: API Prefetching - HTML5DevConf - Oct. 21, 2014

Map your view URLs to your API URLs

2

Page 22: API Prefetching - HTML5DevConf - Oct. 21, 2014

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

Your front-end app needs to run in HTML5 mode

3

Page 24: API Prefetching - HTML5DevConf - Oct. 21, 2014

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

Your API request handlers need to be invokable by

the server itself.

4

Page 26: API Prefetching - HTML5DevConf - Oct. 21, 2014

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

Use cookies for authentication

5

Page 28: API Prefetching - HTML5DevConf - Oct. 21, 2014

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

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

Why Pre-fetch API calls but not static assets?

Page 31: API Prefetching - HTML5DevConf - Oct. 21, 2014

• 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

LinksapiPrefetch.js: github.com/JonAbrams/apiPrefetch.js

Synth: synthjs.com

Me on Twitter: twitter.com/JonathanAbrams