JAMstack Cheatsheet

JAMstack is revolutionising the way we think about workflow by providing a simpler developer experience, better performance, lower cost and greater scalability.

This project was put together by @peduarte and presented at the JAMstack meetup in London on the 5th Feb 2019.

For more information, visit https://jamstack.wtf

Transcript

1. JAMstack Cheatsheet
   

   View Slide

2. Pedro Duarte
   @PEDUARTE
   

   View Slide

3. Product Engineer Modulz
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

10. JAMstack is revolutionising the way we
    think about workflow.
    

    View Slide

11. Table of contents
    What is JAMstack?
    Meaning
    Benefits
    Best practices
    Workflow
    Timeline
    Getting started
    Development
    Deployment
    Dynamic parts
    CMS
    The “traditional” workflow
    

    View Slide

12. The “traditional” workflow
    

    View Slide

13. Monolithic architecture
    

    View Slide

14. Isomorphic rendering
    

    View Slide

15. Server side CMS
    

    View Slide

16. What is JAMstack?
    

    View Slide

17. MEANING
    

    View Slide

18. MEANING
    

    View Slide

19. Javascript
    MEANING
    

    View Slide

20. APIs
    MEANING
    

    View Slide

21. Markup
    MEANING
    

    View Slide

22. BENEFITS
    

    View Slide

23. Faster performance
    BENEFITS
    

    View Slide

24. More secure
    BENEFITS
    

    View Slide

25. Less expensive
    BENEFITS
    

    View Slide

26. Better developer experience
    BENEFITS
    

    View Slide

27. Scalability
    BENEFITS
    

    View Slide

28. BEST PRACTICES
    

    View Slide

29. Content delivery network
    BEST PRACTICES
    

    View Slide

30. Atomic deploys
    BEST PRACTICES
    

    View Slide

31. Cache invalidation
    BEST PRACTICES
    

    View Slide

32. Everything in Version Control
    BEST PRACTICES
    

    View Slide

33. Automated builds
    BEST PRACTICES
    

    View Slide

34. WORKFLOW
    

    View Slide

35. WORKFLOW
    

    View Slide

36. WORKFLOW
    

    View Slide

37. TIMELINE
    

    View Slide

38. TIMELINE
    

    View Slide

39. TIMELINE
    

    View Slide

40. TIMELINE
    

    View Slide

41. TIMELINE
    SOURCE: SNIPCART
    

    View Slide

42. Getting started
    

    View Slide

43. DEVELOPMENT
    

    View Slide

44. Hand coding
    DEVELOPMENT
    

    View Slide

45. Static Site Generators
    DEVELOPMENT
    

    View Slide

46. DEVELOPMENT
    

    View Slide

47. Frontend Frameworks
    DEVELOPMENT
    

    View Slide

48. DEVELOPMENT
    

    View Slide

49. DEPLOYMENT
    

    View Slide

50. DEPLOYMENT
    

    View Slide

51. DYNAMIC PARTS
    

    View Slide

52. Custom functions
    DYNAMIC PARTS
    

    View Slide

53. Third party APIs
    DYNAMIC PARTS
    

    View Slide

54. CMS
    DYNAMIC PARTS
    

    View Slide

55. Wrapping up
    

    View Slide

56. Dynamic
    WRAPPING UP
    

    View Slide

57. Not static site generators
    WRAPPING UP
    

    View Slide

58. Ideology
    WRAPPING UP
    

    View Slide

59. Flexible architecture
    WRAPPING UP
    

    View Slide

60. jamstack.wtf
    

    View Slide

61. Thank you
    PEDRO DUARTE
    @PEDUARTE
    

    View Slide