LAMPstack vs. JAMstack

In this talk the pros and cons of LAMPstack vs. JAMstack are discussed, with a walk-through of a request lifecycle for both stacks. We then go on to discuss the commonalities as well as the differences between the two stacks, and when to choose each.

Transcript

1. - A TALE OF TWO STACKS -
   nystudio107 / @nystudio107
   by Andrew Welch
   devMode podcast / devMode.fm
   

   View Slide

2. View Slide

3. Lammy Jammy
   

   View Slide

4. Everything
   presented here
   is a fact.*
   

   View Slide

5. Everything
   presented here
   is a fact.*
   *In my opinion
   

   View Slide

6. If you don’t understand your

   stack, you’ll grow to resent it.
   

   View Slide

7. Understanding is seeing
   the true nature of a thing.
   

   View Slide

8. L
   A
   M
   P
   J
   A
   M
   

   View Slide

9. Linux
   A
   M
   P
   J
   A
   M
   

   View Slide

10. Linux
    Apache
    M
    P
    J
    A
    M
    

    View Slide

11. Linux
    Apache
    MySQL
    P
    J
    A
    M
    

    View Slide

12. Linux
    Apache
    MySQL
    PHP
    J
    A
    M
    

    View Slide

13. Linux
    Apache
    MySQL
    PHP
    JavaScript
    A
    M
    

    View Slide

14. Linux
    Apache
    MySQL
    PHP
    JavaScript
    APIs
    M
    

    View Slide

15. Linux
    Apache
    MySQL
    PHP
    JavaScript
    APIs
    Markup
    

    View Slide

16. Linux
    Apache
    MySQL
    PHP
    JavaScript
    APIs
    Markup
    

    View Slide

17. JavaScript has
    a superpower.
    

    View Slide

18. JavaScript can run both
    on the server and on the client.
    

    View Slide

19. Linux
    Apache
    MySQL
    PHP
    JavaScript
    APIs
    Markup
    

    View Slide

20. LEMP
    

    View Slide

21. LEMP
    WIMP
    

    View Slide

22. LEMP
    WIMP
    

    View Slide

23. LEMP
    WIMP
    MEAN
    

    View Slide

24. LEMP
    WIMP
    MEAN
    GLASS
    

    View Slide

25. LEMP
    WIMP
    MEAN
    GLASS
    LLMP
    

    View Slide

26. LEMP
    WIMP
    MEAN
    GLASS
    LLMP
    LYCE
    

    View Slide

27. LEMP
    WIMP
    MEAN
    GLASS
    LLMP
    LYCE
    MERN
    

    View Slide

28. LEMP
    WIMP
    MEAN
    GLASS
    LLMP
    LYCE
    MERN
    STAR
    

    View Slide

29. Phew.
    

    View Slide

30. View Slide

31. There’s more than one way
    to skin a cat.
    

    View Slide

32. LAMP LLMP
    

    View Slide

33. LAMP
    acronym
    LLMP
    

    View Slide

34. LAMP
    acronym
    LLMP
    initialism
    

    View Slide

35. LAMPstack vs. JAMstack
    

    View Slide

36. A fork in the road.
    

    View Slide

37. Me
    JAMstack
    LAMPstack
    

    View Slide

38. JAMstack
    is for you if:
    

    View Slide

39. JAMstack
    is for you if:
    • You hate devops
    

    View Slide

40. JAMstack
    is for you if:
    • You hate devops
    • You love JavaScript
    

    View Slide

41. LAMPstack
    Lifecycle of a request
    

    View Slide

42. LAMPstack
    Lifecycle of a request
    • Apache/Nginx
    

    View Slide

43. LAMPstack
    Lifecycle of a request
    • Apache/Nginx
    • PHP worker process
    

    View Slide

44. LAMPstack
    Lifecycle of a request
    • Apache/Nginx
    • PHP worker process
    • Twig compiled
    

    View Slide

45. LAMPstack
    Lifecycle of a request
    • Apache/Nginx
    • PHP worker process
    • Twig compiled
    • PHP is executed
    

    View Slide

46. LAMPstack
    Lifecycle of a request
    • Apache/Nginx
    • PHP worker process
    • Twig compiled
    • PHP is executed
    • db query
    

    View Slide

47. • Apache/Nginx
    • PHP worker process
    • Twig compiled
    • PHP is executed
    LAMPstack
    Lifecycle of a request
    • db query
    • HTML returned
    

    View Slide

48. JAMstack
    Lifecycle of a request
    

    View Slide

49. JAMstack
    Lifecycle of a request
    • Static host (CDN, etc.)
    

    View Slide

50. • Static host (CDN, etc.)
    • HTML returned
    JAMstack
    Lifecycle of a request
    

    View Slide

51. Wait, wut?
    

    View Slide

52. LAMPstack
    Step: Build
    

    View Slide

53. • Build CSS/JS
    LAMPstack
    Step: Build
    

    View Slide

54. • Build CSS/JS
    Where: local dev or build server
    LAMPstack
    Step: Build
    

    View Slide

55. LAMPstack
    Step: Serve
    

    View Slide

56. • db Query
    LAMPstack
    Step: Serve
    

    View Slide

57. LAMPstack
    Step: Serve
    • db Query
    • Twig -> HTML
    

    View Slide

58. LAMPstack
    Step: Serve
    • db Query
    • Twig -> HTML
    • Dynamically images
    

    View Slide

59. • db Query
    • Twig -> HTML
    • Dynamically images
    Where: production server
    LAMPstack
    Step: Serve
    

    View Slide

60. JAMstack
    Step: Build
    

    View Slide

61. JAMstack
    Step: Build
    • Build CSS/JS
    

    View Slide

62. JAMstack
    Step: Build
    • Build CSS/JS
    • db Query
    

    View Slide

63. JAMstack
    Step: Build
    • Build CSS/JS
    • db Query
    • “Markup” -> HTML
    

    View Slide

64. JAMstack
    Step: Build
    • Build CSS/JS
    • db Query
    • “Markup” -> HTML
    • Resize images
    

    View Slide

65. • Build CSS/JS
    • db Query
    • “Markup” -> HTML
    • Resize images
    Where: local dev or build server
    JAMstack
    Step: Build
    

    View Slide

66. JAMstack
    Step: Serve
    

    View Slide

67. n/a
    JAMstack
    Step: Serve
    

    View Slide

68. We didn’t change
    what happened.
    

    View Slide

69. We just changed
    where it happened.
    

    View Slide

70. APIs
    

    View Slide

71. APIs
    • “Query APIs for dynamic data”
    

    View Slide

72. APIs
    • “Query APIs for dynamic data”
    • That API can be Cra CMS
    

    View Slide

73. APIs
    • “Query APIs for dynamic data”
    • That API can be Cra CMS
    • Element API
    

    View Slide

74. • “Query APIs for dynamic data”
    • That API can be Cra CMS
    • Element API
    • GraphQL API
    APIs
    

    View Slide

75. API queries can happen:
    

    View Slide

76. API queries can happen:
    • At build time for SSGs
    

    View Slide

77. API queries can happen:
    • At build time for SSGs
    • At runtime in a “thick” client
    

    View Slide

78. API queries can happen:
    • At build time for SSGs
    • At runtime in a “thick” client
    • Client/server hybrid aren’t really “JAMstack”
    

    View Slide

79. • At build time for SSGs
    • At runtime in a “thick” client
    • Client/server hybrid aren’t really “JAMstack”
    • Google “Rendering on the Web”
    API queries can happen:
    

    View Slide

80. It’s not a binary decision.
    

    View Slide

81. But it is a change in
    mentality and methodology.
    

    View Slide

82. LAMPstack
    Pros
    

    View Slide

83. LAMPstack
    Pros
    • Familiarity with processes
    

    View Slide

84. LAMPstack
    Pros
    • Familiarity with processes
    • Maturity of tools and infrastructure
    

    View Slide

85. LAMPstack
    Pros
    • Familiarity with processes
    • Maturity of tools and infrastructure
    • Dynamic content per request
    

    View Slide

86. LAMPstack
    Cons
    

    View Slide

87. LAMPstack
    Cons
    • Doesn’t scale without static caching or $$
    

    View Slide

88. LAMPstack
    Cons
    • Doesn’t scale without static caching or $$
    • Interactivity needs JavaScript
    

    View Slide

89. LAMPstack
    Cons
    • Doesn’t scale without static caching or $$
    • Interactivity needs JavaScript
    • Some devops required
    

    View Slide

90. • Doesn’t scale without static caching or $$
    • Interactivity needs JavaScript
    • Some devops required
    • Job opportunities
    LAMPstack
    Cons
    

    View Slide

91. JAMstack
    Pros
    

    View Slide

92. JAMstack
    Pros
    • Scales wonderfully
    

    View Slide

93. JAMstack
    Pros
    • Scales wonderfully
    • Interactivity via JavaScript
    

    View Slide

94. JAMstack
    Pros
    • Scales wonderfully
    • Interactivity via JavaScript
    • No devops required
    

    View Slide

95. • Scales wonderfully
    • Interactivity via JavaScript
    • No devops required
    • Job opportunities
    JAMstack
    Pros
    

    View Slide

96. JAMstack
    Cons
    

    View Slide

97. JAMstack
    Cons
    • Painful rebuild & deployment times
    

    View Slide

98. JAMstack
    Cons
    • Painful rebuild & deployment times
    • Thick clients that can be slow
    

    View Slide

99. JAMstack
    Cons
    • Painful rebuild & deployment times
    • Thick clients that can be slow
    • Devops -> optimizing your pipeline
    

    View Slide

100. • Painful rebuild & deployment times
     • Thick clients that can be slow
     • Devops -> optimizing your pipeline
     • Not all old pa erns are solved
     JAMstack
     Cons
     

     View Slide

101. JAMstack
     Myths
     

     View Slide

102. JAMstack
     Myths
     • Your site will be faster
     

     View Slide

103. JAMstack
     Myths
     • Your site will be faster
     • TTFB will be be er but that’s it
     

     View Slide

104. View Slide

105. View Slide

106. View Slide

107. JAMstack
     Myths
     • Your site will be faster
     • TTFB will be be er but that’s it
     • No more devops
     

     View Slide

108. • Your site will be faster
     • TTFB will be be er but that’s it
     • No more devops
     • Devops -> build / deployment pipeline
     JAMstack
     Myths
     

     View Slide

109. So we’re left with a
     different way to do the
     same thing.
     

     View Slide

110. So we’re left with a
     different way to do the
     same thing.
     • Twig -> React/Vue/Svelte
     

     View Slide

111. So we’re left with a
     different way to do the
     same thing.
     • Twig -> React/Vue/Svelte
     • Element queries -> GraphQL queries
     

     View Slide

112. • Twig -> React/Vue/Svelte
     • Element queries -> GraphQL queries
     • Cra CMS plugins -> NPM packages
     So we’re left with a
     different way to do the
     same thing.
     

     View Slide

113. It’s new.
     

     View Slide

114. It’s new.
     I’m scared.
     

     View Slide

115. It’s new.
     I’m scared.
     • Learning & evolving the definition of tech
     

     View Slide

116. It’s new.
     I’m scared.
     • Learning & evolving the definition of tech
     • You’re not throwing away knowledge
     

     View Slide

117. It’s new.
     I’m scared.
     • Learning & evolving the definition of tech
     • You’re not throwing away knowledge
     • “It’s all just code”—BK
     

     View Slide

118. 
     Twig:
     

     View Slide

119. 
     Twig:
     Vue:
     
     

     View Slide

120. It’s new.
     I’m scared.
     • Learning & evolving the definition of tech
     • You’re not throwing away knowledge
     • “It’s all just code”—BK
     • Much of what you know already applies
     

     View Slide

121. {% set entries = craft.entries.section(“news")
     .limit(2)
     .all()
     %}
     Element query:
     

     View Slide

122. {% set entries = craft.entries.section(“news")
     .limit(2)
     .all()
     %}
     Element query:
     GraphQL query:
     {
     queryEntries (section: "news", limit: 2 {
     title
     }
     }
     

     View Slide

123. • Learning & evolving the definition of tech
     • You’re not throwing away knowledge
     • “It’s all just code”—BK
     • Much of what you know already applies
     • Don’t be scared. Be bold.
     It’s new.
     I’m scared.
     

     View Slide

124. You don’t like mixing
     HTML and JavaScript?
     

     View Slide

125. 
     <br/>$("button").click(function(){<br/>$("p").hide();<br/>});<br/>
     
     You don’t like mixing
     HTML and JavaScript?
     

     View Slide

126. 
     
     You’ve been alive for {{ days }} days!
     
     
     Twig code:
     

     View Slide

127. 
     
     You’ve been alive for {{ days }} days!
     
     
     Vue JS code:
     

     View Slide

128. {% set days = 12 * 365.25 %}
     
     
     You’ve been alive for {{ days }} days!
     
     
     Twig code:
     

     View Slide

129. // line 2
     $context["days"] = (12 * 365.25);
     // line 3
     echo "
     
     You’ve been alive for ";
     // line 5
     echo twig_escape_filter($this->env,
     (isset($context["days"]) || array_key_exists("days", $context) ?
     $context["days"] : (function () { throw new RuntimeError('Variable
     "days" does not exist.', 5, $this->source); })()), "html", null,
     true);
     echo " days!
     
     
     ";
     Compiled PHP code:
     

     View Slide

130. “It’s all just code, man”
     —BK
     

     View Slide

131. There are advantages
     to the JAMstack
     

     View Slide

132. There are advantages
     to the JAMstack
     • Leverage modern frontend frameworks
     

     View Slide

133. There are advantages
     to the JAMstack
     • Leverage modern frontend frameworks
     • Separate your content from rendering
     

     View Slide

134. There are advantages
     to the JAMstack
     • Leverage modern frontend frameworks
     • Separate your content from rendering
     • Serve up an API
     

     View Slide

135. There are advantages
     to the JAMstack
     • Leverage modern frontend frameworks
     • Separate your content from rendering
     • Serve up an API
     • Consume an API
     

     View Slide

136. There are advantages
     to the JAMstack
     • Leverage modern frontend frameworks
     • Separate your content from rendering
     • Serve up an API
     • Consume an API
     • Use NPM packages
     

     View Slide

137. • Leverage modern frontend frameworks
     • Separate your content from rendering
     • Serve up an API
     • Consume an API
     • Use NPM packages
     • JavaScript massive talent pool
     There are advantages
     to the JAMstack
     

     View Slide

138. But there are
     disadvantages, too.
     

     View Slide

139. What do these phrases
     have in common?
     

     View Slide

140. Fat Free
     

     View Slide

141. All Natural
     

     View Slide

142. Full Stack
     

     View Slide

143. Fat Free
     Marketing terms.
     All Natural Full Stack
     

     View Slide

144. Your stack
     doesn’t matter,
     what you build
     matters.
     

     View Slide

145. Build awesome stuff.
     

     View Slide

146. by
     Andrew Welch / @gaijinity
     - A TALE OF TWO STACKS -
     devMode podcast /
     devMode.fm
     nystudio107.com @nystudio107 SpeakerDeck.com/

     nystudio107
     

     View Slide