Last June, Opensource.com gave readers a behind the scenes look of PatternFly, how it came to be, and why developers should know about the project. This time around, I thought it was important to hear from the people who are actually using PatternFly. This series aims to learn more about PatternFly through the eyes of the developer.
To kick off this series, I sat down with Andrés Galante, an expert HTML and CSS coder with extensive experience working with Less, Sass, Bootstrap and Zurb Foundation. Andrés travels the world speaking at conferences about front-end development and PatternFly. He's also known to advocate for better collaboration between designers and developers. Andrés currently works at Red Hat as an interaction designer on the User Experience Design (UXD) team and lives in Buenos Aires, Argentina.
What was your first experience with PatternFly?
I fell in love with PatternFly at first sight. I already knew Boostrap well, and PatternFly was the missing piece for enterprise web apps. For me, it was easy to get into PatternFly. It was seamless. I went into the code, read it, and it made sense because everything was written exactly like Bootstrap. It was just following the same rules that I was already used to.
What sets PatternFly apart from Bootstrap?
The look and feel of PatternFly is "enterprisey." It's very focused and dedicated to one thing, whereas Bootstrap is for any other web app and has a more general look for whatever you want to build. After working with PatternFly, I also realized that we integrate testing into the PatternFly process to ensure that we are delivering reliable components.
What motivates you to speak at conferences?
I like traveling, and conferences are a great environment to meet people and get new ideas. When you go to conferences, there are really smart and capable people that know what they are doing. So whenever you talk about what you are building, you get input from different angles that you have never heard before. You can also get ideas for new collaborations.
Because developers are so into open source, they like to collaborate. This doesn't usually happen at design conferences. They are different—closed in a way. When you tell a developer about PatternFly, they want to play with it. They want to open it and see what's inside. They want to see what they can do with it or how they can improve it. That's what I like about conferences. I also want the PatternFly community to be larger. I like PatternFly. I work on PatternFly. The more people we get using it and contributing to it, the better it will be.
How important is it for open source to have good UX?
As with any project, super important. *laughter*
This is especially true in open source, where there are almost no designers. It would be nice to see more design thinking involved. There is a gap between designers and developers. The results could be amazing if there were as many designers as there are developers working in open source.
What do you think causes the divide between developers and designers?
It's on both sides. Developers should reach out more to see how they can integrate designers in their workflow, and designers shouldn't be so apprehensive in what they do. There are many aspects to consider. Communication is one of them. Git is important for every designer to learn, and it's also important for the developer to teach Git to designers.
I was taught Git when I first came to Red Hat. The first week I produced something, they told me, "We can't consume it unless it's on the repo." That's their workflow, and we should adapt our processes to it. UX designers are here to help developers understand the user's goals, so we shouldn't just being saying, "Implement what we say." We should be asking, "How can we be helpful in your process?"
Do you think PatternFly helps to bridge the gap between designers and developers?
I think so. It's a common language, but this doesn't solve the open source community problems. It doesn't get designers to give free time to communities. On the other hand, if a designer goes to a community and asks if they can help, it should be more than just building a logo. The designer can help with the whole process of building an app.
For a designer, it can be extremely intimidating to come into that environment and might feel like they are taking up too much of a developer's time.
These are open source developers, so in general they love to help. When I came to Red Hat, I felt like they took me as a mascot. I didn't know anything. I messed up the repos and all the code, but they didn't care. They had a lot of patience to teach me their ways. Having the mentality of wanting to learn and wanting them to help consume what I do. Brian [Leathem] is a great example. He discovers what your skills are and reaches to that point so he can consume what your produce. I guess it goes both ways but I think that if any designers goes to an open source community and tries to help then they will be able to in some way or another.
What open source community showed you the way?
The Aerogear Community. All of them helped me in one way or another. The first week I got on the team, I had Lukas Fryc, a developer from the Czech Republic, sit with me for four hours just to get my local system to work. It should have taken 10 minutes, but I needed to install everything from scratch. Four hours! I couldn't believe it. I guess that's how bad they wanted a designer.
When you went to Aerogear, were they already using PatternFly?
They were one of the first ones to use PatternFly, so it was a very early version. Today it looks completely different from what it looked like then. I pretty much started from scratch. It was pretty cool. We did user research, looked at different use cases, and then built the Unified Push Console using PatternFly 2.
You were involved in the testing, use cases, design, and front-end development?
Yes, HTML and CSS. Not the Angular part. The mobile team builds RHMAP (Red Hat Mobile Application Platform). They plan to migrate the studio to PatternFly. That's why when they develop new stand alone tools like the API mapper, they do it with PatternFly.
You said Aerogear Unified Push Server started with an early version of PatternFly. Can you tell me more about the evolution of where they started and where they ended up with PatternFly?
Apart from looking really strange, the usability was very bad. It took several clicks to get to where you wanted to go and the onboarding process was really bad. That was something that I wanted to improve. We changed the onboarding process so that when a user is introduced to the UPS console, they are taken through the steps to set up and run an app.
Yeah, I remember that. You contributed the Empty State pattern to PatternFly.
Yes, that pattern came from there. So, in my opinion, UPS is not only looking better, but also behaving better.
What would you like to see next from PatternFly?
[Technical] documentation is a good place to start. The patterns are well documented for designers. We need better documentation for developers. Each component has its own code snippets, but it doesn't go deep into what the variants are, how to implement those variants, how to use them, how to use them in context, and other things that are useful for developers.
The new site solves many of the problems with finding information. The other thing that we have started on is demo apps and layouts for an easy entry point to PatternFly. A demo app is a sample application that is made with out of the box PatternFly components. It has all the necessary setup and build to run an app. A developer can take that as a starting point and build upon it. Those things should be a huge step forward for PatternFly.
Yeah, we are looking forward to getting the new site launched in June and including demo apps in the near future. As far as documentation, we are a small team but are investigating how we can get the right people and processes in place for PatternFly.
What advice would you give someone who wants to get started with PatternFly?
We have a quick start guide on our GitHub repo that should give you a good way to start using PatternFly or at least give you a basic intro. Other than that, just download the project with Bower or npm or fork it and play with it. Copy and paste snippets and see what happens. We are a small community, so we are a helpful community.
If anyone needs help, go to our IRC channel or send an email, we can guide them to where they want to be. For anyone attending Red Hat Summit, you can find me at the PatternFly Booth in Community Central and would love to chat or answer any questions there.
2 Comments