Vue.js and Design Systems

@ramonvictor

Who am I?

  • Originally from Recife, Brazil
  • 6+ years living in Amsterdam
  • 11+ years working with Frontend and UX
  • Principal Frontend Developer @ Booking.com

Agenda

  • Design Systems: what and why
  • VueJS & building a component library
  • First version
  • Learnings & V2 changes
  • Takeaways
  • Resources

What is a Design System?

A design system is a set of patterns and practices organized to serve the purpose of a digital product.
– Alla Kholmatova, Design Systems book

It enables...

  • Common design language
  • Consistent cross-product UI and usability
  • Built-in accessibility
  • Cross-discipline collaboration
  • Faster time-to-market

What a Design System is NOT?

  • Just a collection of components
  • Silver bullet solution to all UX problems
  • Just a toolkit for Designers

Design System building blocks

See the Design System Checklist for deeper insights.

Big companies using Design Systems

Why is it important for Booking.com?

In simple words, for us it boiled down to
improving quality and speed of innovation.

Key facts about

  • 23 years old company
  • 43 languages to enable localized experience
  • up to 1.5M room nights are reserved each day
  • Customer, partner and internal facing products
Design system empowers your team to focus on people — not pixels.
- Mariah Muscato

VueJS & building a component library

Important disclaimer

  • VueJS is not the only framework used @ B.com
  • Main focus: Partner & internal facing products

Where does VueJS fit?

First Version

What were the requirements?

  • Leverage on "Web - Core" implementation
  • Clear versioning/distribution strategy
  • Enable community contribution
  • Apply VueJS best practices

File structure and naming conventions

File structure and naming conventions

Code quality: ESLint

Scaffolding new components with hygen

Unit testing with Jest

Unit testing with Jest > Snapshot

@vuedoc/md for component API docs

@vuedoc/md for component API docs

Storybook

Storybook / Webpack advanced

Library distribution and versioning

Final outcome (Storybook demo)

http://localhost:8000

Learnings & Changes

4 lessons that led to changes

  1. Unintended breaking changes / bugs
  2. Inconsistent prop APIs
  3. JS bundle & unnecessary performance costs
  4. Slow and error-prone release process

1. Unintended breaking changes / bugs

Solution: revised testing automation strategy

1.1 High unit tests coverage as the main focus

1.2 Unit tests: detailed input & output contracts

1.3 Visual regression tests with Cypress

1.4 E2E only for things Jest can't test

2. Inconsistent prop APIs

Solution: API alignment across platforms & similar components + styleguide

2.1 React and Vue API alignment

2.1 Common components API review

3. JS bundle & performance costs

Solution: proper tree-sharking

4. Slow and error-prone release process

Solution: commit-lint + cz-conventional-changelog

4.1 commit-lint

4.2 cz-conventional-changelog

Key takeaways

A design system is a product, not a project!

Building a component library

  • Enforce basic conventions: eslint, commit lint, etc
  • Automate repetitive tasks (release, svgs, docs, etc)
  • Define clear testing strategy from day one
  • API-first mindset
  • Explicit naming conventions and guidelines
  • Cross-platform alignment as part of the process

Resources

Design System Checklist

Vue enterprise boilerplate

Reference libs: Vuetify

Design Systems book

Obrigado! 🇧🇷

ramonvictor.github.io/vuejs-and-design-systems

For questions/feedback:
@ramonvictor