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.

Transcript

1. JAMstack WordPress friend or foe? Miriam Schwab, WordCamp London 2019
2. 5x
3. In the beginning… (circa 1999)
7. L A M P Apache MySQL Linux PHP
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%
13. 20*49 = 980
14. But what about ??
16. The Web is not Google, and should not be just Google.
17. Website security is getting harder
19. Sucuri Hacked Website Report 2018
21. 20*49 = 980
22. Scaling is challenging
25. The stack previously known as “static”
27. J A M JavaScript APIs Markup
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
38. ”static site generator”
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”
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
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