Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Lumi components release announcement

Announcing Lumi Components

I have the pleasure today 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 more 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 "a DSL for building Lumi UIs". The longer 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 has already written about our Form DSL in detail, so definitely 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 bunch 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. This of course helps the community by getting additional teaching and reference resources out there for people to use, but it also helps Lumi with things 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 also evolved out of an initial handful of JavaScript components and was being consumed by 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 as well go take a look at the work GitHub user dwhitney is doing on this 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 what we're doing so don't be shy, especially if you're interested in working on these things with us!


This comment has been minimized.

Copy link
Owner Author

@spicydonuts spicydonuts commented May 1, 2019

Other possible content to include: code examples, explaining composition vs style props, linking to the demo pages for mentioned components

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.