ContribKanban v3, 2020 update

Published on Saturday 11, April 2020

Every year I dedicate a block of time to provide new features and improve ContribKanban, beyond regular maintenance to keep dependencies up to date. This year brings some significant changes, which I am excited about!

I would like first to give a shout out to AmyJune Hineline (volkswagenchick). She has been working with Drupal events to have a Contribution Day sponsorship option. Part of that sponsorship revenue goes to projects like SimplyTest.me and ContribKanban to sustain their development. In the last six months, this has helped secure $600 in contributions (~$576 after fees) through the project's OpenCollective. 🙏I am grateful for her efforts. I plan on writing a follow up about ContribKanban, OpenCollective, and the Contribution Sponsor Day effort following this blog.

Before getting into what is new, I wanted to cover the evolution of ContribKanban throughout the years

A brief history

ContribKanban has had quite the evolution since I first wrote it in 2015. 😱this project is five years old, the oldest project I have worked on and maintained. It started as a MEAN (Mongo, Express, AngularJS, Node) stack single page application leveraging Parse.com. In 2017 I migrated to a progressively decoupled Drupal 8 site. Leveraging Drupal allowed me just get stuff done, versus rewriting it all in a bespoke application (like authentication, data CRUD.) Progressive decoupling made it easier to host because I didn't need to host a JavaScript application but was not entirely constrained to Drupal's render system.

Moving over to Drupal worked out great, as I was able to create more customizable boards and the concept of issue collection boards. However, I did find progressive decoupling to become more of a hindrance than a benefit.

In 2019, amazee.io offered to host ContribKanban which made it much easier to maintain, instead of running my own DigitalOcean VM. It also opened the door to making ContribKanban a fully decoupled application, since it lowered the level of effort for the build and deploy process.

Going fully decoupled in 2020

In 2020, ContribKanban is going fully decoupled! This has allowed me to use clean up a lot of things and make my life easier for maintenance. That sounds comical because I have added complexity, in some ways.

How going fully decoupled is streamlining the development process

When you leverage progressive decoupling your client application doesn't control routing. Your backend application manages routing and rendering which mounts the client application. The backend application provides specific elements that are mount points for your JavaScript components. With each page navigation, the client application must be fetched again and bootstrapped

This also leads to custom tooling for your client application. I had to write a custom Webpack configuration to build my React components and provide an entrypoint that performed various checks for what elements were available to mount components on.

Controlling the design of the application is also a bigger pain. Parts of ContribKanban are rendered through Drupal and Twig while others are built with JavaScript.

With a fully decoupled application concerns are completely separated and I can leverage existing tooling, such as create-react-app for building a single page application.

API-First Drupal

A lot has changed in Drupal, as well, since I migrated from a MEAN stack to Drupal 8. The API-First initiative has greatly improved the HTTP API functionality of Drupal. For the better. Like, a lot better. Drupal has adopted the JSON:API specification with the JSON:API module available in Drupal core with the 8.7 release. (I really suggest reading Wim Leers blog posts about the API-First initiative.)

ContribKanban leverages JSON:API and OAuth. This is possible thanks to the JSON:API and Simple OAuth module, with almost no extra effort!

I am leveraging Search API for board listings, thanks to the work we have done at Centarro by creating the JSON:API Search API module.

Improved experiences

I am not a designer or user experience engineer. I'm pretty bad when it comes to those areas. It is one thing that has always bothered me with ContribKanban, it just felt awkward. Whether you love or hate Material Design, it makes creating interfaces a lot simpler since decisions are taken care of for you. The new frontend leverages the Material UI project's React component library. This simplifies interface development and maintenance.

The ability to find existing boards has been improved. The search now works (😅whoops on that one)

One problem has been creating boards. ContribKanban makes it simple to add a Drupal.org project or issue tag as a board, but it has not been intuitive. There is now a page for creating boards with guided user experiences. I really hope this change helps contribution sprint organizers, like AmyJune Hineline (volkswagenchick).

When you click the create button, a dialog opens with instructions.

Boards have received a refresh as well, I can't wait to find ways to improve the functionality here.

One of my favorite features, issue collection boards, has gotten an improved edit form. There is a lot to be done, but you now see the issue title for issue IDs in your collection.

Check out the new ContribKanban

Know what's cool about this change? The existing ContribKanban is running like normal and the new frontend application is running on a subdomain. For the Drupal side, all I had to do was install some modules and tweak code to fix some API related problems.

You can check out the new frontend application at https://app.contribkanban.com/.

I want to work out some of the kinks and maybe new features before making it the default interface for ContribKanban