An Open Source API driven PWA. Introducing Contenta.
- Fully configurable API first CMS. (Contenta)
- Secure bridging between CMS and PWA frontend. (Waterwheel.js / Json API).
- Lighthouse audited PWA.
- Just brilliant :)
1. Introducing API first technology
A few years ago, headless was cool. It was a new idea floating around with web developers. It was going to solve one of our fundamental problems. There were so many people, doing so many different things (in so many different ways), working with so many technologies that the whole development landscape was a logistical nightmare. A native mobile app, a website, a blog, a micro-site for team B who didn’t like the blog, another website for new manager C who wanted to implement D. A Wordpress site here, a Drupal site there. Then manager E started and wanted to change the strategy of project A.
Good project management was only one piece of the puzzle, the underlying problem with the whole setup was that there was genuine business rationale driving decisions to use a wide range of technologies. There was no single technology capable of delivering even close to what an enterprise client would demand. I’ll do a code audit of your existing setup, shouted the agency! Ohhhh, this is awful. You should have used [insert whatever they knew here] because [insert previous developer] was obviously a drunk doing his first site in [insert whatever technology they didn’t know here].
Things got messy and businesses who could execute effective project and client management become successful. As a developer in these times, the technology was more of a product than the code (the actual paid for service). Drupal vs Wordpress blogs were taking over the internet and the only people more confused than the developers bashing out their websites with tunnel vision were the clients left to navigate this minefield.
So, it was clear. Whoever could develop a process or technology to use as a platform to consolidate and deliver on the massive range of enterprise demand for software would be perfectly placed. For a long time, the market has been crying out for the ‘one’. Not a tool to do everything, but a platform or solid scaleable base for their diverse technology needs. Many businesses have entered the market with just this idea, and some have gained a certain amount of traction. Contentful for example, raised $13 million usd last year with their bespoke “API first CMS”,
http://press.contentful.com/129213-contentful-secures-13m-for-api-driven-content-management-platform
So, while the market was shifting, Drupal 8 was being released and uptake was gradually increasing. Meanwhile, the months were passing and decoupled Drupal or Headless API technology was being experimented with to mixed feedback:
The thing about Drupal is that it is the most used Open Source CMS for enterprise in the world. It is a serious tool that hundreds of thousands of businesses rely on daily to deliver their business objectives. I’m sorry to say it, but Drupal isn’t cool. It isn’t supposed to be. It is supposed to be reliable, safe and scaleable first. The early adopters seeking to change the world tried to push the boundaries of what Drupal was capable of to create a new revolutionary concept. But... Drupal wasn’t ready.
Core modules would change with questionable upgrade paths, code had to be refactored and sometimes for no apparent reason the setup would randomly break down. Experimental Drupal was never going to be a good product. However, slowly and surely (as is the way with Open Source) a lot of talented people were talking, and working, and contributing. Over the last 3 years the Drupal community hasn’t forgotten about headless, it has been slowly and inevitably working towards making it practical. As someone who was an early adopter (and frustrated), I can now say quite simply, ‘it works’. It isn’t exciting anymore. But. It works.
2. What is Contenta
Recently I downloaded contenta for the first time. The most impactful thing that struck me was that it didn’t feel like Drupal. I was taken straight to an API page. There were few of the ‘artifacts’ that I normally spend time stripping out of a standard Drupal installation. It doesn’t even have a front-end! Let that sink in, you CANNOT actually SEE any of the content on your Drupal site. And it is wonderful. I was presented with a slick UI including some mature API modules installed and preconfigured. This is an installation built to be the API at the center of your technology stack.
Contenta is the result of years of work within the Drupal community. It strips out the idiosyncrasies we associate with Drupal development and most importantly (for me), it feels light. One of my biggest issues with Drupal as a whole is that it is so comprehensive and built for so many different purposes, that it feels like an inefficient tool to do something simple. While you could do ‘anything’ with Drupal, it often felt like overkill.
What we are aiming for in the currently development climate is a simplification of the technology stacks we are using. Time is money, and clients and developers can get frustrated about the costs of developing websites. It is absolutely clear that the web development sector needs a spring-clean. The tools we use have to be more specialist and fit for purpose, and time must be used more efficiently. This means writing better, more sustainable code. Using the right tools for the job. Using frameworks that are fit for the modern purpose.
3. It’s all about the API
Drupal 7 can rightly claim to the best Open Source Enterprise CMS on the market. However, as time passes, it is becoming less relevant. People are questioning whether we need PHP rendering systems at all and what is the future of multipurpose generalist software in an ever-specializing climate. There is the legitimate question of whether we actually want one piece of software to do ‘everything’. The landscape is shifting and the role of Drupal has to change.
As someone who works a lot with APIs, it is hard to explain quite how much time you can save by having a well documented, standard API for all your data. This is enterprise standard data architecture, secure and scaleable, available instantly. One standardized API platform in the middle of your technology stack that can be consumed by almost any technology you would be likely to use in web development. This is the core of the technology stack we have been searching for.
It so happened that my discovery of Contenta coincided with the release of Angular 5.0, and so, something beautiful was born.
4. So I built a Progressive Web App :)
You already know what it is but here is Google to explain anyway:
In the past I’ve connected the Drupal API with client-side MVC frameworks to do fancy D3 data visualization. I’ve played around with some cool stuff with Maps API and other Google APIs in my time. But I just knew that there was a power in this installation staring me in the face that had to be shown with something more impactful. What is the hot topic of 2017. Progressive Web Apps. What if, I thought. What if, we could use Contenta as a simple API to control the content of the next generation of websites. And it was easy…
Waterwheel.js is an Acquia supported library built to integrate from any client-side MVC frameworks into Drupal 8 core. Essentially it is a helper module to make sure that the bridge between your back-end and your front-end is secure and standardized. The very heart of Open Source is that the foundations must be secure, and now we can quickly and reliably connect our front-end applications with our back-end with maintained code from established open-source teams. Headless isn’t experimental anymore.
The technical side of the implementation was painless, the Contenta team already have a working prototype in Angular for inspiration and waterwheel.js is stable.
It was quite literally just a case of configuring the Contenta API with my content, integrating Waterwheel.js into Angular and then mapping the Drupal content into my Angular components. Three little steps, and the result is a working Progressive Web Application. A website that functions like a mobile application. A website that downloads itself onto users devices for instant loading. A website that is capable of native push notifications into the mobile devices accessing the website. An API that is robust and infinitely configurable. And all the component parts of this Open Source integration are backed by technical heavyweights. The future of websites has arrived and Drupal is once again at the beating heart.
5. Summary
We have slowly and inevitably arrived at the point we wanted to be at 3 years ago, when decoupled Drupal was as fashionable as PWAs are right now. Drupal, with its enormous community and brand has built a scaleable and secure API first piece of software. This is something that the fantastic Drupal contributors and developers have to shout about more. The market needs to know about these possibilities. The debate about Angular and React, about AMP and countless other shifting sands in this fast moving world will continue to evolve and new debates will emerge within even newer and trendier concepts. But one thing is clear, good old Drupal will be there to prop up the shifting sands.
If you are a client who has been stung by an overpriced and under-delivered headless project, or if you are a developer who has written off the principals of decoupled Drupal / headless as a gimmick, I urge you to have another look. Feel the power at your fingertips! Have a play. Rekindle the flame. Like any long-term relationship, it might not be as exciting as it was in the beginning, but with contenta it is ready to commit and here to stay.
Thanks for reading
You can see the PWA developed in Angular 5 / Drupal 8 on our agency site here: https://theline.digital (the PWA IS the agency site).
I’ve previously published an example of some of the cool things you can do with this technology here: https://codeburst.io/data-visualization-using-open-source-web-tools-a-glimpse-of-the-future-using-a-practical-example-1ead08a65f2 (and more will come.)
About the author
If you enjoyed the article please contribute your grain of sand by sharing / clapping. User engagement is used by Medium to recommend content so if you like the content then giving a clap or share is an extremely helpful way to support me and allow me to spend time on further articles.
These are exciting times and I hope you take something away from my article, feel free to connect with me on my twitter and LinkedIn accounts.☺
It goes without saying that thoughts / opinions expressed in this article are my own, not associated with Chainfrog!
Further Reading:
Other articles I have written about similar subjects.
