$30 off During Our Annual Pro Sale. View Details »

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
Tweet

More Decks by Facundo Giuliani

Other Decks in Programming

Transcript

  1. Jamstack:
    Going back to the roots

    View Slide

  2. Facundo Giuliani
    Web fgiuliani.com
    Twitter @facundozurdo
    GitHub @fgiuliani
    Software Engineer
    Lead Web Developer @ MultiTracks.com
    Auth0 Ambassador - GitKraken Ambassador

    View Slide

  3. 3

    View Slide

  4. Tim Berners-Lee

    View Slide

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

    View Slide

  6. View Slide

  7. View Slide

  8. http://spacejam.com

    View Slide

  9. Static Web Page
    A web page that is delivered to the user's
    browser exactly as stored

    View Slide

  10. Dynamic Web Page
    A web page where some of the content is
    generated dynamically, when needed

    View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. Server Side Rendering
    The HTML content is generated by the
    Web Server

    View Slide

  15. View Slide

  16. View Slide

  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

    View Slide

  18. Client Side Rendering
    The HTML content is rendered directly in
    the browser using JavaScript

    View Slide

  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.

    View Slide

  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.

    View Slide

  21. One Step
    Forward Backward

    View Slide

  22. View Slide

  23. View Slide

  24. ◆ Fast
    ◆ Cheap
    ◆ Easy to maintain
    Static Web Pages
    ◆ Secure
    ◆ Easy to scale
    ◆ Stable

    View Slide

  25. Jamstack

    View Slide

  26. Jamstack
    A new way of building websites and apps
    that delivers better performance, higher
    security, lower cost of scaling, and better
    developer experience.

    View Slide

  27. View Slide

  28. Generating cacheable, static assets
    at build time whenever is possible

    View Slide

  29. Deploying those assets to CDNs

    View Slide

  30. Use client-side JavaScript to call
    third-party APIs and serverless
    functions for dynamic interactions
    and data

    View Slide

  31. View Slide

  32. Static Site Generator
    Software that produces and deploys a
    static website using data sources and
    templates

    View Slide

  33. View Slide

  34. View Slide

  35. Content Management
    System
    Application or set of related programs
    that are used to create and manage
    digital content

    View Slide

  36. View Slide

  37. Headless CMS
    A CMS where the content repository is
    separated or decoupled from the
    presentation layer

    View Slide

  38. View Slide

  39. Build, Deployment & Hosting
    Service to build, integrate, deploy and
    host the application

    View Slide

  40. View Slide

  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

    View Slide

  42. ◆ Search Engine: Algolia, Azure Search
    ◆ e-Commerce: Snipcart, Shopify
    ◆ Comments: Commento, Mouthful
    ◆ Image and Video Management: Cloudinary
    API Services

    View Slide

  43. ◆ Better Performance
    ◆ Cheaper Servers
    ◆ Better Caching
    Jamstack
    ◆ More Security
    ◆ Easy to scale
    ◆ Better SEO
    PROS
    ◆ Better Developer Experience

    View Slide

  44. Jamstack
    PROBLEMS
    ◆ Different costs to evaluate
    ◆ External dependencies
    ◆ Atomic build time
    ◆ Hard for content editors

    View Slide

  45. View Slide

  46. Thank you!
    Web fgiuliani.com Twitter @facundozurdo GitHub @fgiuliani

    View Slide