Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LAMPstack vs. JAMstack

Andrew Welch
September 20, 2019

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.

Andrew Welch

September 20, 2019
Tweet

More Decks by Andrew Welch

Other Decks in Technology

Transcript

  1. - A TALE OF TWO STACKS - nystudio107 / @nystudio107

    by Andrew Welch devMode podcast / devMode.fm
  2. LAMPstack Lifecycle of a request • Apache/Nginx • PHP worker

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

    process • Twig compiled • PHP is executed • db query
  4. • Apache/Nginx • PHP worker process • Twig compiled •

    PHP is executed LAMPstack Lifecycle of a request • db query • HTML returned
  5. • db Query • Twig -> HTML • Dynamically images

    Where: production server LAMPstack Step: Serve
  6. JAMstack Step: Build • Build CSS/JS • db Query •

    “Markup” -> HTML • Resize images
  7. • Build CSS/JS • db Query • “Markup” -> HTML

    • Resize images Where: local dev or build server JAMstack Step: Build
  8. • “Query APIs for dynamic data” • That API can

    be Cra CMS • Element API • GraphQL API APIs
  9. API queries can happen: • At build time for SSGs

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

    • At runtime in a “thick” client • Client/server hybrid aren’t really “JAMstack”
  11. • 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:
  12. LAMPstack Pros • Familiarity with processes • Maturity of tools

    and infrastructure • Dynamic content per request
  13. LAMPstack Cons • Doesn’t scale without static caching or $$

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

    needs JavaScript • Some devops required • Job opportunities LAMPstack Cons
  15. • Scales wonderfully • Interactivity via JavaScript • No devops

    required • Job opportunities JAMstack Pros
  16. JAMstack Cons • Painful rebuild & deployment times • Thick

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

    can be slow • Devops -> optimizing your pipeline • Not all old pa erns are solved JAMstack Cons
  18. JAMstack Myths • Your site will be faster • TTFB

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

    be er but that’s it • No more devops • Devops -> build / deployment pipeline JAMstack Myths
  20. So we’re left with a different way to do the

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

    same thing. • Twig -> React/Vue/Svelte • Element queries -> GraphQL queries
  22. • 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.
  23. It’s new. I’m scared. • Learning & evolving the definition

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

    of tech • You’re not throwing away knowledge • “It’s all just code”—BK
  25. 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
  26. {% set entries = craft.entries.section(“news") .limit(2) .all() %} Element query:

    GraphQL query: { queryEntries (section: "news", limit: 2 { title } }
  27. • 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.
  28. {% set days = 12 * 365.25 %} <div class="woof">

    <p> You’ve been alive for {{ days }} days! </p> </div> Twig code:
  29. // 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:
  30. There are advantages to the JAMstack • Leverage modern frontend

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

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

    frameworks • Separate your content from rendering • Serve up an API • Consume an API
  33. 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
  34. • 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
  35. by Andrew Welch / @gaijinity - A TALE OF TWO

    STACKS - devMode podcast / devMode.fm nystudio107.com @nystudio107 SpeakerDeck.com/
 nystudio107