Solving User Experience Problems with PatternFly

Michael Dyrynda is a web developer at Hostworks, a freelance developer, and a blogger. He's working on his first open source project in Confomo with Matt Stauffer and podcasting the journey on briefs.fm. He also writes about web development and solving day-to-day problems with no readily available solutions. Michael's web development skills extend to front-end aspects of web development, including JavaScript, LESS/Sass/CSS, designing databases, as well as building applications that can scale.

I connected with Michael on Twitter in late April after he tweeted that moving to PatternFly for an in-dev app was an "instant improvement."

Q: How did you learn about PatternFly?

I first came across PatternFly on the .dev blog and bookmarked it for an application I was about to start on at work.

Q: What are you using PatternFly for?

We're in the process of building a console application (think AWS console) that provides a single point of interaction for our customers to the distinct products that form our application pool. Each of these components has been developed in isolation to this point, each with their own web interface and authentication systems.

In the year I've been at Hostworks, the vision for the platform has grown beyond the original Transcoder and Manifester products I was hired to start work on. As we've increased the scope of the platform, it's become increasingly obvious that in order to provide a great user experience, we need to consolidate the management of each of these products into a single interface.

Q: How important is it for open source to have good UX?

A clear and consistent UI is important to our console application, so that it is familiar to the users accessing it, no matter which of our products they're working with. We were originally going to settle on a mostly vanilla Bootstrap theme. From a development perspective, this allows us to rapidly build out the console application without getting hung up on the boilerplate-style stuff.

The trouble with vanilla Bootstrap, however, is that due to its popularity, even the most casual of internet users are likely to spot a website that stands out as looking like a lot of other Bootstrap-based sites. PatternFly has allowed us to leverage the familiar layouts and classes that Bootstrap gives us whilst giving us a fresh look with minimal effort. It means we can continue to focus our efforts on the application itself.

Q: What you would like to see next from PatternFly?

One thing I'd love to see is the ability to add full-width content views inside of cards. The way cards currently have padding and margins applied make sticking a good looking table inside them a little tricky. It would be nice if they could be supported in a way similar to how Bootstrap renders tables inside panels if you skip adding the body class to it.

I feel that really good documentation is missing from PatternFly at the moment. The examples give you a good understanding of what it's capable of—and what it looks like—but you have to dig into the source for most of it to actually start using the components. This might increase the barrier to entry for some developers as there's no real explanation around the reference markup.

Other than that, I can't say I've noticed any obvious missing components in what we've built so far, but I'd be interested to see if PatternFly makes the transition to Flexbox with Bootstrap v4. It would cut out some of the JavaScript overhead that's currently used in order to match heights of cards on a dashboard, for example.

Q: What advice would you have for someone looking to getting started with PatternFly?

If you're starting out with PatternFly and you want to start bringing your ideas to life, I'd recommend checking out one of the reference implementations and plugging your content there. If you want to get a better understanding of how and why those layouts exist, check out the documentation. The team has done a good job of explaining their design choices, how to organize pages, and presenting content.