Home / Blog / Professional Services Debuts Node.js Application for Acquia Engage

Professional Services Debuts Node.js Application for Acquia Engage

Last month, Acquia announced that it expanded Acquia Cloud to support Node.js, the popular open source JavaScript runtime. As a member of Acquia’s Professional Services team, it’s been exciting to learn more about the new Node.js hosting offering and the technical opportunities that it offers. The PS team also learned that the timing of the Acquia Engage conference was going to align nicely with Acquia’s new offering, and we viewed this as an opportunity to create something unique for the conference.

Acquia’s Node.js hosting gives developers the ability to create a fully decoupled Drupal architecture. We took a step back and reviewed options for creating an application that would make use of Node.js’ strengths and relate to the conference. The core focus of any conference is the presentation lineup, so we focused our efforts around building an application that could provide attendees with real-time schedule lineups and agenda logistics. To do this, Acquia’s Professional Services team set out to build a Node.js application that would control the content displayed on digital signs throughout the conference center.

What is Decoupled Drupal Again?

A decoupled architecture allows developers to utilize any technology to render the front-end experience (“the glass,” where a user interacts with an application) in lieu of the theming and presentation layers that come with a coupled CMS out-of-the-box. In a decoupled Drupal architecture, the Drupal back end exposes content to other front-end systems, such as native mobile applications, conversational UIs, applications built in JavaScript frameworks, or digital signs.

At a high-level, a “headless” or “decoupled” Drupal website utilizes a secondary application to present data visually. The second application introduces a new level of technical freedom and opportunity on multiple levels. For example, decoupled projects provide the freedom to choose JavaScript frameworks, where real-time data and speed are a major strength. This gives technical leads flexibility to choose the tools that best suit the scope of their project.

Some of Acquia’s customer’s have already been taking advantage of decoupled Drupal to support a variety of use cases. POWDR Resorts is using decoupled Drupal to power JavaScript front ends, while Princess Cruises is using a decoupled Drupal build to serve content to digital signage onboard their ships.

How the Acquia Engage Node.js Application Works

The architectural workflow of the Engage Node.js application consists of two separate codebases. One is a Drupal backend and the other is a Node.js application using Ember to present the UI.

The Drupal 8 back-end application was built using the Lightning sub-profile “headless Lightning”. The “headless Lightning” distribution extends the efforts of the Reservoir and Contenta projects, by focusing on the ability to quickly serve API content for ingestion by decoupled applications. Acquia’s marketing team can use the intuitive and familiar Drupal UI to create and manage content, including session presentations, case studies, and testimonials. With an emphasis on authoring experiences, marketing teams can easily manage Drupal content without extensive technical expertise.

Drupal UI
In the Drupal UI, Acquia’s marketing team can create content for Lynne Capozzi’s “Welcome” presentation. This content will be displayed on digital signs throughout the conference through the Ember.js front end.

The front-end application uses Ember for its UI and Ember Data to consume data the Drupal API. Node.js serves the Ember application and pre-renders the application’s HTML. For example, Engage attendees can learn more about Lynne Capozzi's ‘Welcome’ presentation, which is displayed on the top left section of the screen. This is the same piece of content that was being created in the Drupal UI. Now, it’s being displayed by Ember.js on the front end.

conference screen

This separation of concerns allowed us to rely on the respective strengths of both Drupal and Node.js to build the application. The end result is a superior experience for both conference visitors and Acquia’s marketing team.

What should Engage conference attendees expect to see?

Attendees of the conference will be able to see the Acquia Engage application on various screens throughout the InterContinental Hotel. The application will display real-time session information, such as the time and location of presentations. The session and speaker information will be the main focus of the left content rail, and this data will be animated according to the active sessions. The main content area will feature award finalists, case studies, and interesting facts related to the conference. The content footer will present session data in a scrolling ticker, which is animated for a fluid display.

If you are interested in learning more about the Acquia Engage Node.js application, check out Beth Linker’s presentation at Acquia Engage: Decoupled Drupal and JavaScript: The What and Why of the Trend. Beth will be taking the stage at 11:30 a.m. on Wednesday to share how you can get the most out of Acquia Cloud by using Node.Js.

Special thanks to Brian Reese and Dane Powell for helping to write this blog, and thank you to the Professional Services’ Node Tiger team for developing our Engage Node.js application.

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Filtered HTML

  • Use [acphone_sales], [acphone_sales_text], [acphone_support], [acphone_international], [acphone_devcloud], [acphone_extra1] and [acphone_extra2] as placeholders for Acquia phone numbers. Add class "acquia-phones-link" to wrapper element to make number a link.
  • To post pieces of code, surround them with <code>...</code> tags. For PHP code, you can use <?php ... ?>, which will also colour it based on syntax.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <h4> <h5> <h2> <img>
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.