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.

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)

18. 1
Escape ‘forward-slash’

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