Building Components with Surface
Let's Learn how to use Surface to build complex components.
We'll cover the following...
So far in this course, we’ve built our own LiveView components from scratch. While this has allowed us to build layered and organized user interfaces, we’ve also seen that complex markup leads to mistakes. Passing the wrong values or incomplete data will break a component, sometimes with an obscure error.
The templating syntax can also be error-prone. For example, forgetting to close a tag can change the structure of a document and lead to more potential pitfalls as LiveView tries to stitch the right values into the DOM at the right time.
Benefits of Surface components
The Surface Library solves all of these problems. The surface is a component library for LiveView that provides:
- Syntactic sugar for defining and rendering components.
- Type checking to enforce both HTML structure and component input types.
- Out-of-the-box organization and type checking for public and private data.
- Syntax highlighting in some editors, like VSCode.
But before we jump into building Surface components, let’s make a plan.
Planning the Presentation layer
When we built the admin dashboard, we used the Contex library to produce SVG. That approach hid graphics presentation details from us. ...