Tools and Strategies for Frontend UI Libraries

Creating a reliable, usable, and effective frontend component library is a matter of choosing the right tools and strategy to fulfill the developers' needs. In this session, we review the journey the Merpay Frontend team took to rethink and build its internal Vue.js component library
------
Merpay Tech Fest 2022は3日間のオンライン技術カンファレンスです。
IT企業で働くソフトウェアエンジニアおよびメルペイの技術スタックに興味がある方々を対象に2022年8月23日（火）から8月25日（木）までの3日間、開催します。 Merpay Tech Festは事業との関わりから技術への興味を深め、プロダクトやサービスを支えるエンジニアリングを知れるお祭りです。 セッションでは事業を支える組織・技術・課題などへの試行錯誤やアプローチを紹介予定です。お楽しみに！

■イベント関連情報
- 公式ウェブサイト：https://events.merpay.com/techfest-2022/
- 申し込みページ：https://mercari.connpass.com/event/249428/
- Twitterハッシュタグ： #MerpayTechFest
■リンク集
- メルカリ・メルペイイベント一覧：https://mercari.connpass.com/
- メルカリキャリアサイト：https://careers.mercari.com/
- メルカリエンジニアリングブログ：https://engineering.mercari.com/blog/
- メルカリエンジニア向けTwitterアカウント：https://twitter.com/mercaridevjp
- 株式会社メルペイ：https://jp.merpay.com/

Transcript

1. Tools and Strategies for Frontend UI Libraries Marco Solazzi Frontend Engineer , Merpay
2. 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.
3. Frontend developer 2010 ca. http://creativecan.com/2013/04/jquery-slider/
4. Frontend developer 2015 ca. https://todomvc.com/
5. Frontend developer 2020 ca.
6. Our component library is used on internal tools only, so I won’t be able to show screenshots or code samples. 😰 Disclaimer
7. Know what you’re doing!
8. Make a component library that developers can fall in love with. Mission
9. Create an organized set of sharable Vue.js components with simple DX and consistent design and UX. Our goal
10. Organized
11. Organized libraries are easy to navigate and browse. Organized
12. 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
13. Basic setup Package manager: Pnpm - Fast and efficient memory management - workspaces support Task runner: Turborepo - Cached builds - Clear tasks dependency graph - One single executable
14. Basic setup Publishing: Lerna - Conventional-commit based workflow - Independent versions CI: GitHub Actions - Easy setup - Integrates with our infrastructure
15. Improvements Setup iterations CI Time CircleCI + npm + lerna ~14 mins CircleCI + pnpm + turborepo ~6.5 mins GitHub Actions + pnpm + turborepo ~8 mins
16. Developer experience
17. You cannot design the best workflow for every developer, instead you want to define the main use cases you want to cover Developer experience
18. Define your use cases Module types • ESM by default • CJS fallback where needed Bundlers • Vue CLI (webpack) • Vite Frameworks • Nuxt.js
19. 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
20. • 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
21. TSDX: monorepo support, integrated testing and linting microbundle: optimized rollup bundler with support for ESM, TypeScript and JSX Alternatives
22. What about documentation?
23. Enter Storybook 👍 Component development in isolation 👍 Easy to document variants 👍 Built-in markdown documentation support 👎 Difficult to customize 👎 Overall a bit slow (for now)
24. Alternatives: dev environments
25. Alternatives: documentation only Docusaurus VuePress
26. Design and UX
27. The key for great UX is to keep a high standard of consistency and usability. Design and UX
28. Consistency and usability 01 Component testing Jest Vitest Cypress CT
29. Consistency and usability 01 Component testing 02 Accessibility audit Storybook Axe Cypress CT
30. Consistency and usability 01 Component testing 02 Accessibility audit 03 Visual regression testing
31. Closing remarks
32. 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