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

Tools and Strategies for Frontend UI Libraries

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/

mercari
PRO

August 25, 2022
Tweet

More Decks by mercari

Other Decks in Technology

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
  33. None