API First Drupal 8, React, and you!

“API First” or, as some may call it, “Decoupled Drupal”, remains a topic of much discussion among the Drupal community. Here are just a few sessions being presented at Drupalcon Baltimore:

• 4K’s own Todd Ross will break down multichannel publishing and content-as-a-service in his talk “The Future of the CMS”.
• Matt Grill, Preston So, and Sally Young will explore Drupal’s future with regards to content APIs in their core conversation “Decoupled From the Inside Out”.
• Mateu Aguiló Bosch will get technical in his talk about Drupal’s new JSON API module in Advanced Web Services with JSON API.
• “React, GraphQL, and Drupal” will cover how Michael Schmid and Sebastian Siemssen of Amazee Labs powered 12 separate sites with the same Drupal backed content API.

I’m very excited about hearing these different perspectives. However, one thing I’ve always felt was missing from these kinds of talks—by nature of being limited to 45 minutes—was a comprehensive hands-on guide on how to do API First Drupal. So, someone who wants to manage content in Drupal, but use something else to build their UI, is often left wondering where to start. There is simply not enough time to dig into these details in a session format…

…but there is enough time in a full day training!
(Monday, 24th April, 2017, 9am-5pm EDT, room 323 of the Baltimore Convention Center)

API First Drupal 8 with React and Waterwheel

In our training “API First Drupal 8 with React and Waterwheel”, you’ll learn how to connect Drupal 8’s API to React, a declarative, component-based UI framework, via Waterwheel.js, an SDK for working with Drupal’s API from JavaScript.

Over the course of the day, we will take the canonical JavaScript application, a todo list, and connect it to Drupal. Todos will be stored in a central decoupled Drupal site via the JSON API module and secured by the Simple OAuth module. We’ll take the todo list example to the next level by adding like button for todos, because the world needs more like buttons.????

Earlier this year, We had the privilege of teaching this training at Sandcamp in San Diego. People loved it and left very helpful feedback that we’ve used to improve the training and make it even better. Here are a few topics we’ll cover at DrupalCon North America 2017:

Writing Modern JavaScript with ES6

JavaScript has grown a lot in the last few years. New language features have been introduced, syntax has been refined, and the modern JavaScript frameworks and libraries take advantage of and often rely on these changes. This is especially true for React. While not required, best practice React apps use classes, class static properties, spread and rest operators and more. While an understanding of JavaScript fundamentals are a prerequisite for the training, we’ll teach you some of the newer features that make building React apps simpler.

Decoupled Architecture and REST APIs

Building decoupled sites is not for the faint of heart. In fact, in many cases I wouldn’t recommend it unless multichannel content publishing is a strong goal of your project. So, before we get ahead of ourselves, we’ll explore the “why” behind decoupled architecture and the basics of REST. We’ll also describe the different architectural decisions available to you in the Drupal ecosystem and how to know when they’re a good fit.

Building UIs with React.js

React is a declarative component-based library for building user interfaces. It is declarative in the sense that your components describe what your UI should look like based upon properties they receive and the state they hold. Imperative code for rendering components is not needed. You can simply declare a tree of components just like you do with HTML, and React takes care of updating the UI if data changes. While it isn’t perfect, React’s community, developer experience, and performance make it a great choice for building interactive UIs. In the training, we’ll learn React’s APIs and write some components together.

Interacting with Drupal’s API and Waterwheel

Drupal 8’s choice of introducing a core REST API was a big leap forward for the project. However, interacting with it on the client side is difficult and “Drupalisms” are often leaked to the frontend. After we learn a bit of modern JavaScript and some React, we’ll dive into how to get the best out of Drupal’s content API using Waterwheel. We’ll show what it takes to configure Drupal to become “API First” and then we’ll dive into how Waterwheel abstracts the complexities of Drupal’s API—which makes creating, reading, updating, and deleting data a lot simpler.

Connecting “All The Things”

Finally, we’ll put it all together and make our React app communicate with Drupal via Waterwheel. We’ll all use the same Drupal instance as a backend and build a distributed todo list with like buttons for each todo. In this section we’ll go over JavaScript promises and React’s component lifecycle APIs.

Come Learn with Us!

Getting hands-on experience with these techniques will demystify API First Drupal and will give you a taste of what building real decoupled apps is like. I hope to see you there—and if you can’t make it, at least come say hi to me at the Four Kitchens booth!