Thinking about Developer Experience
As Vue.js developers, we are spoiled when it comes to developer experience (DX), or “the experience developers have while using or working on your product”. From first-class documentation, to browser extension based or standalone Vue developer tools, to opinionated packages for routing, state management and unit testing, Vue’s ecosystem has always been developer centric, and newcomer friendly. Good DX is therefore a key value software project maintainers should work towards for long-term sustainability of their projects or their developer community.
- How might developers use vue-uhtml to develop a UI library
- How might developers unit test components built with vue-uhtml
- How might developers be aware of accessibility issues when developing with vue-uhtml
A dev environment for Custom Elements projects
Storybook is a popular and easy-to-use open source tool for building UI components in isolation. Given my previous experience in using Storybook for Vue based projects, this was a natural option for UI development with vue-uhtml. Storybook’s Web Components flavour made this decision an even easier one since this is officially supported and well documented. One possible drawback when using Storybook for Web Components is the use of the lit-html templating utility to create “stories” for your components. The lit-html project is incidentally the library Evan You chose to implement his own Custom Elements project with. In the case of this project, having to implement components in a slightly different uhtml syntax and “stories” in the lit-html syntax is objectively a negative developer experience, and has to be considered further for a wider vue-uhtml developer community.
A major hurdle to overcome when developing Custom Elements is an approach for implementing styles and CSS via the encapsulated Shadow DOM, especially when also using CSS pre and post processors. This issue is usually solved during the build process when tools like Webpack or Rollup orchestrate CSS transformations before bundling and injecting processed styles in the right place. Front-end framework CLI tools like vue-cli-service, Vite or create-react-app abstract much of the underlying processing and building for both development and production environments. For example, most Vue developers would not need to be concerned with how a Vue single file component gets compiled by Webpack or Vite and served on a local port when
`yarn serve` is run. This is great DX, but probably not something that would be easily achievable for vue-uhtml development in the short term.
Putting the pieces together, these were the steps I took to set up a Storybook based development environment with decent DX to build UI components with vue-uhtml:
- Configure a bare bones Rollup project to process vue-uhtml defined Custom Elements for both development and production
- Configure Rollup to watch the `src` directory to compile the components to a `dev` directory
- Configure Storybook for Web Components and write component stories using the rolled-up output component definitions in the `dev` directory (rather than `src)`
- Run Rollup and Storybook concurrently via a `dev` script