It is time consuming and difficult to making web applications both beautiful and functional. The skills that make a programmer successful at building an application back end don't always translate to good user interface (UI) design or creating an ideal user experience (UX). Even when developers get UI help from design specialists, creating the code to control how the software looks—its dialog boxes, information layout, the organization of application features—sometimes seems like a black art. Trying to make a beautiful page work quickly on every device with a consistent appearance seems nearly impossible.

Commonly, developers rely on programming libraries to simplify the creation of UI elements and ensuring UX consistency. One of these libraries is Grommet, open source software licensed under the Apache 2.0 license. It isn't all that well known—something I aim to remedy with an explanation of Grommet and a gentle overview.

The idea of UI tool-building isn't new. Proponents of other libraries and tool sets make these same claims, notably the combination of jQuery (the UX) and jQuery UI (the UI). Until recently, this jQuery combination was a top choice, but as expressed by JavaScript Scene, they provide too much functionality, which makes the library too complex to use effectively. One result is that applications are slowed down because of the amount of code they must load. Plus, as software development shifts toward a microservice approach, developers want specific tools, rather than a Swiss Army knife with a magnifying glass and cork screw they'll never use.

Newer, more targeted libraries such as Grommet get rid of the bulk and provide a speedy approach to laying out a page.

Grommet tradeoffs

There is no free lunch, however. The tradeoff with these new libraries is speed versus functionality. You sometimes need to make a decision: Do you want your site to be fast, or do you want the ultimate in functionality? As with any kind of automation and tool dependence, getting rid of the bulk also means you must accept UI and UX limitations. These limits may undermine what you want to do with your application, such as presenting data in a certain manner or allowing users to perform certain tasks.

Like this article? Sign up for the weekly newsletter. We don't waste your time.

You may not have heard much about Grommet before, but it's been around for a few years and version 2.0 is imminent. Several household-name companies use Grommet today to create real-world applications, including Netflix, GE, IBM, and Micro Focus. The lead company driving Grommet is Hewlett Packard Enterprise (HPE), and naturally it uses Grommet, too.

If you want to try Grommet 2.0 before you read another word, you can try the demo at https://v2.grommet.io/try—no coding required. This demo helps you see the functionality, which is an essential part of making that speed-vs.-functionality decision. It also lets you create custom downloadable templates using Grommet version 2's new theme system.

Grommet underpinnings

Few software development libraries today are islands. They rely on other services because the developers of the libraries want things simple and consistent every bit as much as you do, and nobody wants to engage in reinventing the wheel.

In the case of Grommet, React.js is used for the underlying UI and Sketch is used for the underlying UX. The reason you need two libraries is that a UI affects how readers interact with an application—what they see and how they see it—while UX defines what tasks the user can perform, such as accessing data in a certain manner or making specific kinds of updates with minimal fuss.

Here are some additional details that can help you triangulate on whether it might be helpful:

  • It adopts a mobile-first strategy. Your applications run well on most mobile platforms that users rely upon today. As you explore the options, including jQuery, check for potential issues in working with the web browsers you rely on.
  • It minimizes visual fiddling. Applications developed with Grommet resize screens automatically as needed to fit the client device.
  • It emphasizes accessibility. Grommet provides A11Y support so that applications are accessible from the outset. For instance, you can use skip links so that screen reader and keyboard users can navigate website content in ways that sighted mouse users take for granted.

These features (and many others) reduce coding effort. If you used jQuery and jQuery UI, you would need to manually code much of this support. As an example of that complexity and the annoyance it can cause: Traditional JavaScript developers who used jQuery constantly wrestle the HTML DOM by targeting div IDs or classes. React and Grommet provide a seamless display of variables in an HTML context, without all the extraneous DOM manipulation code.

Enough talk. Let's examine how Grommet works.

Working with the CodeSandbox

It's hard to determine whether a product meets your needs unless you get your hands on it, which usually means installing a whole bunch of stuff. There is a Node.js Package Manager route to installing Grommet if you insist, but the easiest way to discover Grommet is to choose a component and experiment online.

The component list likely looks familiar, as it matches the list provided by most other UI libraries. But as you explore, you will find a bit of pizzazz.

For the purposes of this article, I keep it simple, using the Box layout component as a starting point. This is an extremely high-level example to demonstrate the tool usage; I assure you that you can create a much more elegant UI.

grommet figure 1

Each component has documentation, as shown for the Box component. It shows an example of the component and the properties that affect its appearance.

Notice the Edit on CodeSandbox button near the top. To work with the component online, click this button. Then you can play with Grommet without installing anything, postponing that task until needed for an actual project.

grommet figure 2

Clicking Edit on CodeSandbox displays three panes. The left pane contains a list of examples, which we examine in a moment. The middle pane contains the code required to produce the display shown in the right pane. When you change the code, you see a corresponding change to the output. For example, try changing pad='xlarge' to pad='large' and the size of the box changes. Likewise, change color: 'brand' to color: 'blue' and you see a corresponding change.

grommet figure 3

You're not limited to a single component. At the top of the middle pane, try typing import { Button } from 'grommet'.

Notice that CodeSandbox behaves like any other IDE by providing you with suggested input. You can now add a button to your box. Change the box code so it looks like this:

<Box border={{ color: 'blue', size: 'large' }} pad='large' >
  <Button label='Submit' onClick={() => { }} />
</Box>

CodeSandbox now displays a button within the box.

grommet figure 4

The button doesn't do anything just yet, but you can click it if you want. To see the button do something, add some code so that it looks like this:

onClick={() => {alert('Hello') }}

Notice that CodeSandbox provides input even when you're using plain JavaScript. The alert() function is color-coded to show that it's a function. Now, when you click the button, you see a message saying "Hello."

grommet figure 5

After you play with the code for a while, you can click the Download button (an icon) at the top of the editor to use it in a stand-alone application. You can also share the code with others. Click Save to save a copy of your code online; use the URL in the address bar to access your session the next time.

Of course, this is an extremely simple example, but you can keep adding to it and expanding it to be as large as you want. This interactive environment is something you don't really get with jQuery and jQuery UI. Yes, the documentation allows for certain manipulations and you can find online tutorials, but to put a complete page together won't happen until you start working at your own computer, which is why I chose this approach.

The point is that you don't have to stop playing with the code in a single session. You can keep working with it to explore how Grommet works. When and if you decide to take things further, you can download Grommet to your development computer from GitHub. Once you work through a simple application, the next step is to try it on your server.

The Grommet open source project

Grommet isn't a new tool, even if it hasn't yet been in the spotlight. It's both liked and used, with a vibrant community. Grommet has attracted plenty of developer input, with commits from 100 individual contributors. In addition, it currently enjoys around 1,800 members on Slack.

You can also tell a lot about the level of support you'll receive by the project's statistics:Grommet had 140,000 GitHub downloads in 2017 and already has exceeded 99,000 downloads in 2018, with more than 3,200 GitHub stars. The most recent version is 2.0, which adds some new functionality, not to mention a waving mascot.

Getting help

Grommet has the usual online documentation and support features of most new open source libraries, but typically that's not enough to answer everyone's questions. One weakness is a lack of extensive documentation; it is pretty light in some cases.

Because HPEleads Grommet contributions, it provides developer support through the HPE Developer Community Program, along with other open source efforts such as Dory and the company's proprietary applications. A YouTube interview explains the HPE developer support plans and its vision for the future.

Grommet: Lessons for leaders

Grommet—and others like it—is paving the way for a new kind of UX software development library. However, there are no perfect solutions, so keep these issues in mind as you explore:

  • When choosing a product such as Grommet, you trade development speed for application functionality. In many situations, when the UX is straightforward, that's just fine.
  • You can use its online sandbox to reduce the time you expend in a trial situation.
  • A complete solution always couples a UI with a UX, generally in two separate libraries.

Image credit: John Mueller