Vaibhav Jain

Vaibhav Jain

Recent Posts

My Experience with Progressive Decoupled Blocks

Posted by Vaibhav Jain on Aug 21, 2019 6:16:00 PM

The JS frameworks have changed quite a lot in Drupal especially with API-first concept adding to the scenario. It is only expected that developers are inclined towards learning more about JS and related possibilities.

Recently, I was tasked to render blocks on a page while keeping individual components encapsulated in their own. JavaScript has the potential to make web pages dynamic and interactive without hindering the page speed and so I decided to opt for progressively decoupled blocks.

I came across this Drupal module Progressive Decoupled Blocks, which allows us to render blocks in a decoupled way and seemed a perfect fit for the situation.

Anatomy of Progressive Decoupled Blocks

The module is javascript-framework-agnostic, progressive decoupling tool to allow custom blocks to be written in the javascript framework of one’s choice. What makes it unique is one can do all this without needing to know any Drupal API.

It keeps individual components compact in their own directories containing all the CSS, JS, and template assets necessary for them to work, and using an info.yml file to declare these components and their framework dependencies to Drupal.

Did it work?

I decided to test the module in the new Umami Demo profile, that comes out of the box with Drupal, with React and Angular blocks.

I used the Layout module and picked a page to place these blocks. This is one of the best parts I liked about the module, every piece of block content that we need to be placed on the page, can be done without even visiting the block page and setting visibility.

Module Architecture

The module has a custom block derivative, which searches for all components that have been added and exposes them as blocks. This architecture makes it super easy to add a new block.

You can refer to this git for the block derivative - https://git.drupalcode.org/project/pdb/blob/8.x-1.x/src/Plugin/Derivative/PdbBlockDeriver.php

Refer to this git for component discovery - https://git.drupalcode.org/project/pdb/blob/8.x-1.x/src/ComponentDiscovery.php

Possibilities

For React JS there are 2 examples in this module.

First is with a simple React Create element class, without JSX. This example renders a simple text inside a React component. This is a very good starter example for anyone who wants to understand how to integrate a react component with Drupal in a progressive way.

The second example is a ToDo app, which allows you to add and remove todo items to a list. It makes use of local storage to store any item that has been added. This app creates React components, integrate these components in other component and renders a fully functional DOM inside Drupal DOM in a progressive way.

This example comes with a package.json which needs to be installed before making it functional. However, the component did not render perfectly on Umami theme, I made certain changes to make sure it renders correctly. Patch attached in the end.

progressive decoupled block

I decided to extend this module and added a new component to render a banner block (comes OOB with Umami), and exposed this block as an API via JSON:API. As this was a very simple block, I decided to create this block without JSX. Also, I decided to generate the URL with static ID in the path. This can, however, be made dynamic, which I plan to do later in my implementation. I also decided to choose the same class names to save on styling. The classes can be found in the Umami theme profile.

(function ($, Drupal, drupalSettings) {
Drupal.behaviors.pddemo = {
attach: function (context, settings) {
$.ajax(drupalSettings.pdb.reactbanner.url, {
type: 'get',
success: function (result) {
var image = result.included[0].attributes.uri.url;
var title = result.data.attributes.field_title;
ReactDOM.render(React.createElement(
'div',
{
className: 'block-type-banner-block',
style: {backgroundImage: 'url(' + image + ')'}
},
React.createElement(
'div',
{className: 'block-inner'},
React.createElement(
'div',
{className: 'summary'},
React.createElement(
'div',
{className: 'field--name-field-title'},
title
)
)
)
), document.getElementById('reactbanner'));
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
console.log(textStatus || errorThrown);
},
});
}
};
})(jQuery, Drupal, drupalSettings);


Angular JS

Angular JS comes with many more easy and complex examples. Things didn’t work as smoothly as it did with React. There were a couple of changes we were required to make it work.

Please refer to this gist for the patch.

You will have to install node modules before, to make it work. Also, all JS is in the form of Typescript, which needs to be processed to JS before you can make it work.

Conclusion

The module gives you a great kickstart to move any block, rendered by Drupal, to a progressively decoupled block, using React, Angular or Ember as JS framework. However, you may want to extend the module or create your own to render the blocks.

Topics: Drupal, JavaScript & UI/UX, Architecture

Understanding Content Personalization with Acquia Lift

Posted by Vaibhav Jain on Jan 30, 2019 3:16:00 PM

For enterprises today, there’s no escaping the pressing need for personalization - and not just content on website, but rather personalizing the whole experience. That means giving every single user - prospect or customer - what they want, sometimes even before they know they want it. However, while most businesses realize the need, they are at a loss when it comes to actually delivering personalized experiences.

The two major questions that enterprises are faced with:

  • What are various data points your should be tracking to even begin thinking about personalizing?
  • How do you deliver a personalized experience on the site?

For answers to the first question, you can take a look at “5 Key Technology Pre-Requisites to Deliver Advanced Personalization”.

Moving on to actually delivering a personalized experience on the site, there are a host of technology solutions that can enable that. But if you have an enterprise site build on Drupal, there’s nothing more suitable than Acquia Lift.

What is Acquia Lift?

Acquia Lift is a solution designed to bring in-context, personalized experiences to life. It’s a powerful blend of data collection, content distribution, and personalization that enables enterprise marketing teams to closely tailor the user experience on the site. And all this without excessive dependence on development or IT teams.

Some of the highlights of what makes the Acquia Lift-Drupal combination powerful are:

content personalization with Acquia Lift - features

How Does Acquia Lift Deliver Personalization?

Acquia Lift gives enterprises three key elements to drive their personalization:

Profile Manager

This helps build a holistic 360 degree profile of your users, right from when they are anonymous visitors on the site to the the stage where they are repeat customers. It collects user demographic data, historical behaviour data, and real-time interactions so you can get a complete understanding of who your users are, what they want, and then work on how best to deliver that.

A lot of this data is collected as users engage with different content pieces. The tags on each type of content are leveraged by Lift to assign an increasing number of attributes to each user. The Profile Manager can then help marketing teams segment users on the basis of these attributes, and create target groups for their personalized experiences.

Content Hub

The Content Hub is a cloud-based, secure content syndication, discovery and distribution tool. Any piece of content created within the enterprise can be aggregated and stored here, and then searched and accessed across the enterprise. Faceted search and automatic updates give visibility into the entire gamut of content being created within the enterprise - in different departments, across websites, and on different platforms.

This content is stored in a normalized format, making it ready to be pushed out to any channel, where it can be presented in the most effective manner.

Experience Builder

This is the heart of Acquia Lift - the element that allows you to actually build out a personalized experience from scratch. The Experience Builder is a completely drag-and-drop tool, that lets you customize segments of your website to showcase different content to different target segments, based on data pulled from the Profile Manager.

Enterprise marketing teams can set up rules that define what content should be shown to which segment of site visitors. They can also perform A/B tests to accurately determine what type of content drives more conversions for which user segments. And all of this can be done with simple overlays atop the existing website segments, without impacting the base site, and without depending on IT teams for implementation.

Why Acquia Lift is the best bet for Drupal sites

Tools like Qubit, Raptor Smart Advisor, Convertize, REES46, and ZenClerk all offer personalization solutions in varying degrees. However, if your enterprise site is built on Drupal, Acquia Lift should be your only personalization tool of choice. Because the degree of integration and flexibility that your marketing teams will derive from using Lift is simply unparalleled. Acquia Lift and Drupal belong to the same technology universe, and so the entire process, from deploying the Lift solution to setting up personalizations, is extremely quick and effective.

Acquia Lift is a powerful tool designed to work with all major content management systems. But for personalization on a Drupal site, it’s a must-have.

Looking for a personalization tool for your Drupal site? Srijan teams have in-depth expertise in working with Acquia solutions, and can assist with deploying Acquia Lift for your enterprise.

Just drop us a line, and our Acquia experts will be in touch.

Topics: Drupal, Personalization

Discussion

Write to us

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms Of Service apply. By submitting this form, you agree to our Privacy Policy.

See how our uniquely collaborative work style, can help you redesign your business.

Contact us