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
3. Lammy Jammy
4. Everything presented here is a fact.*
5. Everything presented here is a fact.* *In my opinion
6. If you don’t understand your
 stack, you’ll grow to resent it.
7. Understanding is seeing the true nature of a thing.
8. L A M P J A M
9. Linux A M P J A M
10. Linux Apache M P J A M
11. Linux Apache MySQL P J A M
12. Linux Apache MySQL PHP J A M
13. Linux Apache MySQL PHP JavaScript A M
14. Linux Apache MySQL PHP JavaScript APIs M
15. Linux Apache MySQL PHP JavaScript APIs Markup
16. Linux Apache MySQL PHP JavaScript APIs Markup
17. JavaScript has a superpower.
18. JavaScript can run both on the server and on the client.
19. Linux Apache MySQL PHP JavaScript APIs Markup
20. LEMP
21. LEMP WIMP
22. LEMP WIMP
23. LEMP WIMP MEAN
24. LEMP WIMP MEAN GLASS
25. LEMP WIMP MEAN GLASS LLMP
26. LEMP WIMP MEAN GLASS LLMP LYCE
27. LEMP WIMP MEAN GLASS LLMP LYCE MERN
28. LEMP WIMP MEAN GLASS LLMP LYCE MERN STAR
29. Phew.
31. There’s more than one way to skin a cat.
32. LAMP LLMP
33. LAMP acronym LLMP
34. LAMP acronym LLMP initialism
35. LAMPstack vs. JAMstack
36. A fork in the road.
37. Me JAMstack LAMPstack
38. JAMstack is for you if:
39. JAMstack is for you if: • You hate devops
40. JAMstack is for you if: • You hate devops • You love JavaScript
41. LAMPstack Lifecycle of a request
42. LAMPstack Lifecycle of a request • Apache/Nginx
43. LAMPstack Lifecycle of a request • Apache/Nginx • PHP worker process
44. LAMPstack Lifecycle of a request • Apache/Nginx • PHP worker process • Twig compiled
45. LAMPstack Lifecycle of a request • Apache/Nginx • PHP worker process • Twig compiled • PHP is executed
46. LAMPstack Lifecycle of a request • Apache/Nginx • PHP worker process • Twig compiled • PHP is executed • db query
47. • Apache/Nginx • PHP worker process • Twig compiled • PHP is executed LAMPstack Lifecycle of a request • db query • HTML returned
48. JAMstack Lifecycle of a request
49. JAMstack Lifecycle of a request • Static host (CDN, etc.)
50. • Static host (CDN, etc.) • HTML returned JAMstack Lifecycle of a request
51. Wait, wut?
52. LAMPstack Step: Build
53. • Build CSS/JS LAMPstack Step: Build
54. • Build CSS/JS Where: local dev or build server LAMPstack Step: Build
55. LAMPstack Step: Serve
56. • db Query LAMPstack Step: Serve
57. LAMPstack Step: Serve • db Query • Twig -> HTML
58. LAMPstack Step: Serve • db Query • Twig -> HTML • Dynamically images
59. • db Query • Twig -> HTML • Dynamically images Where: production server LAMPstack Step: Serve
60. JAMstack Step: Build
61. JAMstack Step: Build • Build CSS/JS
62. JAMstack Step: Build • Build CSS/JS • db Query
63. JAMstack Step: Build • Build CSS/JS • db Query • “Markup” -> HTML
64. JAMstack Step: Build • Build CSS/JS • db Query • “Markup” -> HTML • Resize images
65. • Build CSS/JS • db Query • “Markup” -> HTML • Resize images Where: local dev or build server JAMstack Step: Build
66. JAMstack Step: Serve
67. n/a JAMstack Step: Serve
68. We didn’t change what happened.
69. We just changed where it happened.
70. APIs
71. APIs • “Query APIs for dynamic data”
72. APIs • “Query APIs for dynamic data” • That API can be Cra CMS
73. APIs • “Query APIs for dynamic data” • That API can be Cra CMS • Element API
74. • “Query APIs for dynamic data” • That API can be Cra CMS • Element API • GraphQL API APIs
75. API queries can happen:
76. API queries can happen: • At build time for SSGs
77. API queries can happen: • At build time for SSGs • At runtime in a “thick” client
78. API queries can happen: • At build time for SSGs • At runtime in a “thick” client • Client/server hybrid aren’t really “JAMstack”
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:
80. It’s not a binary decision.
81. But it is a change in mentality and methodology.
82. LAMPstack Pros
83. LAMPstack Pros • Familiarity with processes
84. LAMPstack Pros • Familiarity with processes • Maturity of tools and infrastructure
85. LAMPstack Pros • Familiarity with processes • Maturity of tools and infrastructure • Dynamic content per request
86. LAMPstack Cons
87. LAMPstack Cons • Doesn’t scale without static caching or $$
88. LAMPstack Cons • Doesn’t scale without static caching or $$ • Interactivity needs JavaScript
89. LAMPstack Cons • Doesn’t scale without static caching or $$ • Interactivity needs JavaScript • Some devops required
90. • Doesn’t scale without static caching or $$ • Interactivity needs JavaScript • Some devops required • Job opportunities LAMPstack Cons
91. JAMstack Pros
92. JAMstack Pros • Scales wonderfully
93. JAMstack Pros • Scales wonderfully • Interactivity via JavaScript
94. JAMstack Pros • Scales wonderfully • Interactivity via JavaScript • No devops required
95. • Scales wonderfully • Interactivity via JavaScript • No devops required • Job opportunities JAMstack Pros
96. JAMstack Cons
97. JAMstack Cons • Painful rebuild & deployment times
98. JAMstack Cons • Painful rebuild & deployment times • Thick clients that can be slow
99. JAMstack Cons • Painful rebuild & deployment times • Thick clients that can be slow • Devops -> optimizing your pipeline
100. • Painful rebuild & deployment times • Thick clients that can be slow • Devops -> optimizing your pipeline • Not all old pa erns are solved JAMstack Cons
101. JAMstack Myths
102. JAMstack Myths • Your site will be faster
103. JAMstack Myths • Your site will be faster • TTFB will be be er but that’s it
107. JAMstack Myths • Your site will be faster • TTFB will be be er but that’s it • No more devops
108. • Your site will be faster • TTFB will be be er but that’s it • No more devops • Devops -> build / deployment pipeline JAMstack Myths
109. So we’re left with a different way to do the same thing.
110. So we’re left with a different way to do the same thing. • Twig -> React/Vue/Svelte
111. So we’re left with a different way to do the same thing. • Twig -> React/Vue/Svelte • Element queries -> GraphQL queries
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.
113. It’s new.
114. It’s new. I’m scared.
115. It’s new. I’m scared. • Learning & evolving the definition of tech
116. It’s new. I’m scared. • Learning & evolving the definition of tech • You’re not throwing away knowledge
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
118. <a href=“{{ variable.url }}”> Twig:
119. <a href=“{{ variable.url }}”> Twig: Vue: <a :href=“variable.url”>
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
121. {% set entries = craft.entries.section(“news") .limit(2) .all() %} Element query:
122. {% set entries = craft.entries.section(“news") .limit(2) .all() %} Element query: GraphQL query: { queryEntries (section: "news", limit: 2 { title } }
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.
124. You don’t like mixing HTML and JavaScript?
125. <div> <script> $("button").click(function(){ $("p").hide(); }); </script> </div> You don’t like mixing HTML and JavaScript?
126. <div class="woof"> <p> You’ve been alive for {{ days }} days! </p> </div> Twig code:
127. <div class="woof"> <p> You’ve been alive for {{ days }} days! </p> </div> Vue JS code:
128. {% set days = 12 * 365.25 %} <div class="woof"> <p> You’ve been alive for {{ days }} days! </p> </div> Twig code:
129. // line 2 $context["days"] = (12 * 365.25); // line 3 echo "<div class=\"woof\"> <p> 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! </p> </div> "; Compiled PHP code:
130. “It’s all just code, man” —BK
131. There are advantages to the JAMstack
132. There are advantages to the JAMstack • Leverage modern frontend frameworks
133. There are advantages to the JAMstack • Leverage modern frontend frameworks • Separate your content from rendering
134. There are advantages to the JAMstack • Leverage modern frontend frameworks • Separate your content from rendering • Serve up an API
135. There are advantages to the JAMstack • Leverage modern frontend frameworks • Separate your content from rendering • Serve up an API • Consume an API
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
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
138. But there are disadvantages, too.
139. What do these phrases have in common?
140. Fat Free
141. All Natural
142. Full Stack
143. Fat Free Marketing terms. All Natural Full Stack
144. Your stack doesn’t matter, what you build matters.
145. Build awesome stuff.
146. by Andrew Welch / @gaijinity - A TALE OF TWO STACKS - devMode podcast / devMode.fm nystudio107.com @nystudio107 SpeakerDeck.com/
 nystudio107