Beyond WordPress. Hello Jamstack

I’ve used WordPress almost daily since 2007. It changed my life and for over a decade it has been my sole way of building websites. I even added “WP” to my web design business name.

Over recent years much has changed both in and out of WordPress. I’ve changed too. I adopted an agile approach where we evolve sites based on ongoing user experience data.

It seemed a good time to step back and ask where and when WordPress is serving my client’s needs best and see what else is around.

It’s too soon to draw conclusions, but as I have some basic front-end code skills, the philosophy behind the Jamstack movement has resonated with me.

For my next web project I’m going to take that route, but here’s my thinking so far.

Making sense of WordPress after Gutenberg

I’ve consumed almost everything Matt Mullenweg has said and believe he sees “code-free” website building as the future for WordPress.

Leaving aside his approach, I think he might be right. The demand for code-free seems almost unstoppable in WordPress and this route is not inconsistent with what WordPress initially offered bloggers.

The problem for me is I’ve only ever wanted to go as far as “low code”. That’s what Beaver Builder represented for me.

I didn’t come to WordPress for code-free blogging. I came because it was a simple open source CMS with a growing number of developers sharing their code via the repositories.

I had already learned to build basic sites with HTML and CSS and WordPress offered me a way to explore the dynamic web when there were few services and APIs.

It was amazing. With minimal code hacking I was able to create a membership and an ecommerce site for personal projects.

Moving to client work

This was not my plan, but in 2013 a school friend asked me about WordPress. She was doing marketing work for a large international company and their US WordPress site was breaking.

I got the job rebuilding it and she fell in love with WordPress. This led to me rebuilding her other client sites which needed to go mobile responsive.

As most sites were essentially static, there were some concerns about using WordPress:

  • The clients would have to maintain and host a LAMP stack and update WordPress.
  • We had only just fixed a broken site due to abandoned plugins, and custom work being overwritten by updates.

We did it anyway because:

  • Clients liked the idea of editing content and being able to add functionality via plugins.
  • We liked not having to change every file to do common tasks like adding pages.

As WordPress was then largely unchanging and we limited ourselves to a few developer focussed addons like the Genesis Framework I wasn’t overly concerned about introducing this dependency.

It felt like we were still selling fully customised sites. WordPress was open source so we (perhaps naively) felt we were giving them full ownership.

Moving to “low code”

Beaver Builder became a key part of my stack for the same reasons it was built. The team behind it ran an agency and had clients asking for a more user friendly way to edit their content.

Back in 2014 few developers saw Page Builders as a serious professional option and they found nothing suitable for them.

They decided to make their own builder to give clients what they wanted, but still keep it simple, performant and developer friendly.

They then put this out commercially with the needs of other agencies and freelancers in mind, but also with enough that non-coders could build decent sites.

I had many reservations:

  • It was the first clear introduction of a major business dependency.
  • Page builders (like mega themes before) tended to get bloated and unstable as they met the increasing demand for more.

There were many deciding factors, but the main one was that most clients could not self manage even a basic WordPress setup. They got hacked and had hosting issues.

This could have been the point where I decided that many sites are not suited to WordPress, but even with project based work we did not feel we could abandon old clients.

Instead, we took on site management allowing us to also support the dependency of a page builder and offer its benefits.

The decision relied on my trust in the Beaver Builder team. I did my due diligence and believed in them. I was not let down.

Trouble in paradise

Obviously Gutenberg is a threat to all page builders, but being forced and complex has also changed how I view “community” in WordPress as well as its value as open source software.

It has been an incredible community, but without governance it has allowed one person to change it to suit his commercial interests.

The original appeal of WordPress was that it was a simple CMS where plugins allowed you to opt-in according to your needs.

This has been disappearing as WordPress developers sell their addons to large corporations focused on continuously adding features.

Being in competition with each other, my efforts now go into removing what has been forced on me and trying to limit the maintenance consequences of that (conflicts, duplicate features, performance, security risks and client confusion).

Matt Mullenweg’s recent call for “canonical plugins” shows he’s aware of the problem, but his solution of community plugins that stay close to WordPress core only gives him more control as the primary sponsor of that community.

Getting back to basics

I’m not against the pursuit of “code-free”, but feel the wisest shortcuts are those that allow us to evolve with the changing specifications of WC3.

(It was not insignificant to me that they dropped WordPress from consideration for their blog because of Gutenberg.)

I thought it was time to revisit the basic languages of the web HTML, CSS and JS. It’s been an eye opener.

HTML remains mostly unchanged. Holding true to the KISS principle, the foundation of the web remains a simple mark-up language. What was a delight was seeing how Emmet (baked into VS Code) does most of the writing for you.

CSS was my main interest as most of my work is about visual styling and layouts. I became out of touch having handed much of this to Beaver Builder.

All I can say is WOW!. What has been added and is due to come very soon to help visual designers is amazing.

After less than a week learning CSS grid I started to strip out all CSS from Beaver Builder on my starter site and begin replacing it with a “mobile first” grid layout system.

My old brain still struggles after going from table based layouts to floats and to (almost understanding) flexbox, but clearly grid is the way to do layouts from here on and more.

Note: This is not a Beaver Builder thing it would have applied to any page builder. CSS grid also makes designer addons for Gutenberg redundant to me. These looked appealing because they allow CSS customization without going the WordPress developer route of CSS in JSON files, but for static sites this seems pointless. For dynamic sites they are working independently of Gutenberg anyway.

JavaScript is mostly beyond me, but Matt Mullenweg was not wrong to advise developers to learn it “deeply”.

His motivation may have been to have the skills in WordPress to help him with Gutenberg, but very significant advances in JavaScript are also threatening the longevity of LAMP stack solutions like WordPress.

The Jamstack

This is a somewhat nebulous term. I only looked into it because Matt Mullenweg called it a “regression” and he only seems to get controversial when his business is threatened.

“JAM” stands for Javascript, APIs and Markup. “Stack” can be misleading as it’s mostly trying to solve the problems of traditional stacks as used by WordPress where Linux, Apache, MySQL and PHP are all dependent on each other to serve a web page.

The idea here is that web components are interchangeable. With JavaScript being able to do, on the client side, what PHP needed to do through a server, along with a growing number of APIs we can go back to serving mark-up (HTML) in the most direct way.

This means I can go back to where I started making HTML sites, but with knowledge that I don’t require a monolithic system to add in functionality, I can also choose the CMS that suits the project and retain control.

I can not hope to explain my planned set up in this post, but until I follow up, here is what it will probably look like:

  • Beaver Builder (with my CSS grid system) will act as a prototyping tool for the design instead of tools like Figma.
  • Astro (a Static Site Generator) will be added to VS Code where my HTML and CSS files live. It will take care of any templated areas for the HTML and allow the adding of any dynamic content in the distant future.
  • Astro will send the build to Github. Its version control replaces backups in WordPress terms, but also allows any future developers to come in and branch off a version to work on. A better developer experience for most than working within WordPress.
  • Github then deploys this (probably) to Netlify to go live to a global CDN. Being serverless the hosting is expected to be mostly free.

Avoiding having all my eggs in one basket

The Jamstack is relatively new and my coding skills are limited. It seems to be growing 50% every year where, in spite of the growth for 3rd party builders, WordPress seems to have stalled.

Predicting the future is foolhardy but I suspect WordPress will continue to hold a large market share. Not as the “operating system of the web” (an earlier belief that could not foresee the advances in JavaScript), but as a code-free solution for those who are increasingly convinced they can do it themselves. Its ongoing success will probably be more about how it can deliver on that promise in the long term.

Nevertheless, I heed the warning from Matt Mullenweg who sees the Jamstack akin to a house of cards.

I’ve no plans to entirely abandon WordPress. My immediate job is to get my WordPress starter site to the point where I can design with it and have the option to either go live as it is or take the design a Jamstack route.

This is something for later posts as there is much to consider and explore. For example, with my agile approach clients have less to need to change content themselves.

On the other hand, there’s good sense to getting a MVP fast and sometimes WordPress could be the best way to collaboratively work on progressing a live site.

The main takeaway for me has been to keep working on staying up to date with essential skills and watch out for shortcuts that could be a far greater time waste in the longer run.

The commercial code-free movement in WordPress was there long before Gutenberg and mainstream conversations have become more about products than skills.

Part of the appeal of the Jamstack movement is that those who are a part of it (all the front-end developers I follow) don’t really class themself as such. They are not affiliated to any particular brand or movement and their focus is more on web spec.

I presently can’t imagine myself using Gutenberg as I can’t set it apart from any other hyped product.

I understand why the block concept was a technical revolution in the printing press, but in WordPress I can’t seem to see the Emperor’s new clothes. I can’t see the science.

Instead, I’ve seen an almost religious zeal from a minority wanting me to convert. This has pushed me out of WordPress networks, but I have to thank them, because without them the personal revelations in the post would not have been possible.

     Tag:

22 Comments

  1. Pete Harrison on September 25, 2022 at 10:04 pm

    very interesting, again you seem to be reading my mind, I’m in the process of setting up a JamStack environment to start development using headless wordpress. looking forward to future insights

    • David Waumsley on September 26, 2022 at 8:45 am

      Thanks Pete. Headless WordPress goes right over my head. I am not that smart.

      I started with the simple idea that I needed to up my frontend skills so I’ll try making a HTML site like in the old days. Then, on looking to solve the issue of having to change every file for a new page, I found Astro. I think most coming to Astro come from a background of working with Jamstack. For different reasons they too are trying to get back to basics with this HTML based Static Site Generator. It’s opened up a whole new world to me.

      • Peter Harrison on September 26, 2022 at 9:45 am

        As I haven’t created a static site for more than 5 years, if I’m going to get into the Jamstack, headless cms is a must as I’ve written my own in the past, and I end up spending more time maintaining and developing the back end than the front.

    • Anoop D on October 3, 2022 at 10:35 am

      Me too …… I have been playing with Next JS and headless WordPress for the last two weeks or so and want to go the Netlify/ Vercel way . For an MVP i will be going the render HTML directly and as i get more acquainted will switch to rendering blocks . The problem is still you have to deal with Gutenberg .

      Off topic , why you have specifically chosen “Astro ” for your static site generation ?

      • David Waumsley on October 3, 2022 at 3:27 pm

        Hi Anoop. You are way ahead of me, Very cool. Like everything in my life there is no planning. I found Astro as a HTML and CSS template tool and then worked out that I appeared to have gone JAMstack route (without the J & A – ha ha.).

        My main focus is getting up to speed with how to use all the cool stuff in CSS. Things like :has(), :is() and :where() with Grid (and soon subgrid) are making the reason for a page builder more obsolete for me.

  2. Owen Greaves on September 26, 2022 at 3:30 pm

    Hey,

    So what does this mean for you when it comes to Beaver Builder, I went all-in BB years ago, and to be completely honest, I have been wondering how Page Builders are going to continue as WordPress continues down the road they’re on. Do you see yourself leaving BB completely, eventually?

    • David Waumsley on September 26, 2022 at 5:20 pm

      Hi Owen, That’s a good question. I truly don’t know. Beaver Builder has been keeping me with WordPress and I am not going to throw the “baby out with the bath water”. With my skills as they are I can only see me building very simple static site without it. I can’t see an easy Jamstack way for me to do the cleaver stuff with custom fields and post types that I can do with Beaver Themer.

      With Gutenberg upsetting the apple cart I thought two things.
      1. Stick with Beaver Builder and ignore the “page builders are dead” hype.
      2. Polish up my front end skills to feel less at the mercy of others (with or without BB that would be useful).

      The 2nd led me to Astro (really just as a way of templating HTML areas for me). Most people though looking at Astro are Jamstack developers looking to keep things simple and not be locked into a JavaScript based Static Site Generator.

      What excites me is that it appears to offer me a direction for the future, but it’s just an aspiration at the moment. I imagine with the massive changes in CSS right now (Grid, :has() and container queries) that all the visual page builders will start to look out of date. I am not sure how much that matters though.

      I’m not in a panic to move. Who knows there maybe things that happen in WordPress to me reassess again.

      • Peter Harrison on September 26, 2022 at 5:36 pm

        It’s interesting that Elementor has bought Strattic moving into the Headless marketplace.

        I’m not a designer so I’m going to continue using a page builder to do the fancy frilly stuff, and if I use WordPress and the CMS in a headless cms environment, I can prototype in a page builder and compare the output using the same backend data.

        • David Waumsley on September 27, 2022 at 5:41 am

          I don’t know what to make of Elementor buying Strattic. Is it a grand plan for Elementor or just because they have money to invest and had an existing relationship?

          Elementor never seemed particularly focussed on performance or security. I would guess they have more DIY users wanting cheap/free than most page builders.

          I saw a video recently on how to get a free website. The process was: Bitnami for a local install of WordPress. Use an Astra site template (recommended was a Elementor one) then install a free static site plugin and send that zip to Netlify for free hosting. Netlify offer a way to capture form submissions.

      • Owen Greaves on September 26, 2022 at 10:19 pm

        Back in the day I was a FrontPage guy, then ExpressionWeb – then went to WordPress. I still think PHP & HTML are the most interesting to build, but the amount of time it takes is a deterrent. As I mentioned, I do everything Beaver Builder, but still dabble with PHP, it’s so much faster to me. I’m going to stop or drop BB just yet, but I’m trying to determine the best alternatives to building sites, I am not finding Gutenburg all that interesting. If pushed into a corner, I may stop offering to build sites all together, the web hosting side of my business keeps me busy enough.

        Thanks for your prompt response, I enjoy your videos, gives me hope : )

        • David Waumsley on September 27, 2022 at 6:08 am

          Thank you. Yep, I can relate to that. One great thing about WordPress is that the difficulty maintaining it gave me an unexpected business in hosting. It’s what is allowing me the breathing room to slowly consider the long term future.

          I think it is always horses for courses with these things. The most significant thing I learned about myself recently is that like what the web can do for people more than building sites.

          The move to agile is my way of making less sites and having stronger relationships with clients .

          From that perspective it seems to make sense to spend more time on the build to have more control. I see with this a route to be able to hire a dev to add stuff beyond my abilities but retain control.

          For ecommerce I was thinking I would rather get someone in to connect my design to the Stripe API (an already existing dependency) than have to use WooCommerce or Shopify.

  3. Miriam Schwab on September 29, 2022 at 7:29 pm

    Hi! Miriam from Strattic here. Elementor + Strattic means bringing the same ease of use to WP site owners, but on the infrastructure level. So the LAMP stack management you mentioned above becomes a thing of the past. If you have any questions, I’m happy to chat.

    • Pete Harrison on November 16, 2022 at 10:12 pm

      hi Mitiam,
      as I see it, Strattic’s ability to take a WordPress site and generate a static version is great, but confusing too. Why would I build a site using WordPress with all it’s dynamic capabilities for a static site, except for prototyping with a page builder.

      Taking an Elementor site as input to Strattic will either be very complex or end up with a rather ‘dirty’ static site. However, something as a halfway house, using WordPress and Strattic in a headless manner might be the best of both worlds

      regards
      Pete

      • Miriam Schwab on November 17, 2022 at 5:03 am

        Hi Pete,

        Most of the use cases for building a site with WordPress work perfectly on Strattic. So you can build your site, use the dynamic functionality of WordPress to create a beautiful frontend and generate content, and then publish it as static. The most common types of dynamic functionality will continue to work on the static site on Strattic, like forms, search, 301 redirects. We also make sure SEO related stuff gets deployed to static like XML sitemaps and robots.txt.

        Anything client-side like analytics, chat boxes, and even A/B testing work on Strattic too. We have very large, complex sites running on our platform successfully.

        Here’s some information about what we support:
        https://www.strattic.com/features/
        https://support.strattic.com/en/articles/3719682-strattic-compatibility
        https://support.strattic.com/en/articles/6230599-supported-plugins-and-tools-for-static-headless-wordpress

      • David Waumsley on November 17, 2022 at 5:21 am

        Hi Pete,

        Oddly enough I have ended up seeing static WordPress sites as a good way forward for me. I will do some content soon on it.

        Rather than a more advanced “headless” approach (I think Strattic offers) I have been exploring via a simple free plugin called Simply Static.

        Mostly, its the same plan as above in the sense that a static site is pushed to Github and on to a CDN hosting service like Netlify or Vercel (or a growing number of mainstream providers like Cloudflare and Digital Ocean making this approach easier).

        The main change is I probably won’t start with one the new static site generators (I mentioned the Astro SSG) but instead will use a local install of WordPress to do my templating of menus and SEO.

        Being local (or hidden) I’m then not forced to accept update changes in WordPress and its plugins (my main gripe), but can still use its power to manage content creation.

        The “flat” output would still allow me to own it and move it to SSG’s like Astro or 11ty when I think that market is more settled.

        BUT, this has all led me to thinking that it’s time for me to scrap WP page builders in favour of my own simple theme with (maybe) ACF flexible content for the clean code.

        I think the recent CSS/browser revolution has reduced the time saving advantages of page builders (for those who don’t mind a bit of code).

        I also think CSS grid will start to impact on mainstream web layouts. As flexbox is one dimensional most page builders, including Gutenberg, have focused on the row template. It’s all rows!

        I think we will start seeing more of the original inspiration for grid CSS – those fabulous glossy magazine page layouts with lot of white space and sections that break out of rows.

        One page builder seems to have jumped on this: https://webflow.com/blog/build-css-grid-layouts-visually-in-webflow

  4. Elvis Krstulović on October 3, 2022 at 10:53 am

    great article David. I echo much of the sentiment i find here. I have my self looked to a little bit different direction, which is Kirby CMS. A modern php cms, that is not opinionated like WP, It can be a staticaly generated site, or it can have admin panel (entirely customizable) but without db, or one can attach a db to it. it has no default post type, you decide what content it will hold … it can also be headless. The php i see on their site is immediately readable coming from WP. I chose to start exploring it, as I feel there is much more for me to learn in PHP space, and it seems really focused on custom sites built around the client needs.

    all in all wish you much luck with jamstack, and will be following your updates on that front

    • David Waumsley on October 3, 2022 at 3:32 pm

      Nice to see you here Elvis. Kirby does seem pretty darn cool. If I had any PHP skills to build on I would have probably gone over to that. I going to be quiet for a while with some travel and learning time due, but trust me I shall be back banging on about some nonsense. It seems exciting times again. Thanks for this comment 🙂

  5. Charles Metzger on November 16, 2022 at 4:44 pm

    A lot of what you wrote here resonates with me. I love Beaver Builder, but I find myself building (in WPCodeBox) a lot of global CSS classes. I also miss that the builder doesn’t natively give us the ability to use flexbox, grid, and modern sizing tools (like clamp() ).

    I know it wasn’t the point, but I’d love for you to expand a bit on: “strip out all CSS from Beaver Builder on my starter site and begin replacing it with a “mobile first” grid layout system”!

    • David Waumsley on November 16, 2022 at 7:31 pm

      Thanks Charles. I meant to follow up earlier, but went travelling and then got flu!. My direction has shifted, but I’ll try to do a video on what I was doing with Beaver Builder.

      It is not too different to how the Mr. Fent grid plugin for Beaver Builder works. You assign grid to a row and in that create column groups (not columns). As these stack vertically that is by default mobile first.

      Then, within a media query for large devices, I added “grid template areas” to position the column groups (in the grid). For example:

      main .fl-row-content {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: var(–size-4);
      grid-template-areas:
      “m1 m1 m1 m1 m1 m1 m2 m2 m2 m2 m2 m2”
      “m4 m4 m4 m4 m4 m4 m3 m3 m3 m3 m3 m3”
      “m5 m5 m5 m5 m6 m6 m6 m6 m7 m7 m7 m7”
      “m8 m8 m8 m8 m8 m8 m9 m9 m9 m9 m9 m9”;
      }

      The template area names (above) are assigned to pseudo elements like this:

      main :nth-child(1) {
      grid-area: m1;
      }
      main :nth-child(2) {
      grid-area: m2;
      }
      main :nth-child(3) {
      grid-area: m3;
      }

      So, with this I can change a main content area from the regular BB layout to a grid layout by changing the BB row (in advanced settings) from the default “div” to “main” . No added CSS selectors. Just the one row. There is more to it, but that is the gist.

      • Charles Metzger on November 16, 2022 at 7:58 pm

        That’s a great explanation, thank you! I’ve almost purchased his plugins a bunch of times but didn’t because I felt like I shouldn’t need a plugin to do that. So I added some display: flex classes and got what I needed. But I’m gonna have to play around this week with a larger system.

        For all the help that builders (and WP itself) provide, I spend a lot of time fighting against them and undoing decisions. Not unlike my relationship with Bootstrap 5-10 years ago, actually!

        Thank you for the great content, as always!

        • David Waumsley on November 17, 2022 at 6:34 am

          “I spend a lot of time fighting against them” I definitely can relate to that! I am feeling the golden age of the page builder is coming to an end for me.

          This week I started building my own simple WP theme for local static site generation (more on this later). It’s made me really appreciate WordPress as a basic PHP CMS.

          I’d have been so much happier if Automattic has concentrated on the CMS side of thing (better custom fields and media library) instead of chasing after Wix customers.

Leave a Comment