HPE Developer Community Portal

Grommet – the Glue that Binds Development and Design

Dale Rensing

Simple, consistent, and thoughtfully designed user interfaces (UI) can go a long way to integrating business applications and streamlining operations. Hewlett Packard Enterprise (HPE) is a huge proponent of simplifying complex environments. That’s why HPE developed Grommet, an open source UI development tool, and made it available to anyone looking to create consistent user experiences for their applications.

When I first started working with the Chief Design Office at HPE, I was very excited for the opportunity to learn more about Grommet. Design is playing a bigger part in computing applications today. To me, Grommet is like the glue that binds function and design together. As evidenced by input received through HPE DEV and several tradeshows and events, Grommet is both liked and used, sustained by a vibrant, grassroots community. It has attracted plenty of developer input with over 4,000 commits from a wide variety of different contributors.

For those of you unfamiliar with Grommet, it is a library of reusable UI components for developers and designers. Grommet makes the application creation process both agile and easy. It does so by offering developers commonly used interface elements in a Node package and delivering them as building blocks to create web applications. It also gives designers a full library of design assets and templates. Grommet uses React as an underlying technology to help deliver its modularity and adds accessibility, responsiveness, and theming.

screen shot 2019 05 09 at 3.12.54 pm[2]

Grommet works using a mobile-first strategy in combination with a task-based design approach. Its components offer nothing more and nothing less than what’s required to complete a task, while still being flexible enough to customize and tailor it to your own needs.

Grommet’s libraries give both designers and developers a way to collaborate and inject consistent user experiences into their applications easily. It offers ready-to-use layouts, type, colors, controls, and mechanisms to incorporate and present content. You might want to check out this link for specifics on Grommet components.

Grommet is used by both internal HPE and external developers to build enterprise-class and consumer-grade applications that can be used in web, desktop, and mobile-friendly formats. It underpins many of the company’s software-defined platforms, like HPE Synergy, HPE Storage, Aruba networks and HPE Server management. HPE provides developer support for Grommet through the HPE Developer Community and GitHub.

As much as I’ve learned about Grommet, I still have more questions. Like, what’s up with that purple Gremlin creature that keeps showing up on Grommet pages and Grommet stickers? Stay tuned for a future post where I hope to uncover the answer. For more thoughts on Grommet, you might want to check out the blog by John Paul Mueller of DataCon Services. You can also keep up with what’s going on by connecting with us at HPE DEV and subscribing to our newsletter.

rsz_1rsz_stack waving