Decoupled Drupal with React

A brief history of content management
  > Content management systems like Drupal are traditionally monolithic.
  > In traditional monolithic CMS architectures, the CMS provides soup-to-nuts feature sets.
  > This includes server-side templating, and all markup is controlled by a server-side language.

From Web 1.0 to Web 3.0
  > Web 1.0: Flat front-end assets uploaded via FTP, fetched by browser.
  > Web 2.0: Content management system provides a server-side template engine which couples data with markup rendering. The server side provides all data.
  > Web 3.0: A RESTful API serves as the mediator between server side and client side (often after initial page load). The client side asks for data through XMLHttpRequest, and the RESTful API serves a (JSON) payload.

What is decoupled Drupal?
  > Simply put, decoupled Drupal is the use of Drupal as a data provider by means of a RESTful API. There are two types of architectures in the wild which use this architecture.
  > In fully decoupled Drupal, Drupal serves solely as a JSON API which serves data payloads to other applications. A client-side framework (often shared isomorphically client-server) controls all rendering.
  > In progressively decoupled Drupal, Drupal controls some of the render to provide markup within a single application. JavaScript then takes over client-side rendering.

Problems of decoupled Drupal
  Much of Drupal's robustness is lost.
  > Cross-origin requests, security, authentication, and passwords
  > Form validation
  > Content workflow and management
  > Layout and display management
  > Multilingual and localization
  > Accessibility and user experience

Decoupled Drupal 7
  > Services, a contrib module, is not strictly RESTful but provides web services for Drupal 7 (8 in the works).
  > Built-in REST and XML-RPC interfaces
  > Exposes content entities at custom endpoints
  > Services Entity extends Services to work with all entity types
  > restWS exposes any Drupal entity on its existing path based on headers.
  > Restful exposes entities whose response data developers can customize.

Decoupled Drupal 8
  > WSCCI (Web Services and Context Core Initiative) incorporated Web Services into Drupal 8 core.
  > The core REST modules allow for all content entities to be exposed as JSON+HAL, and Views natively supports “REST export” as a new display type.
  > There are many issues with REST in core; please consider contributing to RX (REST experience) tagged issues.
  > RELAXed Web Services (contrib) extends the core REST API to include revisions and file attachments, as well as cross-environment UUIDs.
  > RELAXed's mission aligns with movement in content staging and offline-first applications, and it uses the CouchDB API specification.

What is React?
  > The beginnings of React
  > React is a library, not an MVC framework
  > Differences with other frameworks
  > Drawbacks of React

  # The beginnings of React
    > Started in 2013, React has quickly grown in popularity due to its declarative approach to state, colocation of templates with view logic, and unopinionatedness about the stack.
    > In the last few years, a larger ecosystem has grown around React.

  # React is a library, not an MVC framework
    > React is “a library for building composable user interfaces” with reusable components.
    > Many people think of React as the V (view) in MVC (model–view–controller).
    > Because React is a library, there are many starter kits that you can use, since there is no consensus around a canonically acceptable set of libraries for routing, etc.

  # Differences with other frameworks
    > Traditionally, MVC frameworks using a declarative approach and data binding needed to apply changes directly on the DOM.
    > Angular 1, for example, manually updated DOM nodes.
    > React uses a Virtual DOM, which is an abstract DOM that allows different UI states to be diffed. In this way the most efficient DOM manipulation is possible.

   # Drawbacks of React
    > React is still in 0.x and as such is inherently unstable, with many BC-breaking changes in minors.
    > React builds are challenging due to the lack of coverage of the stack. Flux architectures and the Redux library are some tools that figure commonly in React builds, along with libraries such as react-router.
    > React has much less focus on Web Components support than Angular 2 and Ember.

    React is an isomorphic library (its code can run both in the server and the client), which means that when a visitor first visits the site, they receive the html of the entire page. Then, the rest of the navigation happens client-side, updating just the parts of the page which are different from the current one. Furthermore, React is written to be completely backward compatible with older browsers.

Tags