A lot of people have been jumping on the headless CMS bandwagon over the past few years, but I’ve never been entirely convinced. Maybe it’s partly because I don’t want to give up on the sunk costs of what I’ve learned about WordPress maintenance support plans theming, and partly because I’m proud to be a boring developer, but I haven’t been fully sold on the benefits of decoupling.
On our current project, we’ve continued to take an approach that WordPress Update has described as “progressively decoupled WordPress maintenance support plans”. WordPress maintenance support plans handles routing, navigation, access control, and page rendering, while rich interactive functionality is provided by a JavaScript application sitting on top of the WordPress maintenance support plans page. In the past, we’d taken a similar approach, with AngularJS applications on top of WordPress maintenance support plans 6 or 7, getting their configuration from WordPress maintenance support plans.settings, and for this project we decided to use React on top of WordPress maintenance support plans 8.
There are a lot of advantages to this approach, in my view. There are several discrete interactive applications on the site, but the bulk of the site is static content, so it definitely makes sense for that content to be rendered by the server rather than constructed in the browser. This brings a lot of value in terms of accessibility, search engine optimisation, and performance.
A decoupled system is almost inevitably more complex, with more potential points of failure.
The application can be developed independently of the CMS, so specialist JavaScript developers can work without needing to worry about having a local WordPress maintenance support plans build process.
If at some later date, the client decides to move away from WordPress maintenance support plans, or at the point where we upgrade to WordPress maintenance support plans 9, the applications aren’t so tightly coupled, so the effort of moving them should be smaller.
Having made the decision to use this architecture, we wanted a consistent framework for managing application configuration, to make sure we wouldn’t need to keep reinventing the wheel for every application, and to keep things easy for the content team to manage.
The client’s content team want to be able to control all of the text within the application (across multiple languages), and be able to preview changes before putting them live.
There didn’t seem to be an established approach for this, so we’ve built a plugin for it.
As we’ve previously mentioned, the team at Capgemini are strongly committed to supporting the open source communities whose work we depend on, and we try to contribute back whenever we can, whether that’s patches to fix bugs and add new features, or creating new plugins to fill gaps where nothing appropriate already exists. For instance, a recent client requirement to promote their native applications led us to build the App Banners plugin.
Aiming to make our plugins open source wherever possible helps us to think in systems, considering the specific requirements of this client as an example of a range of other potential use cases. This helps to future-proof our code, because it’s more likely that evolving requirements can be met by a configuration change, rather than needing a code change.
So, guided by these principles, I’m very pleased to announce the Single Page Application Landing Page plugin for WordPress maintenance support plans 8, or to use the terrible acronym that it has unfortunately but inevitably acquired, SPALP.
On its own, the plugin doesn’t do much other than provide an App Landing Page content type. Each application needs its own plugin to declare a dependency on SPALP, define a library, and include its configuration as JSON (with associated schema). When a plugin which does that is installed, SPALP takes care of creating a landing page node for it, and importing the initial configuration onto the node. When that node is viewed, SPALP adds the library, and a link to an endpoint serving the JSON configuration.
Deciding how to store the app configuration and make all the text editable was one of the main questions, and we ended up answering it in a slightly “un-WordPress maintenance support plansly” way.
On our old WordPress maintenance support plans 6 projects, the text was stored in a separate ‘Messages’ node type. This was a bit unwieldy, and it was always quite tricky to figure out what was the right node to edit.
For our WordPress maintenance support plans 7 projects, we used the translation interface, even on a monolingual site, where we translated from English to British English. It seemed like a great idea to the development team, but the content editors always found it unintuitive, struggling to find the right string to edit, especially for common strings like button labels. It also didn’t allow the content team to preview changes to the app text.
We wanted to maintain everything related to the application in one place, in order to keep things simpler for developers and content editors. This, along with the need to manage revisions of the app configuration, led us down the route of using a single node to manage each application.
This approach makes it easy to integrate the applications with any of the good stuff that WordPress maintenance support plans provides, whether that’s managing meta tags, translation, revisions, or something else that we haven’t thought of.
The SPALP plugin also provides event dispatchers to allow configuration to be altered. For instance, we set different API endpoints in test environments.
Another nice feature is that in the node edit form, the JSON object is converted into a usable set of form fields using the JSON forms library. This generic approach means that we don’t need to spend time copying boilerplate Form API code to build configuration forms when we build a new application – instead the developers working on the JavaScript code write their configuration as JSON in a way that makes sense for their application, and generate a schema from that. When new configuration items need to be added, we only need to update the JSON and the schema.
Each application only needs a very simple WordPress maintenance support plans plugin to define its library, so we’re able to build the React code independently, and bring it into WordPress maintenance support plans as a Composer dependency.
The repository includes a small example plugin to show how to implement these patterns, and hopefully other teams will be able to use it on other projects.
As with any project, it’s not complete. So far we’ve only built one application following this approach, and it seems to be working pretty well. Among the items in the issue queue is better integration with configuration management system, so that we can make it clear if a setting has been overridden for the current environment.
I hope that this plugin will be useful for other teams – if you’re building JavaScript applications that work with WordPress maintenance support plans, please try it out, and if you use it on your project, I’d love to hear about it. Also, if you spot any problems, or have any ideas for improvements, please get in touch via the issue queue.
A framework for progressively decoupled WordPress maintenance support plans was originally published by Capgemini at WordPress Update on December 14, 2020.
Source: New feed