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.

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. 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