An isomorphic application for the Influize marketing agency

Business challenge

As we described above, the needed a website to be able to manage high load, be easily administrated, and be SEO-friendly.

Let’s see how these goals were technically supported.

Solution

ADCI Solutions was in charge of development, testing and support; the business logic and designs were created by Influize.

What did we do in terms of development?

• Setting up server environments on Amazon Web Services, spinning up the application, deployment
• Application architecture
• Back-end and front-end development, business logic implementation
• Integration with third-party services like SendGrid for mass mailing
• Manual testing
• Post-release support and new features development

Back end

• Website hosting: AWS
• Main technologies: Drupal 8, Node.js
• Drupal distributions used: Drupal Contenta CMS
• Caching: Memcached and Varnish

This caching system helped us reduce the number of queries to a database and PHP, and, consequently, it reduces the load time. 

The Drupal Contenta CMS connects Drupal and Node.js. Node.js was chosen to build a SPA because these apps are faster and users switch between pages without waiting for pages to load.

The architecture allows building new pages from independent blocks - paragraphs: any non-tech person, for example, a website manager, can create pages on their own and no development effort required. These blocks are already styled and work properly. 

But let's dive deep into the Drupal modules that we chose.

Drupal solutions used in the project

The back end is initially based on the Drupal Contenta CMS distribution.

The following out of box modules are actively used:

• JSON:API for the CRUD operations with Drupal entities and simple queries.
• Search API + Views + RESTful Web Services for heavy search queries.
• JSON:API Extras module with a few custom field enhancers to customize default fields and entities serialized output.
• JSON:API image styles, WebP, and ImageMagick modules help us to work with site images and icons, convert them into the .webp format, and output image styles.
• Simple OAuth & OpenID Connect for the node client app authorization.
• Webform and Webform REST modules to apply and manage form submissions.
• Swift Mailer for the integration with a mail client.
• Memcache, Purge + Varnish purge modules for improving site performance. The Drupal cache is stored in Memcached and HTTP cache, served by varnish, and is warmed by e-tags using the Purge module.

Front end

Influize - is an isomorphic application: firstly a server shows a prerendered page and only then React on the front end processes and displays this page. 

Next.js uses server-side rendering on our website. It renders the application not only in a browser but also on the server. It’s crucial for SEO, and if we didn’t implement this approach, each page would reload every time a user opens it and since this is a SPA, it would not index well.

Outcomes

We already have something to share in July 2020 - after just a couple of months after the launch.

• We have already witnessed several campaign purchases. All the requests are saved on a website and automatically forwarded to the business managers of Influize. 
• The organic channels are already working well after a couple of months after launch: the average CTR in July for keywords and phrases was 4,6%. According to the HubSpot research, this number is higher than average for the Technology industry which is 2,38%. Order a website on Drupal that is greatly optimized for SEO.