Announcing Lumi Components

By Madeline Trotter · May 23, 2019

Today, I have the pleasure of announcing the release of our component library, Lumi Components, as open source! I'll get more into the what and why shortly, but I want to note that Lumi Components is very focused on meeting our own internal design and needs. It's not intended to be a general purpose library for every use case. If you find it useful, that's fantastic and we'd appreciate any feedback you have. Just be aware that breaking changes will be frequent. This release is about sharing how we're doing things and getting more real-world PureScript out in the open.

So what is Lumi Components?

The short answer is it's a DSL for building Lumi UIs. The long answer is that these DSLs currently come in a few different levels of abstraction. At a high level, we have the Form and Wizard components. Forms include state management, UI, and aren't very coupled to React. At the mid level, we have the more complicated React components like Upload and Table. These components combine various other components along with their own logic and state. At the lowest level, we have the simple building blocks you'd expect from any component library like Button, Input, and so on.

Arthur Xavier on the Lumi team has already written about our Form DSL in detail, so check that out if you haven't. We really like these high level components and hope to build more. At the moment, we're thinking about layout, application routing, and data fetching DSLs. The goal is to get to the point where we can add an entire new page to one of our apps without ever having to think about HTML, finicky padding and spacing, event bubbling, or even mobile design.

This approach will obviously have tradeoffs. Our DSLs will need to be highly specialized to Lumi's needs so things look and feel like Lumi without a lot of extra work. Perhaps someday this will be handled via some concept of theming, but for now, our base building blocks are our opinionated low-level components. Lumi Components should also be considered alpha-quality from an API perspective since there will be frequent breaking changes as we experiment and clean up some of the older component APIs. I'll get into some of the short-term changes we expect to make in the "What's next?" section below.

Why are we releasing it?

Good question. We want to share how we're solving problems using PureScript. Of course, sharing teaching and reference resources helps the community, but it also helps Lumi with efforts like hiring. We've already released React Basic and a few other blog posts, but what better way to expand on those resources than releasing this example of how we use React Basic here at Lumi.

What's next?

There's always more to do! We have components to add and documentation to improve. This iteration of Lumi Components evolved out of an initial handful of JavaScript components. We were using it on a JavaScript project, so there are many uses of Nullable and String still left in the lower level component props. There are a few Table-like components that could be refactored onto a new base Table component. We'd like to remove the global CSS and possibly support mobile development by building off of something like React Native. (If this is interesting to you, take a look at the work Dustin Whitney is doing over here.) And, as already mentioned, we'd like to improve our abstractions and clean up the component APIs by creating more high level DSLs and removing the low level overrides (props like style, className, etc) in favor of more composability.

That's enough rambling from me. Go check out the code and demo site. As always, we appreciate feedback on what we're doing so don't be shy, especially if you're interested in working on these things with us.

Lumi is accelerating the world's transition to a circular economy. Want to work with us? We're hiring.

RSS · Github