Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Rise of the JAMstack

118 views

Published on

Bhavana Srinivas
Netlify

Overview
A new web stack has emerged. A stack powered by modern browsers, API economy and Git based workflows. A stack that is not tied to specific technologies. A stack that takes into account both developer experience while building the application, and user experience when interacting with the application. A stack that delivers better performance, higher security, and lower cost of scaling for web applications.

In this talk, Bhavana will dive more into the architecture and best practices for building performant web applications using the JAMstack

Objective
Educate the audience about the JAMstack and why it powers performant sites

Target Audience
Web stakeholders who want fast, secure and performant websites

Assumed Audience Knowledge
Built a website/interacted with sites

Five Things Audience Members Will Learn
What is the JAMstack
The ecosystem around the JAMstack
How to improve the performance of your site built on the JAMstack
Example sites built on this architecture
Resources and best practices

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Rise of the JAMstack

  1. 1. Rise of the JAMstack FITC spotlight 2019
  2. 2. Who am I? Bhavana Srinivas Sales Engineer, Netlify Previously at PubNub
  3. 3. Why the JAMstack?
  4. 4. Trip down memory lane… Unix Model 1970-1997 ish
  5. 5. Legacy Web
  6. 6. Today - return of the static From client → server to client “services” Main application directly on a CDN
  7. 7. Why is this JAM any better?
  8. 8. Dynamic vs Static sites Monolithic sites (WP, Drupal etc.) JAMstack sites
  9. 9. Performance!!
  10. 10. Personal blog on WP
  11. 11. Personal blog “on” JAMstack
  12. 12. TTFB stats from around the world Blog on WP Blog “on” JAMstack
  13. 13. Desktop vs Mobile - monolithic
  14. 14. Desktop vs Mobile - JAMstack
  15. 15. In the real world: 1. Google found that a 500ms difference in load time impacted revenue by a full 20%. 2. At Amazon, every 100 ms increase in load times decreased sales with 1%. 3. Walmart decided to attempt to increase the competitive nature of their retail site, during their research they discovered: a. For every 1 second of improvement they experiences up to a 2% increase in conversions b. For every 100ms of improvement, they grew incremental revenue by up to 1%
  16. 16. Security!!
  17. 17. Security Pickle Monoliths More moving parts → more attack vectors ● Plugins ● Web server ● App server ● Databases JAM sites More static pages → less surface area for attacks ● Static files ● No servers ● Host on CDN ● APIs
  18. 18. Scalability
  19. 19. CDNs
  20. 20. Site Availability
  21. 21. Ingredients for the JAM ● Static Sites ● Static Site Generators ● Headless CMS ● Hosting providers ● APIs ● Serverless
  22. 22. Static Site Generators
  23. 23. Static Site Generators
  24. 24. staticgen.com Gatsby Starters
  25. 25. Gatsby Showcase
  26. 26. Headless CMS
  27. 27. Deployment/Hosting
  28. 28. Dynamism: A for APIs
  29. 29. JAM-packed
  30. 30. Smashing Magazine : FROM
  31. 31. Smashing Magazine : TO
  32. 32. 800ms→80ms first load
  33. 33. What’s your JAM?
  34. 34. Sweet JAMs “We need modern web tools to attract talented engineers”
  35. 35. Awesome Resources https://github.com/automata/awesome-jamstack

×