Let's Work On The Future of Drupal Together

Dries Buytaert, Drupal project lead, recently proposed using React to gradually replace Drupal’s administrative UI with decoupled Javascript. We at Amazee Labs think this is an excellent idea for several reasons.

  1. Focusing on the Administrative UI instead of the Visitor facing UI is a great first step to learn how we, as a PHP community, can use a JavaScript framework like React. It will allow us to see if our “API First” efforts are headed in the right direction because these APIs will be used in Drupal core.

  2. Having React for the Admin UI allows developers and agencies to choose another JavaScript framework for the visitor-facing UI.

  3. React is a good choice for the broader Drupal community. Many other PHP-based Open Source projects have gone this route, which opens up new avenues for us to share concept and code with a larger audience.

  4. And lastly: Drupal desperately needs a better Editor interface. A framework like React will allow us to build the interfaces we've always dreamed of: fast, intuitive, with excellent usability.

At Amazee Labs, we have been building web experiences with React and GraphQL for over a year and have many more React projects in the pipeline.

We’ve learned a lot from these projects in the past year. In the spirit of all things open source, we’d like to share some of our best practices and lessons learned with the community. To this end, we are excited to announce two projects that Amazee Labs will develop and support, with the goal of moving Drupal, and it’s community, forward in this exciting new direction.

The first of these projects is the Drupal Decoupled App, our own Starter Kit for all new decoupled projects. It is based on React, GraphQL and Drupal 8 and includes everything you need to start adecoupled project, including:

  1. Example React components
  2. Storybook integration
  3. Build framework based on Webpack
  4. Server-side rendering Node.js server
  5. Drupal 8 with pre-configured GraphQL module
  6. Documentation for how to run this locally with the power of amazee.io local Docker development

This is what we use for all new projects and we will continue to maintain, using Amazee best practices, on a regular basis. Whether you’d like to test out a fully decoupled Drupal site based on React and GraphQL or you're ready to start a new project with React, this repository has the resources to help.

The second project we want to share is a Drupal GraphQL Module. This can also be found on Drupal.org. This module allows any Drupal 8 installation to expose and manage its content via GraphQL. It has a fully automated Schema generator and can be used out-of-the-box after installation. The module includes the GraphQL Explorer and GraphQL Voyager, which allow you to quickly learn and test the GraphQL API.

At Amazee we know that open sharing of knowledge, resources, and code not only makes us better developers but, more importantly, it makes us a stronger and more well-informed community. So, we are excited to announce initiatives to share our experience and knowledge with React far and wide. 

Our offices in Austin, Zurich, and Cape Town actively organize knowledge-sharing at their respective Drupal User Groups and we will continue to expand our reach by offering React and GraphQL training at DrupalCon and Drupal Camps. We will also continue to produce high-quality technical blog posts and other valuable content on these subjects. In fact, you can read our series of posts on GraphQL and React:  

  1. Introduction to GraphQL
  2. Drupal and GraphQL with React and Apollo
  3. Drupal and GraphQL - Batteries Included
  4. Extending GraphQL: Part 1 - Fields
  5. Extending GraphQL: Part 2 - Types and Interfaces
  6. Our React Learning Journey
  7. Next Steps for GraphQL and Drupal

We are excited to see the possibilities of Drupal and React already in action and the projects this technology will inspire. We'd love to see how React has already inspired you. Share in the comments the React and Drupal projects you are working on!

October 27, 2017
Tags
0 Comments

Get our Newsletter

Comments

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
icon
What is Amazee Labs?