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

    View Slide

  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.

    View Slide

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

    View Slide

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

    View Slide

  5. Frontend developer 2020 ca.

    View Slide

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

    View Slide

  7. Know what you’re doing!

    View Slide

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

    View Slide

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

    View Slide

  10. Organized

    View Slide

  11. Organized libraries are easy to navigate and
    browse.
    Organized

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  16. Developer experience

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  22. What about
    documentation?

    View Slide

  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)

    View Slide

  24. Alternatives: dev environments

    View Slide

  25. Alternatives: documentation only
    Docusaurus
    VuePress

    View Slide

  26. Design and UX

    View Slide

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

    View Slide

  28. Consistency and usability
    01 Component testing
    Jest
    Vitest Cypress CT

    View Slide

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

    View Slide

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

    View Slide

  31. Closing remarks

    View Slide

  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

    View Slide

  33. View Slide