Decoupled Blocks (ft. React, JSON API, GraphQL)
Drupal traditionally handles both content management and front-end rendering as part of its core functionality. Decoupled Drupal, in contrast, uses Drupal only for the content management, and does front-end rendering completely outside the Drupal ecosystem.
But what if you need to present a dynamic and real-time component for just a small subset of your site’s functionality? Can you have the best of both worlds -- using Drupal as your base and sophisticated JavaScript applications as an enhancement?
You can, and it’s called progressive decoupling -- leveraging parts of Drupal's rendering engine alongside your decoupled applications.
Attendees will leave with an understanding of the following:
The pros and cons of progressively decoupling your site
The process of adding React applications (or other JavaScript frameworks) as blocks in Drupal
Leveraging progressively decoupled blocks in Drupal regions
Configuration management between blocks and ReactJS applications
xposing Drupal data to the ReactJS app using RESTful means.
With these tools, intermediate Drupal developers can combine the takeaways from this session into a fantastic experience for both end users and site developers.
Tommy Sliker
Drupal Engineer & Themer at Kanopi Studios
Acquia Certified Developer - Frontend Specialist
I have been working with Drupal since 2010, initially as a Drupal Themer using contrib modules, HTML, CSS, and JS, while over time gaining more backend knowledge of custom module development, Linux, PHP, and GIT. At Kanopi, I work on Drupal support projects on both front- and back-end, developing new features for existing websites, keeping the websites up to date, and fixing bugs in the existing sites.
I enjoy messing with headless Drupal and Javascript frameworks, building features using PHP or JS, and loves the gratification of pushing something to production after a challenging journey. Within the open source community, I have contributed Drupal raps, as well as created patches to Drupal core and contrib modules over the years.
https://www.fldrupal.camp/sessions/design-theming-front-end-development/decoupled-blocks-ft-react-json-api-graphql
But what if you need to present a dynamic and real-time component for just a small subset of your site’s functionality? Can you have the best of both worlds -- using Drupal as your base and sophisticated JavaScript applications as an enhancement?
You can, and it’s called progressive decoupling -- leveraging parts of Drupal's rendering engine alongside your decoupled applications.
Attendees will leave with an understanding of the following:
The pros and cons of progressively decoupling your site
The process of adding React applications (or other JavaScript frameworks) as blocks in Drupal
Leveraging progressively decoupled blocks in Drupal regions
Configuration management between blocks and ReactJS applications
xposing Drupal data to the ReactJS app using RESTful means.
With these tools, intermediate Drupal developers can combine the takeaways from this session into a fantastic experience for both end users and site developers.
Tommy Sliker
Drupal Engineer & Themer at Kanopi Studios
Acquia Certified Developer - Frontend Specialist
I have been working with Drupal since 2010, initially as a Drupal Themer using contrib modules, HTML, CSS, and JS, while over time gaining more backend knowledge of custom module development, Linux, PHP, and GIT. At Kanopi, I work on Drupal support projects on both front- and back-end, developing new features for existing websites, keeping the websites up to date, and fixing bugs in the existing sites.
I enjoy messing with headless Drupal and Javascript frameworks, building features using PHP or JS, and loves the gratification of pushing something to production after a challenging journey. Within the open source community, I have contributed Drupal raps, as well as created patches to Drupal core and contrib modules over the years.
https://www.fldrupal.camp/sessions/design-theming-front-end-development/decoupled-blocks-ft-react-json-api-graphql