Drupal gets better when companies, organizations, and individuals build or fix something they need and then share it with the rest of us. Our community becomes better, stronger, and smarter when others take it upon themselves to make a positive difference contributing their knowledge, time, and energy to Drupal. Acquia is proud to play a part, alongside thousands of others, in some of the stories making tomorrow’s Drupal better than today’s. One of them Bassam Ismail’s.
Bassam Ismail has worked since 2010 as a front-end developer with several startups before joining Acquia as a Senior Front-end Developer. He has a keen interest in improving client-side user experiences and this is where his, “love for JavaScript and all the goodies that come with it,” originates. :-)
Decoupling--full, progressive, or otherwise--is a hot topic in Drupal-land. Drupal 8’s ability to support one or more different fronts ends makes it a great candidate for all sorts of use cases. It can serve as the backend running behind one or more front-ends at the same time: its native Twig-powered theming layer, producing “normal” HTML5-based websites; applications built on front-end frameworks like Ember.js and React.js; and even for native mobile apps for iOS and Android.
jam: What value does combining Drupal with a front end framework like React deliver to ...
- ... developers? Bassam: React lets you build large front-end applications by combining many, small React components. This “composable” UI can be easily tested and refactored. And frankly, I love being able to use the latest and greatest tools available to us on the front end.
- ... site owners and businesses? Bassam: The fast initial loads and smoother overall experience that a Drupal-backed site built on React.js can offer can improve time-on-site and conversion rates.
- ... the Drupal community? Bassam: This kind of architecture lets us become familiar with other technologies--I think “getting off the island” is still as relevant as ever--and meet their communities while improving Drupal’s content-generation and -management experience.
Bassam Ismail
Bassam’s session, React front-end for your Drupal 8 backend was one of several sessions at DrupalCon Dublin that touched on “decoupled” Drupal. For more perspective on the topic and information, see Contribution Stories: Preston So, Decoupled Drupal with Ember. Ed Faulkner's session from DrupalCon New Orleans, Amazing User Experiences with Drupal and Ember.
jam: Bassam, tell us about the background of your session. How did you come to submit it?
Bassam: I have been playing with React for a while now and I found it's declarative nature very appealing. By good fortune, I got to work on a large decoupled Drupal 7 website with React on the client-side in 2015. During that, I learned several patterns used for decoupling progressively and fully. My DrupalCon Dublin session became a platform to share everything I’ve learned so far. I wanted to share how and why we can use client-side frameworks with Drupal and how the fast, seamless applications they can produce can improve the user experience.
DrupalCon Dublin Session [video]
Bassam: My presentation is split up into four parts - Why you would want to bring a client-side framework into your Drupal application and how it can help; a React primer; a Redux primer; and patterns for using React, Redux and Drupal in harmony for building progressively and fully decoupled Drupal applications.
Session resources
jam: What is the state-of-play and what is coming next regarding Drupal and front end frameworks?
Bassam: The whole topic of decoupling Drupal 8 plus front-end frameworks hasn’t had a huge effect on Drupal yet. But if and when we standardise on one framework, we should start seeing the ripple effects throughout both “ends” of Drupal--front and back! The API initiative is the other key thing to look out for here. That will define how we will build applications using client-side frameworks like React for the client facing UI and the administration interface in the future.
Resources
Bassam has started a series of blog posts on progressively decoupled Drupal with React.
Here are some of Bassam’s code samples, showing various relevant patterns: