Moving to React + Blueprint
At Agave, we redesigned the logo and acquired a new domain a few months ago. And we’re moving to the next phase of the business, which requires new tools, architecture, and designs. This includes moving our codebase to ReactJS since we’re building a much more responsive web app and the jQuery/Coffeescript we were using before wasn’t going to be suitable for where we’re going.
When we decided to started working on this new product, we had a lot of decisions to make. The front-end in particular was going to need to be completely revisited.
I spent a few weeks researching the right combination of libraries and UI toolkits. There’s a Hacker News comment that summarizes a great shortlist here: https://news.ycombinator.com/item?id=17971337. There are many more UI libraries out there, but most of them aren’t worth looking at.
I’ll write out my thoughts on how we made these decisions and the various libraries we considered along the way. Our requirements were: they should have Sketch UI kits, the UI should look clean and modern, and they should support React JS.
We’ve been using Bootstrap 4 up to this point, but we’ve tossed that library out in favor of just using their Grid system. Bootstrap at this stage has a very distinct look and feel. It no longer feels like something I enjoy looking at or using, it just meets the bare minimum requirements for an MVP.
For a while I think Bootstrap had great UI components, but as of version 4, I’m no longer a fan. For example, the CSS active states look awful. Which is fine — Bootstrap has always been easy to customize and there’s a strong community around it. You can get UI themes and components everywhere (e.g. WrapBootstrap). I looked at hundreds of premium themes, but never felt settled on it.
Bootstrap was designed for mobile-first sites, but our new product is a mobile desktop app. This made it fairly easy to cut Bootstrap as well as a few other libraries. The only reason we’d keep Bootstrap was because we were already using it, so we wouldn’t have to rewrite parts of our code base.
Semantic markets itself as “the framework designed for theming.” In practice, this means you’re spending your time customizing the individual components. For an example, look at their buttons and then try changing the themes. Semantic has a decent community following on GitHub, so they’ll likely continue to release newer and better versions.
Overall I liked Semantic because it had newer UI components missing from Bootstrap, and it had a minimalist distinct look and feel that looked better than Bootstrap’s components. A few examples of components that I found interesting: dividers, labels, placeholders, and steps. These are things you can probably find in the Bootstrap world, but the base styles and interactions with the components seem cleaner in Semantic.
Semantic does support React for most components. They also have Sketch kits and some impressive component themes based on other popular web sites like GitHub, but ultimately I was left feeling like I might regret using it because it’d appear gimmicky, after the novelty of some of their newer components wore off. They also didn’t have any themes outside of what’s on their main site, so I didn’t feel confident about adopting it.
This is Google’s project and if you use any of their products this should look familiar to you. There’s an impressive amount of work that went into this library and you get that impression immediately when you visit their official marketing landing page. They have impressive iconography with a bunch of features that remind me of Font Awesome 5 (although I do wish Font Awesome would release two-tone icons).
This is built for React, so it checked that box for us. You’ll be able to quickly and elegantly build a mobile app using this library, but that’s where it fell short for us. Some of the components, such as the App Bar, were designed for mobile and don’t look great on a desktop app. Their Sketch kits also follow the same philosophy and I wasn’t able to lay things out in a large grid format, for example.
Some of the components and interactions are beautiful. The buttons have great click interactions and they don’t do any weird blue outline behavior that ships with Bootstrap 4. I think Material has better text fields than any other library I’ve seen. Using this library might make your product look like it was built by Google — this could be a good or bad thing.
I could only find two premium themes online, but I’ve seen example apps and understand what it looks like in a finished product. We would’ve gone with Material UI if we were building a mobile app.
Blueprint (not to be confused with Blueprint CSS)
This is a library I got excited about when I saw it, and this is what we settled on.
Blueprint checked nearly every box for us. They have a light and dark theme mode out of the box, which was actually something I was very interested in given the timing of Mojave coming out with its dark mode.
The UI components are beautiful and simple, and they didn’t go off the rails like Bootstrap 4 did. They’re not designed for mobile, which is nice for a change.
They’ve nailed a few components I’ve seen in newer apps like editable text, multi-selects, and the date picker. They even have a non-ideal state, which I’ve never seen in a UI toolkit.
The documentation is exceptional, and they have great interactive examples of each component. To go on a slight tangent: good documentation is a literal killer to developer adoption. Just look at what happened to Mootools — and every other JS library — vs. jQuery in 2006. Good documentation and tooling is the result of having incredibly capable and talented people like John Resig involved. Blueprint was built by Palantir, and I suspect they have a John Resig somewhere in there, building or directing most of this.
They’ve built Sketch kits for both the light and dark themes, there’s a solid native icon set (we’ve thrown out Font Awesome 5 in favor of it), and a strong following on GitHub. I expect they’ll continue to release new features quickly. I’m really excited to watch how this library evolves.
