As developers, we rely on libraries built and battle-tested by others rather than write everything from scratch. As frontend developers, this often means using pre-built components. Components render HTML for you and affect how your web app looks and behaves. They allow some customization via CSS classes or configuration records. This leads to a large API and a complex implementation to allow for as many use cases as possible. Customizing the component to your specific use case can be nearly as costly as writing a new one from scratch. These limitations arise largely because the component performs rendering for you. But what if it didn't?
The `purescript-halogen-select` library demonstrates another approach. The library provides essential behaviors for selection user interfaces (like dropdowns, typeaheads, and image pickers) as a group of Halogen components. But you won't find a single render function in the code. Instead, with the help of a few `getProps` helpers, you can write your HTML rendering however you'd like. You can freely include your own queries and the library will return them to be run. You can even use any data you want from your parent state in your render functions. The library manages user interaction, state, accessibility, and logic; you are responsible for rendering HTML depending on that state.
This talk will:
- Describe the design and implementation of the `purescript-halogen-select` library.
- Walk through how a company uses it in production to build dropdowns, typeaheads, calendar pickers, and other components.
- Show how you can use props helpers and the `Store` comonad to design open-source Halogen components without limiting users from rendering HTML as they see fit.
0 Comments