Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jamstack: Going back to the roots

Jamstack: Going back to the roots

Do you remember Microsoft FrontPage? The concept of static web pages is back! With some of the tools and concepts developed in the last years, we can get advantage of some features that static web pages offer and get web apps with better performance, more security, easier scaling and cheaper costs.

“Jamstack” is a term that is becoming more popular lately. There are more and more tools, services and frameworks that help us to develop web applications with this approach. We will talk about this architecture and what advantages it brings us compared to “Server Side Rendered” applications. We will also talk about different types of tools that we have at our disposal to create web applications based mainly on pre-rendered content.

Facundo Giuliani

October 17, 2020

More Decks by Facundo Giuliani

Other Decks in Programming


  1. Jamstack: Going back to the roots

  2. Facundo Giuliani Web fgiuliani.com Twitter @facundozurdo GitHub @fgiuliani Software Engineer

    Lead Web Developer @ MultiTracks.com Auth0 Ambassador - GitKraken Ambassador
  3. 3

  4. Tim Berners-Lee

  5. http://info.cern.ch/hypertext/WWW/TheProject.html

  6. None
  7. None
  8. http://spacejam.com

  9. Static Web Page A web page that is delivered to

    the user's browser exactly as stored
  10. Dynamic Web Page A web page where some of the

    content is generated dynamically, when needed
  11. None
  12. None
  13. None
  14. Server Side Rendering The HTML content is generated by the

    Web Server
  15. None
  16. None
  17. Single Page Application A web application that interacts with the

    user by dynamically rewriting the current web page with new data from the server
  18. Client Side Rendering The HTML content is rendered directly in

    the browser using JavaScript
  19. Client Side Rendering PROS CONS ◆ Richer interactions. ◆ Faster

    rendering after initial page load. ◆ Lower server load. ◆ Reusable UI components. ◆ Slower initial page load. ◆ Low SEO If not implemented correctly. ◆ Dependency on external libraries.
  20. Server Side Rendering PROS CONS ◆ Faster initial page load.

    ◆ Better SEO / Social Media Optimization. ◆ More secure (server-side code). ◆ Lower user device load. ◆ Busier web servers. ◆ Overall slow page rendering. ◆ Full page reload after route changes. ◆ The page is viewable sooner, but it’s not interactive.
  21. One Step Forward Backward

  22. None
  23. None
  24. ◆ Fast ◆ Cheap ◆ Easy to maintain Static Web

    Pages ◆ Secure ◆ Easy to scale ◆ Stable
  25. Jamstack

  26. Jamstack A new way of building websites and apps that

    delivers better performance, higher security, lower cost of scaling, and better developer experience.
  27. None
  28. Generating cacheable, static assets at build time whenever is possible

  29. Deploying those assets to CDNs

  30. Use client-side JavaScript to call third-party APIs and serverless functions

    for dynamic interactions and data
  31. None
  32. Static Site Generator Software that produces and deploys a static

    website using data sources and templates
  33. None
  34. None
  35. Content Management System Application or set of related programs that

    are used to create and manage digital content
  36. None
  37. Headless CMS A CMS where the content repository is separated

    or decoupled from the presentation layer
  38. None
  39. Build, Deployment & Hosting Service to build, integrate, deploy and

    host the application
  40. None
  41. ◆ Serverless Apps: AWS Lambda, Azure Functions, Google Cloud Functions

    ◆ Form Service: Formspree, Typeform, Netlify Forms ◆ Database: FaunaDB, Firebase, Supabase ◆ Authentication: Auth0, Firebase Authentication API Services
  42. ◆ Search Engine: Algolia, Azure Search ◆ e-Commerce: Snipcart, Shopify

    ◆ Comments: Commento, Mouthful ◆ Image and Video Management: Cloudinary API Services
  43. ◆ Better Performance ◆ Cheaper Servers ◆ Better Caching Jamstack

    ◆ More Security ◆ Easy to scale ◆ Better SEO PROS ◆ Better Developer Experience
  44. Jamstack PROBLEMS ◆ Different costs to evaluate ◆ External dependencies

    ◆ Atomic build time ◆ Hard for content editors
  45. None
  46. Thank you! Web fgiuliani.com Twitter @facundozurdo GitHub @fgiuliani