Sector(s)
Team Members
SIM makes it simple for millions of citizens in the Netherlands to manage their affairs with their local government. To help our customers serve their citizens, we've maintained our own content management system for years. When the time came to replace it, we went for a Drupal-based solution: a single page application using Drupal as its back end.
About the project
The goal was to replace the then-current system, SIMsite3, completely, and in doing that offer our customers an improved system with which to manage their websites. With Drupal, we can provide a safe and reliable content management system, tailored to the needs of local and regional governments.
We decided early on that we wanted more flexibility in the front end, that is, on the website end of things. And so we chose to use Drupal as a decoupled CMS, which provided its data to the front end, which we built using React. Written in JavaScript and running both on the server (using Node) and in the browser, this enabled us to quickly build a complete website framework, on top of Drupal, that provides a user-friendly, accessible, modern browsing experience. Because this website framework succeeds our legacy system, called SIMsite3, we chose to call it Cuatro, from the Spanish word meaning 'four'.
Communication between Drupal and Cuatro happens using GraphQL. For every visitor, we fetch data about the menu structure and site configuration to build the basic look of the website. Webmasters can control many things themselves, such as the type of menu to show on the website, the location of search boxes in the header and many smaller details such as the colors of text, fonts or other predefined style elements. All of this is managed in settings pages in Drupal and fetched using GraphQL.
When the basic site structure is set up, we fetch the body of the page using the URL path as a parameter for the corresponding GraphQL query. Drupal will then respond with information on the type of page that needs to be displayed and what should be shown on it. Sometimes, this requires fetching additional data, such as when a page has one or more "content lists", which are dynamically generated overviews of other pages, news items, et cetera.
Every page in Drupal, whether it represents a news item, a simple page or a specific landing page, can be composed by content editors using Paragraphs. Every paragraph implemented in Drupal has a corresponding implementation in Cuatro, which means that we are not so much building our customers' websites for them, but rather converting the expansive toolbox that is Drupal into one that can be easily used by our customers to build their websites themselves, with (save for an introductory period) little help from us.
Our front end framework uses caching as a performance tool; results of the GraphQL queries, as well as server-side rendered HTML pages, are stored in a cache to shorten the time required to display the results to the visitor. The caching system, written in Node and currently using Redis for its storage, uses tags that are supplied by Drupal to categorize cache entries and to determine which entries should be invalidated when content changes. Using the tags, Drupal tells Cuatro at appropriate times (such as when saving or deleting a node, when content is being imported from an external system, or when the configuration is changed) to invalidate the cache entries associated with those tags. This prevents stale cache data and in that, makes sure the front end is always up to date with the back end.
Drupal itself is obviously filled to the brim with many components from the community, configured to best serve our webmasters and content editors. The solution runs as a multi-tenant environment, which means that one installation serves all our customers simultaneously and it's the configuration that determines the differences. Based on which features a customer wants to use, we can enable or disable the corresponding configuration, content types and paragraph types in a simple click, enabling our consultants to quickly set up the Drupal instance to the required specifications. And with this, we can also offer a simple, 'lite' version to customers who need a smaller website, with less functionality, for a specific project or to just try out our solution.
Our complete website solution, using Drupal, the React-based Cuatro application and the caching layer was in 2019 awarded the Splash Award during DrupalJam in the Netherlands, and the International Splash Award during DrupalCon, both in the Government and Public Services category. We shared the award with FRMWRK, who were essential in getting us to a first production version of the product.
Why Drupal was chosen
SIM has been using its own, purpose-built, one-solution-fits-all content management system since 2000. This worked quite well for us, but this monolithic system gradually became less flexible and maintainable and started getting in the way of progress. The time had come to move on to something new. And building another CMS by ourselves in this day and age? Not really a viable option.
We landed on Drupal because of its many possibilities, large community and extensive history; we knew that it could serve as a large toolbox from which to choose the elements that best suit our customers' needs, and with a couple of dedicated Drupal developers bringing their years of experience, we could hit the ground running.
Technical Specifications
Drupal version:
