Tools and Strategies for Frontend UI Libraries Marco Solazzi Frontend Engineer , Merpay 

Marco Solazzi / @dwj Frontend Engineer @ Merpay Until 2017 Marco lived in northern Italy, where he worked as a Frontend developer in the communication and creative fields. He then moved to Tokyo to work for Shiftbrain, a creative web agency, and finally joined Merpay in February 2020. Marco is passionate about UI development, design systems, and accessibility. He is a Vue.js early adopter (and very much still in love with it), but he also likes experimenting with next-gen libraries like Svelte and Solid.js. 

Frontend developer 2010 ca. http://creativecan.com/2013/04/jquery-slider/ 

Frontend developer 2015 ca. https://todomvc.com/ 

Frontend developer 2020 ca. 

Our component library is used on internal tools only, so I won’t be able to show screenshots or code samples. 😰 Disclaimer 

Know what you’re doing! 

Make a component library that developers can fall in love with. Mission 

Create an organized set of sharable Vue.js components with simple DX and consistent design and UX. Our goal 

Organized 

Organized libraries are easy to navigate and browse. Organized 

Define components’ layers Core Layer 1 Layer 3 Layer 2 project - override / custom design tokens - project specific components - Input, select, … - Layout primitives - Layout blocks (top bar, containers) - Design tokens (--color-red-50, --color-brand-primary) - base components (button, table, dialog) Form Layout 

Basic setup Package manager: Pnpm - Fast and efficient memory management - workspaces support Task runner: Turborepo - Cached builds - Clear tasks dependency graph - One single executable 

Basic setup Publishing: Lerna - Conventional-commit based workflow - Independent versions CI: GitHub Actions - Easy setup - Integrates with our infrastructure 

Improvements Setup iterations CI Time CircleCI + npm + lerna ~14 mins CircleCI + pnpm + turborepo ~6.5 mins GitHub Actions + pnpm + turborepo ~8 mins 

Developer experience 

You cannot design the best workflow for every developer, instead you want to define the main use cases you want to cover Developer experience 

Define your use cases Module types ● ESM by default ● CJS fallback where needed Bundlers ● Vue CLI (webpack) ● Vite Frameworks ● Nuxt.js 

Required deliverables 01 Installable as a Vue.js plugin 02 Configurable Nuxt.js module 03 Components as Vue.js SFC modules ● Vue-CLI and Vite support SFC in node_modules ● SFC are complied based on the end-user setup 04 TypeScript declaration files 

● Developed by the Nuxt.js team ● Bundle build (powered by Rollup and esbuild) ✅ Vue.js plugin & Nuxt module ✅ TypeScript declarations ● Bundle-less build (powered by unjs/mkdist) ✅ Transpiled Vue.js SFC modules ✅ Individual component TypeScript declarations The build tool: unjs/unbuild 

TSDX: monorepo support, integrated testing and linting microbundle: optimized rollup bundler with support for ESM, TypeScript and JSX Alternatives 

What about documentation? 

Enter Storybook 👍 Component development in isolation 👍 Easy to document variants 👍 Built-in markdown documentation support 👎 Difficult to customize 👎 Overall a bit slow (for now) 

Alternatives: dev environments 

Alternatives: documentation only Docusaurus VuePress 

Design and UX 

The key for great UX is to keep a high standard of consistency and usability. Design and UX 

Consistency and usability 01 Component testing Jest Vitest Cypress CT 

Consistency and usability 01 Component testing 02 Accessibility audit Storybook Axe Cypress CT 

Consistency and usability 01 Component testing 02 Accessibility audit 03 Visual regression testing 

Closing remarks 

Having a clear strategy is the key to choose the right tools to create component libraries that other developers will love to use. A matter of love 

No content