A Closer Look at Acquia’s Cohesion

February 26, 2020
By Wade Stewart,
Senior Developer

At one point, launching a website was considered to be the end goal. Sleek, modern, beautiful — if you build it, they will come. However, we know that the launch date is never really the sole objective; there’s so much more to consider: how will this site improve our team’s workflows, how will we grow and evolve our site, how will we add landing pages or companion sites?

Addressing the future goals of our website and marketing requires us to think differently about the design and component systems we create, planning for the processes we know and preparing for the unexpected.

As Acquia continues to expand its product offerings and capabilities, we are especially excited about Acquia Cohesion, a visual site builder that provides a faster way to build and update scalable, enterprise-level Drupal sites. Acquia aims to address the modern challenges of building and growing websites, supporting flexible teams and workflows with an easy-to-use interface that allows you to create and maintain a low-code, component-driven site.

Acquia Cohesion: Comprehensive, Collaborative, & Lean

Acquia Cohesion is a comprehensive, collaborative, and incredibly lean tool that shifts the Drupal theme layer to the user interface (UI). This allows marketing and content teams the flexibility to make changes to components on their own without the burden of a bottom-up code release and deployment schedule.

Like with any enterprise-level site, Cohesion projects will still require a typical team consisting of: project managers, design and user experience, developers, and front-end expertise. Working together, a cross-functional team using Cohesion can build reusable, consistent components that are shared across pages, templates, and ultimately across multiple sites. This means your sites are built faster with fewer development resources through a rich, powerful editing experience.

There are many visual site builders in the market. Sites such as Wix or SquareSpace, allow marketers to have more control over content and layout. These site builder solutions are typically touted as being fast, easy, and something anyone can build and maintain. 

If we loosely compare those sites to Cohesion, we find that Cohesion is so much more than an improved editing experience and control over the marketing message. Brand consistency and the flexibility to adjust the message over time is critical, but let’s not forget Cohesion also has the benefit of Drupal’s enterprise-level scalability, security, accessibility, and governance to reach the broadest possible audience.

Ultimately, Cohesion provides more power to the editor than ever before on a Drupal-built platform hosted through Acquia.

Becoming Early Adopters for Acquia Cohesion

As an Acquia Preferred Partner, we were eager to test drive Cohesion to get a feel for what it does, how it works, and how it can help our clients. As members of the Cohesion Early Adopters Program, we were provided a sandbox site and a build guide, as well as support documentation and videos on Acquia Academy. This allowed us to experience first-hand the powerful and flexible component-driven site builder, building out components, content, and a fully functional sample site to earn our Early Adopter status and gain valuable experience.

Building Consistent Components

One of the most impressive aspects of Cohesion is how you are able to use a visual interface to build the theme. While theme building is different, the theming approach is the same: start with consistent styles and components, then build them out into reusable layouts and templates. Cohesion is structured using Atomic design principles and should be the foundational approach for any Cohesion build.

Another impressive feature is the ability to have “Helpers” that can jumpstart pages and templates without the need to rebuild from scratch. Helpers allow site builders to create reusable elements such as CSS styles, layouts, and component fields. It even allows you to save content components that can be called on any page or template and can be updated globally with ease. This is extremely useful if you are assembling many landing pages that have consistent layouts and components, yet each needs to have slightly different content.

Build once, use everywhere. Over time, marketers have the ability to edit and tweak all the pages built. Or, they can copy and create a new version of the layout with minimal modifications. Regardless of the approach, marketers can be nimble to support new ideas for the content.

Changes to the Front-End Workflow

Theming in the UI

As a front-end developer that has built many Drupal themes, the biggest change is moving CSS from code to the UI. The templating process has also moved to the UI, however, that approach was not as difficult to grasp. One thing to note is that Cohesion content editors that have only a basic understanding of CSS or SASS (CSS preprocessor) may struggle with some of the more advanced styles required in Cohesion builds. Specifically, users should have a good grasp of concepts, such as Flexbox, to build some awesome layout variants and grid-type layouts.

Building in Cohesion, we found no limits to what you can style for a component. Cohesion even includes some out-of-the-box animation and interaction-based JavaScript. Styling non-Cohesion based elements or components is possible, provided that you know the necessary HTML elements and classes in use.

Cohesion is all about building momentum as your site takes shape. Starting simple, builders can easily set up basic elements such as base unit settings, color palettes, font, and icon libraries. More advanced features allow you to specify a responsive grid and custom SASS variables.

You also have total control of CSS via the UI where you can build out your base, global styles, and any custom styles that can be easily called via components and templates. Cohesion uses a tool called a Layout Canvas that essentially replaces Drupal’s core module, Layout Builder. The principals are basically the same. Layout Canvas is where users build components, templates, and pages.

Cohesion also allows builders to create component fields that can be connected to the component elements so that users can write custom headings, select images, etc. for unique components. Additionally, components can also be connected to existing content type fields for flexibility in site-building.

Additional Features for Acquia Cohesion

Working with Views

Another great thing about Cohesion is in how it interacts with the core Drupal module, Views. Theming Views can be hard, but Cohesion streamlines and simplifies the process. Cohesion doesn’t really change anything on the back-end related to Views; it still requires that a developer, build a view outside of Cohesion in the Views UI.

All of the usual displays, filters, relationship settings, etc. are still required. What Cohesion does is it changes the front-end process. There’s still a lot of layers to work through, such as needing a teaser template for each item that the View displays, a Cohesion View template to assemble the Views markup as well as additional elements such as pagers, filters, etc. And then finally a component that allows you to place a View block with a Cohesion Layout Canvas.

Webforms

Webforms can be styled by either theming form elements in Cohesion’s global style settings or creating custom CSS styles. The custom CSS then creates custom classes that can be inserted into the Webforms configuration making theming forms a breeze. 

Cohesion allows you to either place a Webform in a template or create a component where users can call a Webform. So, similar to Views, Webforms can be used with Cohesion but not necessarily “connected” or integrated at the moment. 

Search Engine Friendly

Cohesion offers the ability for site builders and content editors to add schema meta-data for search engines. This can be applied to practically any element allowing users to mark up their pages in a manner that can be understood by major search engines such as Google, Microsoft, Yandex, and Yahoo. 

Analytics

Cohesion provides the ability to add a variety of Google Analytics event attribute triggers as well as Data Layer event triggers making it easier than ever to manage Analytics on a site. Marketers looking to track and analyze user behavior and conversions will be excited about this feature.

Accessibility

Cohesion allows builders and editors to create fully accessible websites. Like with any project, regardless of the tool used, it is still up to both the site builder and the content editor to add and maintain accessibility. Developers have full access to the markup and component fields to create aria-based attributes, alt tags, etc. for content editors to manage.

Contrib Module Compatibility

At least from a front-end, CSS standpoint, you shouldn’t really run into any compatibility issues related to Cohesion in terms of the styling of non-Cohesion elements. That said, site builders need to be familiar with the markup and classes coming from any Drupal contributed module in order to theme properly.

Any module, even if not configurable in Cohesion via templating, is accessible provided that it can be placed using the Drupal Blocks system or referenced by an entity reference field. The only modules that Acquia lists as being incompatible are the Commerce and Workspaces (Drupal 8 Core) modules.

Conclusion

Cohesion is an exciting new product that has a lot of potential to support component-driven web development. Cohesion won’t be a fit for every project, but we are impressed with the component and templating experience as well as its reusable and scalable approach to site-building. While we have only scratched the surface with our initial test drive, we look forward to exploring Cohesion further and using it on upcoming projects.

Test Drive Yourself

Here are a few links to further explore what Cohesion is and what it can do for you.