JAMstack and WordPress: friend or foe?

JAMstack and WordPress: friend or foe?

The term JAMstack was coined by Mathias Biilman, the co-founder of Netlify, to contrast more ‘modern’ approaches to web development with the LAMP stack we all know very well. JAMstack refers to the serverless, database-less stack comprised of Javascript, APIs and Markup.

Interest in the JAMstack is growing, and many feel that the JAMstack approach to web development, which in many ways is faster, more secure, and offers greater stability than the traditional stack, is the future of the web. But it also has many drawbacks and issues.

In this talk we will examine the JAMstack to understand what it is and what it offers, and look at the progression of approaches to web development, the pros and cons of the various methodologies, and where WordPress fits in with it all.

51305e654e9aa6f797daf266211843d9?s=128

Miriam Schwab

April 07, 2019
Tweet

Transcript

  1. JAMstack WordPress friend or foe? Miriam Schwab, WordCamp London 2019

  2. 5x

  3. In the beginning… (circa 1999)

  4. None
  5. None
  6. None
  7. L A M P Apache MySQL Linux PHP

  8. None
  9. None
  10. Web pages are getting heavier

  11. March 1, 2015 <> March 1, 2018 MEDIAN DESKTOP 1828.2

    KB ▲25.8% MEDIAN MOBILE 1669.0 KB ▲77.5% MEDIAN DESKTOP 2278.4 ▲15.1% MEDIAN MOBILE 2254.3 ▲28.6%
  12. None
  13. 20*49 = 980

  14. But what about ??

  15. None
  16. The Web is not Google, and should not be just

    Google.
  17. Website security is getting harder

  18. None
  19. Sucuri Hacked Website Report 2018

  20. None
  21. 20*49 = 980

  22. Scaling is challenging

  23. None
  24. None
  25. The stack previously known as “static”

  26. None
  27. J A M JavaScript APIs Markup

  28. None
  29. None
  30. “With a proper CDN, full HTTP/2 support and service workers

    in place, last year we managed to beat the performance results we had so far. However, even with a fancy nginx build, the performance we could get with a pre-built websites enhanced with JavaScript was nothing short of breathtaking.” Vitaly Friedman, Smashing Magazine
  31. Benefits of JAMstack Fast Secure Scalable Cheap

  32. Wait a second! Doesn’t this mean we’re just going back

    to this??
  33. No.

  34. Static Site Generators

  35. None
  36. None
  37. None
  38. ”static site generator”

  39. None
  40. If it’s so great, why isn’t everyone using JAMstack? •

    Need to feel comfortable with command line • Sites and content managed via Git • Some CMSs are available, but hard to integrate, and limited • Long publish build time • No multi-author capabilities • Complex to develop • Limited plugin and theme ecoysystem • People like what they are used to
  41. JAMstack + developers = ! JAMstack + (marketers, content managers,

    creators) = "
  42. 1/3 of the web !

  43. CMS market share: a numbers analysis by Joost de Valk

  44. ”static site generator”

  45. WordPress vs. ”static site generator”

  46. None
  47. None
  48. None
  49. None
  50. Headless CMS (REST API) API Front end CDN App Watch

    WP back end content management API only, UI anything
  51. Pros: • Cooler – any framework, technology, language • Portable

    • Fast • Secure • Scalable • Future-proof Cons: • High barrier of adoption - more complicated to develop, need team of developers on it • Vendor lock-in • No plugins or themes • No live preview • Not great for frequent content updates
  52. Static plugins

  53. Pros: • Easy to install a plugin • Low cost

    • Use WP as usual • Deploy to static hosting of your choice Cons: • Complicated to configure – not great for marketers • Huge load on servers • Full publish can take long • Redirect support? • Need to replace forms, search, comments, ajax
  54. None
  55. None
  56. Pros: • Modern web app • Fast • Secure •

    Scalable Cons: • Tied into the offered themes • Barrier to entry • Full build on every change • No preview • Depends on WP REST API
  57. WordPress as static site generator

  58. Magic

  59. Pros: • Fast, secure, scalable • Continue using WP •

    Click of a button, no complicated configs • CDN, http/2, SSL, gzip • Serverless forms • Algolia search • Other optimizations on the fly Cons: • No Ajax (yet) • No membership sites with logins (yet) • No WooCommerce (yet)
  60. Let’s continue working to bring WordPress into the future, and

    sustain it for many years to come.
  61. Thank you!! Miriam Schwab | miriam@strattic.com @miriamschwab

  62. Credits • HTML icon – iconfinder • CSS icon –

    iconfinder • LAMP diagram - By K7.india at English Wikipedia, CC BY 3.0, https://commons.wikimedia.org/w/index.php?curid=31270395 • Photo of weights - Photo by Victor Freitas from Pexels • Photo of locks - Photo by V P from Pexels • Browser icon - https://www.iconfinder.com/icons/1055104/browser_webpage_website_icon • Jam photo - https://www.pexels.com/photo/blur-focus-jam-jars-48817/ (no attribution required) • Rocket icon - https://www.iconfinder.com/icons/2588762/fast_optimize_rocket_seo_icon • Padlock icon - https://www.iconfinder.com/icons/511942/lock_login_protection_secure_icon • Scale icon - https://www.iconfinder.com/icons/1063900/arrow_expand_fullscreen_scale_icon • Pound icon - https://www.iconfinder.com/icons/1737366/business_money_pound_icon