Using React.js to extend your CMS

Using React.js to extend your CMS

• 1.
  Using React.js toextend your CMS BristolJS, March 2018 Nicola Richardson @NicolaCarys
• 2.
  ● open-source, freeCMS ● Drupal and its backend... ● designed to be flexible and extensible ● modularity as a core principle Drupal
• 3.
  ‘a declarative, efficient,and flexible JavaScript library for building user interfaces’ ● uses a lightweight, virtual DOM ● component-based ● uni-directional data flow React.js
• 4.
  Speed and thevirtual DOM Image source: Learning React Native by Bonnie Eisenman
• 5.
  Scalability with components App Component ParentcomponentParent component Component Component Component
• 6.
  Debugging with thedata flow App Component Parent componentParent component Component Component Component props props props props props props
• 7.
  ● use theCMS as a content repository ● frontend rendered out by a UI framework ● users interact with the framework, not the CMS ○ build immersive, modern experiences What is a ‘headless’ CMS?
• 8.
  ● service-orientated approach ●serve data on different platforms via CMS content repository ● decoupled ends ○ front/back ends changed independently ○ plugin / plugout technologies ○ focused tooling & simultaneous development Why is ‘headless’ exciting?
• 9.
  ● extending anexisting Drupal 8 build ● two apps with different functionality ○ app 1: a room service ordering web app ○ app 2: an on-the-door quick-book web app ● lightweight, quick and optimised for iPad ● use the data from the main website I lived to tell the tale
• 10.
  Consciously decoupling ● firstproject using headless and React ● API calls to provide UI apps with data ● thinking about the communication flow
• 11.
  The ‘headless’ communicationstructure quick-book app room name available now timeslots other available rooms new date timeslots booking price user verification booking confirmation headless CMS D8 API
• 12.
  Frontend ftw ● frontendbuilt with limited knowledge of existing Drupal 8 site ○ totally decoupled, no knowledge needed ● complete freedom with the markup ○ control of structure & hierarchy ○ no redundant code ● beautiful experiences on any platform
• 13.
  ● Drupal 8’sbuilt-in RESTful API service ● fresh Drupal install to API call in minutes ● quick to build endpoints Making React and Drupal talk
• 14.
  API calls viathe UI
• 15.
  Demo
• 16.
  ● multiple unaware,lightweight frontends ○ not restricted to any one framework ● endless possibilities with the data Creating something extensible
• 17.
  Extending the CMS CMS
• 18.
  ● resourcing fordifferent technologies ● choosing the best technology and tooling ○ do you need to decouple the ends? ○ React + state management ● clear separation of concerns ● consistent API design ○ keep it extensible Our pain, your gain
• 19.
  Thank you! @NicolaCarys