Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Tools and Strategies for Frontend UI Libraries

August 25, 2022

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/


August 25, 2022

More Decks by mercari

Other Decks in Technology


  1. 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.
  2. Our component library is used on internal tools only, so

    I won’t be able to show screenshots or code samples. 😰 Disclaimer
  3. Create an organized set of sharable Vue.js components with simple

    DX and consistent design and UX. Our goal
  4. 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
  5. Basic setup Package manager: Pnpm - Fast and efficient memory

    management - workspaces support Task runner: Turborepo - Cached builds - Clear tasks dependency graph - One single executable
  6. Basic setup Publishing: Lerna - Conventional-commit based workflow - Independent

    versions CI: GitHub Actions - Easy setup - Integrates with our infrastructure
  7. Improvements Setup iterations CI Time CircleCI + npm + lerna

    ~14 mins CircleCI + pnpm + turborepo ~6.5 mins GitHub Actions + pnpm + turborepo ~8 mins
  8. You cannot design the best workflow for every developer, instead

    you want to define the main use cases you want to cover Developer experience
  9. Define your use cases Module types • ESM by default

    • CJS fallback where needed Bundlers • Vue CLI (webpack) • Vite Frameworks • Nuxt.js
  10. 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
  11. • 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
  12. TSDX: monorepo support, integrated testing and linting microbundle: optimized rollup

    bundler with support for ESM, TypeScript and JSX Alternatives
  13. Enter Storybook 👍 Component development in isolation 👍 Easy to

    document variants 👍 Built-in markdown documentation support 👎 Difficult to customize 👎 Overall a bit slow (for now)
  14. The key for great UX is to keep a high

    standard of consistency and usability. Design and UX
  15. 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