A Progressively Decoupled Drupal Website Using React
Tools & Apps
Nominee
Case description
Savant is the leading customizable home automation company and has become the brand of choice for the world’s most luxurious homes, castles, and even yachts. Using the Savant app, home-owners can adjust their lighting, climate, entertainment, and security to fit their needs. The advanced personalization features make the difference between a smart home and a Savant Home. While the Savant ecosystem is created for the comfort of the home-owners, they sell their products B2B, which makes the dealer installing the Savant system the primary customer. Redfin Solutions worked with Savant’s design team to ensure that both the home-owners and the customer’s website experience match the reputation and quality of their luxury system.Savant was launching a new line of lighting products with USAI Lighting and needed a custom Fixture Design Tool to sell a line of customizable lighting fixtures. The challenge for Savant was the ease with which a customer would filter, search, and select from tens of thousands of lighting products. All of Savant’s products already existed in Salesforce but needed to be available from inside the Drupal website. In order to address this need, Redfin Solutions built a React app using a Drupal 8 back end.
The project required Drupal because Savant was comfortable with the Drupal administration interface, which powers Savant.com. The same operations in Salesforce would have been cumbersome, time-consuming, and ultimately too costly. Redfin Solutions still wanted the contextualized interfaces, workflow, site preview, and permissions that come with Drupal, but Savant needed to modify and manage the lighting products in Salesforce. Using a progressively decoupled approach, we were able to leverage nearly everything that Drupal provides out of the box, while giving the Fixture Design Tool the behavior and snappy feel of modern web applications.
After looking at Savant’s budget, goals, and mission, Redfin Solutions settled on a progressively decoupled tool using React. The header and the footer of the page are both parts of the Drupal framework while the tool itself interacts with Drupal through core’s REST API and the Entity Construction Kit (ECK). We chose the React framework because it allowed Savant the opportunity to create a mobile-friendly, React Native app in the future. We built a tool that Savant could use for the new line of lighting fixtures as well as for future products. Leaning on the Salesforce contributed module allowed the tool to draw information from Savant's existing database of products by syncing their lighting products into Drupal ECK entities. Additionally, the Fixture Design Tool uses the Search API and Search API Solr modules to query faceted search data from Solr, which provides lightning fast searching and dynamic filtering.
The key technologies involved in The Fixture Design Tool were, of course, React and Drupal. But a large number of additional open-source packages made substantial contributions to its success. Because Savant was comfortable with it, Redfin Solutions used Axios to manage XMLHttpRequests. For managing state, we used Redux with the redux-form library. React-router handled routing, and immutability-helper let us reach into state for specific needs. On the UI side, react-select allowed for beautifully styled selects, and react-modal provided accessible modals.
Inside of Drupal, a number of contributed projects were tantamount to the tool's success.
ECK - The entity construction kit let us separate and contain objects that were intended only as part of this tool--we have custom entities for jobs, specs, rooms, and all of the lighting products.
Search API / Solr - These controlled how products are indexed, which creates powerful faceting and lightning-fast queries when filtering the product line.
Salesforce - The Salesforce suite meant we could sync data in and out of Salesforce with little custom code. There were also a number of custom API endpoints written on the Salesforce side that we queried from Drupal by leaning on the authentication and authorization already provided by the Salesforce modules.
Drupal Core - This gave us the ability to create views that served as a REST endpoint for all of this data. It was easier because Views and REST APIs are a part of core Drupal.
Rest UI - This contributed module made it even easier to build the API quickly.
Case goals and results
The goal was to allow Savant customers and builders to use the new Fixture Design Tool throughout the entire lighting project. Each lighting job can have multiple specs, which contain rooms and the preferred lighting for each room. In turn, each room can have multiple loads, which represent a lighting circuit and the lights connected to it. A customer can save a job and return to it, or create multiple quotes per job by using additional specs.The Fixture Design Tool that Redfin Solutions and Savant created enables customers to start building customized lighting fixtures and instantly sort through the tens of thousands of products in Salesforce in a meaningful way. The dynamic filtering allows customers to apply only available options as they narrow their search. It warns them that choosing an unavailable option will start a new product search. When they find the perfect lighting fixture, the customer can save the project and get a quote for their client, or add it straight to their cart. Because of the Drupal back end, customers can even allow their employees certain permissions for the tool. For instance, entry-level employees could be allowed to search for lighting fixtures, but they could be denied access to buy lighting fixtures. Customers are using the tool with confidence, knowing that they are choosing the correct option for their client’s home and budget.
Challenges
The primary technical challenges involved in the scope of this project had to do with the disparate data locations and the sheer volume of products to deal with. Salesforce is always the canonical data backend at Savant, so any tool we created needed to be able to access that data in some intelligent way. The ease of use of the Salesforce suite of Drupal contributed modules was an eye-opener for Savant in terms of unlocking the power Drupal could now have.When dealing with the sheer number of product SKUs, but knowing that customers were really shopping by some kind of category of products, Redfin Solutions understood that the customer would really need a deep faceted search, which ultimately landed them on a single lighting fixture. We looked to Solr for lightning fast search results. We leveraged Drupal to index the Solr products, but then queried the Solr service directly from the React front-end, which led to a fantastic UX for Savant's customers.
A third hidden challenge that surfaced was marrying React Router to Drupal’s new routing method in Drupal 8. In Drupal 7, /a-registered-path/plus/anything would work to serve what was registered in hook_menu() as “a-registered-path.” In Drupal 8, each individual path must be registered along with any expected parameters, we had a hard time identifying a whole ‘URL namespace’ for the app to occupy. To solve this, Redfin Solutions implemented an Inbound Path Processor to munge all the “/plus/anything” down into a single parameter so that the registration of the routing in the .routing.yml file married well. It was fantastic to see that Drupal 8’s system for this kind of path processing was so easily accessible.