Rapid Innovation with Lit

At LiveLoveApp we focus on providing technology leadership to startups. A startup requires rapid innovation with low-cost solutions to enable validation and potential pivots. We reach for a lot of tools, including no-code and low-code tools, as well as serverless and frontend frameworks to make this happen. When it comes to a frontend framework or any tool, we don't choose based on our personal favorites. We choose a tool that drives us to the solution that the customer needs.

Choosing Lit

Our client had the following requirements:

• As a user, I can choose between a graph or table view of a metric.
• As a user, I can choose from a list of metrics to display.
• Easily embed the display of metrics into a WordPress page.
• Responsive design using modern tooling to enable rapid innovation.

When examining the landscape of potential tooling we identified Lit as meeting the needs of the project. Lit provides a simple and very lightweight approach to building reusable web components. Further, we can leverage TypeScript and rollup for quality and building for a production environment.

Some alternatives that we considered had too heavy of a footprint or required building a custom pipeline to build for production.

The value of Lit

Here are the key values propositions of using Lit for the project:

• The biggest value of using Lit for the project is the footprint of around 5kb. This is hard to beat when compared to other options that are currently available.
• Further, Lit's documentation was easy to use and understand.
• The declarative template of Lit felt familiar coming from building applications using React, Angular, and Vue.
• Lit does the job of building web components well and doesn't try to do anything else. This, in particular, was a perfect fit for building a reusable web component that will be leveraged by WordPress shortcodes.
• Finally, Lit has reactive properties making it easy to manage state and react to state changes in the component.

The cost of Lit

Some hurdles and costs to using Lit for the project included:

• We would have preferred to use snowpack with esbuild but ended up using Rollup because of the documentation. It would be nice if Lit updated their production build documentation to include snowpack and esbuild.
• While Lit uses shadow DOM and scoped styling, it would be nice to use Scss for writing the styles of the component. The inline styles for the component grew pretty quickly, and using an external stylesheet is not recommended with Lit.

Conclusion

Building at the speed and cost of a startup can be challenging. Choosing the right tools and approach is key to the success of a project, and ultimately, of a company. We determined that Lit was the best tool for rapidly building a web component that is highly reusable and can be composed with WordPress shortcodes for embedding the display of metrics for our client.