How to scale an SPA? @ AmsterdamJS 2018

I'm going to tell you a secret. If you are building an SPA, you can take advantage of optimisations that give you epic scalability, with super low latencies at a fraction of the cost. To understand the secret, I'll need to teach you a few things such as the actors involved in transferring data from your server to the browser; and about the ancient technology called 'serverless' which you might be surprised to learn is something you've already been using for years. By the end, you'll know the secret of how to architect an SPA for scale without breaking the bank.

Transcript

1. How to scale an SPA? @jawache AmsterdamJS 2018
3. https://www.npr.org/podcasts/510289/planet-money @jawache
4. @jawache
5. Toyota’s NYSE:TM stock price on January 5th 2017 https://medium.com/@maxbraun/this-machine-turns-trump-tweets-into-planned-parenthood-donations-4ece8301e722 @jawache
6. @jawache https://www.npr.org/podcasts/510289/planet-money
7. @jawache https://www.npr.org/podcasts/510289/planet-money
8. $61
9. View API Engine Twitter Feed @jawache
10. Asim Hussain @jawache codecraft.tv microsoft.com
11. https://aka.ms/jawache-cda @jawache
12. @jawache
13. View API Engine Twitter Feed @jawache
14. Hardware OS Framework On Premise @jawache
15. Hardware OS Framework IaaS @jawache
16. Hardware OS Framework PaaS @jawache
17. Google App Engine Heroku Amazon Beanstalk Azure App Services
18. View API Engine Twitter Feed @jawache
19. API Engine Twitter Feed View @jawache
20. What is an SPA? @jawache
21. Only a single page is returned from the server @jawache @jawache
22. @jawache
23. View API Engine Twitter Feed
24. API Engine Twitter Feed View ? @jawache
25. API Engine Twitter Feed View @jawache
26. Static vs Dynamic @jawache
27. Quiz @jawache
28. • example.com/logo.jpg • example.com • example.com/profile/ Quiz @jawache
29. Is an SPA dynamic or static? @jawache
30. SPAs are static @jawache
31. Caching @jawache
32. Server Caching @jawache
33. Server CDN Proxy Caching @jawache
34. Server CDN Proxy Caching @jawache
35. Cache-Control: public, max-age=300, s-max-age=900 Server CDN Proxy Caching @jawache
36. Serving @jawache
37. Use a service that is optimised for static requests @jawache @jawache
38. • Azure Storage • Optimised for static files • Fast! • Cheap!! @jawache
40. API Engine Twitter Feed View @jawache
41. API Engine Twitter Feed View @jawache
42. Server-less @jawache
43. @jawache
44. @jawache
45. @jawache
46. @jawache
47. • Pay only for actual usage and not for predicted usage • Autoscaling @jawache
48. Quiz @jawache
49. Azure Storage? Quiz @jawache
50. Azure Storage is Serverless Can we make the rest of our app serverless? @jawache
51. API Engine Twitter Feed View @jawache
52. API @jawache
53. Serverless SPA API } @jawache
54. FaaS @jawache
55. Hardware OS Framework Function PaaS @jawache
56. Hardware OS Framework Function FaaS @jawache
57. • Azure Functions • Charge by GB-s + Executions • Limited to 5 mins • Stateless @jawache
59. API Engine Twitter Feed View @jawache
60. View Engine Twitter Feed API @jawache
61. View Engine Twitter Feed API @jawache
62. Orchestration @jawache
63. View Engine Twitter Feed API @jawache
64. Durable Functions* @jawache
65. @jawache
66. View Engine Twitter Feed API @jawache
67. Summary @jawache
68. Summary @jawache SPAs are static, we can therefore use caching and serve using Azure Storage. Oh, BTW... storage is serverless So might as well make the rest of your app serverless Use as FaaS like Azure Functions for your API Orchestrate with Durable Functions* (or Logic Apps)
69. Asim Hussain @jawache codecraft.tv microsoft.com
70. https://codecraft.tv https://www.npr.org/podcasts/510289/planet-money https://aka.ms/tut-static-site-on-storage https://aka.ms/tut-spa-routing-overview https://aka.ms/jawache-cda @jawache Links