Design 4 Drupal: 11 Key Learnings for Drupal Front Enders
Design 4 Drupal is unique among Drupal conferences in that it focuses exclusively on design, business, and user experience topics. While other Drupal camps and conferences cover these front-end adjacent topics, they are typically are not the exclusive focus. Combine that with keynotes from Jeremy Keith and Dries Buytaert, and many other outstanding sessions, including four from Bounteous, the excitement levels for the 10th annual Design 4 Drupal were super high. Below are 11 essential learnings gleaned from the conference for Drupal front-enders.
1. Exploring the New Drupal Front-end with JavaScript
It was great getting a chance to see Buytaert, the creator of Drupal, speak in a less formal and non-DrupalCon Keynote environment. Buytaert’s presentation featured a nice balance between history and ongoing evolution of both Drupal and JavaScript. From the perspective of evolution, Buytaert outlined what he sees as the two main focus areas for Drupal 8:
- Making Drupal easier to use for both content creators and site builders.
- Evolving Drupal into an API-first platform.
Drupal's JavaScript modernization efforts will continue to help evolve the robustness of Drupal's API, both by offering alternative formats to REST like JSON API and GraphQL, but also by providing API support for an alternative Drupal admin UI built in React. Buytaert outlined a longer list of efforts in support of this JavaScript-based administration interface - which had the positive side effect of benefiting all Decoupled Drupal builds.
Buytaert offered a straightforward rallying cry for how we can continue to allow Drupal to grow and thrive on a JavaScript dominated web - we need to find ways to get people outside of the Drupal community to think of Drupal as an option for storing and managing their data.
In response to some praise during the Q&A related to improvements in Drupal user experience, Buytaert was brutally honest about the fact that we still have a long way to go. In his opinion, usability is still the number one thing holding Drupal back, going as far as stating explicitly, "I'm not satisfied with Drupal's ease of use." It would have been easy for him to accept the compliment on behalf of Drupal, but I think many in the design-focused audience would have found that disappointing.
Hearing such an impassioned, clear counterpoint from Buytaert is likely to stand out in my mind for a long time. This talk is a must watch for anyone invested in the future of Drupal.
2. The Building Blocks Of The Indie Web
The concepts behind the indie web aren't for everyone, at least not with the tools that exist today. But for me, having your own website and owning your own data are a big motivator behind how I'm approaching my personal web presence and there is quite a bit more that I'd like to do in the future. Jeremy's talk was a great introduction to the concepts that power the indie web, how they actually work, and what can be done to make this movement thrive. Watch the recording and or read the recap of his Boston trip.
3. Using SVG’s to Deliver Compelling Product Configuration Experiences
Projects like the Wilson Sporting Goods product configurator are among the things that make me proud to work at Bounteous. Creating a UI to allow customers to design custom versions of uniforms and sporting equipment can seem simple until you consider the sheer number of possible unique variations that need to be provided. Solving for the hidden complexity in a system like this can be endlessly fascinating, and our Senior Interactive Developer Andy Olson did an excellent job explaining how it was done.
4. Storybook: An Interactive Pattern Library for Your Decoupled Applications
Prepping for this talk allowed me to go back and formalize some of the things I had learned about using Storybook as a development environment for React components. The biggest lesson learned was how much following a few conventions related to mocking data can streamline the setup and configuration process. I also continue to be impressed with how useful the addon ecosystem is and how well Storybook can inform testing.
Through follow-up discussions with Olson, I also spent some time thinking about how a tool like Storybook can fit into component-based JavaScript development workflows at Bounteous. I see Storybook as more of a development environment and less of a style guide (the workshop portion of Brad Frost’s ‘Workshop and Storefront’ concept). The finished components can then be consumed in their target applications alongside a more formal statically generated style guide. I'll be presenting this one again at Drupal GovCon in August and hope to incorporate a little more of these concepts into the talk.
5. Back to Basics Drupal 8 Theming
I had intended for this to be a beginner talk, but I don't think it really ended up that way. Maybe beginner++? I do think there is useful information for beginners in here, but I acknowledge that this would be a tough place to jump in. In any case, the process of putting this talk together and re-evaluating my workflow was an extremely useful exercise. I also heard feedback from more than one back-end developer who attended that thought it was a nice overview. Hoping to refine this one and present it again.
6. Effective Cross-Functional Communication
Our VP of Experience Design Amanda Ruzin and VP of Engineering Seth Dobbs provided an insightful look at one of the hidden challenges of this profession - cross-functional communication. The talk was full of thoughtful reminders (always assume positive intent, listen to understand - don't listen to interrupt) and just as impressively provided a great model for a seamless approach to co-presenting. I'll be looking back at this one when prepping for future joint talks.
During the Q&A, the audience asked questions specifically geared toward distributed teams, which is a popular model for small- to midsize-digital agencies. Physical positioning and movement are key indicators to how well you are communicating when you are in the same room, however, other subtleties such as tone of voice can drastically change the dynamics and cause miscommunication. In recapping their talk, Seth and Amanda plan to either enhance their presentation with this distributed team in mind or spin off another talk concentrating specifically on distributed teams.
7. Building a Living Style Guide with Herman - in Your Sass!
This session provided an introduction to Herman, a living style guide tool with some great specialized Sass-focused options. While Bounteous frequently uses Pattern Lab on projects, it was nice to see an alternative to maintain documentation when a full pattern library might be overkill. That said, I was a little surprised by the amount of overhead necessary to get it running.
8. Meta and Schema: Defining the Content about your Content
Jim Birch provided an extremely detailed overview on implementing a metadata strategy for your website. Following Keith’s Indie Web keynote, this was also a nice reminder that if we’re taking back control of our data, we also gain additional responsibility related to making sure it is indexed and correctly understood by search engines.
9. Front-end Tooling: A Panel Discussion
Hearing three experts share their thoughts on this topic was a nice reminder that front-end tooling continues to be a challenging, constantly evolving area. We’ve been re-evaluating our front-end workflow as we embark on some new projects at Bounteous, so this panel was well timed.
10. NextGen Design Systems with Pattern Lab, Twig, and Web Components
This was a useful look at an ambitious design system project implemented using modern technology including web components. The approach to managing each component individually in a monorepo could also apply to the component systems we’ve been developing internally to support Drupal projects.
11. Giving Back through Sprints
As is common at Drupal events, Design 4 Drupal hosted a sprint to facilitate attendees to come together and contribute back to the Drupal project. At the sprints, I continued my work on the UI Patterns Pattern Lab module. Especially exciting was the fact that I was able to focus on responding to community-submitted issues, even creating a development release containing new functionality submitted by an outside contributor.
Conclusion
Design 4 Drupal was a great event that facilitated advancement of the Drupal platform and learning by the Drupal Community. If you missed the event, I hope my recap will provide you with some of the key lessons learned. Thanks to all at Design 4 Drupal, especially Leslie Glynn who was extremely supportive and organized a great event.
