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

Chūshō: what, why and how

Chūshō: what, why and how

Benoît Burgener

December 21, 2020
Tweet

More Decks by Benoît Burgener

Other Decks in Programming

Transcript

  1. B E N O Î T B U R G E N E R
    Author
    1 7 . 1 2 . 2 0 2 0
    Date
    Chūshō
    A library of bare & accessible components and tools for Vue.js 3

    View Slide

  2. Name
    Benoît Burgener
    Primary role
    Front-end developer
    H E L L O
    Location
    Lausanne

    View Slide

  3. Agenda • What is Chūshō
    • Why it’s born
    • Goals
    • How it’s made
    • Lessons learnt
    • Questions & demo

    View Slide

  4. What

    View Slide

  5. Vue.js 3 library
    Of components & directives
    Accessible
    Following WCAG recommendations for interactive elements
    Unstyled
    Not a single line of CSS is included
    W H A T

    View Slide

  6. Button
    Icon
    Alert

    View Slide

  7. Tabs
    Collapse
    Modal

    View Slide

  8. Why

    View Slide

  9. Alternatives are limited
    And are always difficult to style
    Headless is more and more common
    And Vue allows us to share components
    Single code base, tested & documented
    No more copy/pasta between projects
    W H Y

    View Slide

  10. Open source
    Give back to the community & benefit from their inputs
    Personal growth
    I like to learn new stuff ¯\_(ツ)_/¯
    W H Y

    View Slide

  11. Spring 2020
    First prototype of known
    components using Vue 2 and
    the Composition API plugin
    Summer 2020
    A couple of small projects use
    the first components, little
    improvements and fixes
    Fall 2020
    Huge refactor for Vue 3, new
    development setup, new
    components and first directive
    Winter 2021
    Wait and see…
    T I M E L I N E
    ☀ ❄

    View Slide

  12. Let’s do this
    Why did I
    Oh boi
    Flip table

    View Slide

  13. Goals

    View Slide

  14. Accessible
    type="button"
    aria expanded="true"
    aria controls="chusho toggle-1"
    >
    Toggle
    button>

    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    div>
    Automatically generate IDs, set proper roles and aria attributes, enable keyboard navigation, …

    View Slide

  15. Unstyled, but not unstylable
    components: {
    btn: {
    class({ variant, disabled }) {
    return {
    'btn': !variant variant includes('primary'),
    'btn default': !variant,
    'btn primary': variant includes('primary'),
    'btn disabled': disabled,
    };
    },
    },
    },
    Define classes globally in the config, apply them conditionally based on props

    View Slide

  16. Use variant for different styles
    Label CBtn>
    Label button>
    No need to wrap components

    View Slide

  17. Skip the con g if you need to
    Label CBtn>
    Label button>
    Create a very specific component variant once

    View Slide

  18. How

    View Slide

  19. TypeScript
    Provide types to users, prevent mistakes & ease refactorings
    Composition API
    Separation of concerns beyond interface
    Render functions
    For extra super powers
    H O W

    View Slide

  20. Monorepo architecture
    Using Lerna
    GitHub Actions
    For continuous integration and publishing releases
    Vite playground
    Ala Storybook, to work on and test components
    H O W

    View Slide

  21. TypeScript

    View Slide

  22. View Slide

  23. The compiler refactors for you
    Change a type and wait for the compiler to tell you what should be changed elsewhere
    Beware the untyped holes
    Templates for example, but hopefully not for long
    Expect headaches with generic types
    And other weird Vue types and inference
    T Y P E S C R I P T

    View Slide

  24. Composition
    API

    View Slide

  25. Probably not for everyday use
    Apply to complex problems where you want to reuse logic related to reactivity
    Not as easy to read as Options API
    I don’t know how to organize the code to make it look tidy, really
    Mixing Composition and Options API
    Can lead to some weird typing errors which should be fixed soon
    C O M P O S I T I O N A P I

    View Slide

  26. Render
    functions

    View Slide

  27. Conditional rendering without dupes
    Templates are really bad at this job
    Great to better understand Vue core
    Take some time to read the docs about it
    Render…less
    Use a component to render another one with default props or slots
    R E N D E R F U N C T I O N S

    View Slide

  28. Monorepo

    View Slide

  29. Everything lives in the same place
    No need to manually npm link stuff together
    Beware the symlinks
    EsLint, Webpack, … they will require some extra config to work properly
    Automated release process
    Bump versions, generate changelog and publish to GitHub & npm
    M O N O R E P O

    View Slide

  30. GitHub
    Actions

    View Slide

  31. Replace Travis in 5 minutes
    It Just Works
    More than a CI
    Audit, optimize assets, fix code, publish releases, …
    G I T H U B A C T I O N S

    View Slide

  32. Vite
    playground

    View Slide

  33. Deserves its name
    It’s really fucking fast
    Beware dependencies cache
    Deps are optimized by default, you need to opt-out if you link some locally
    V I T E P L A Y G R O U N D

    View Slide

  34. Lessons learnt

    View Slide

  35. Vue CLI is not appropriate for libraries, use Rollup
    Webpack cannot emit ES modules (yet), required for tree-shaking
    TypeSript is worth it
    But can be difficult to deal with sometimes
    Monorepos are great
    But expect weird issues
    L E S S O N S L E A R N T

    View Slide

  36. Keep it simple
    Inversion of control is key
    Configure common tools globally
    Single configuration for all, reduce maintenance, ensure consistency
    Tree-shaking is difficult
    But It Just Works once you understand all the requirements
    L E S S O N S L E A R N T

    View Slide

  37. What’s next

    View Slide

  38. New components
    Select, Dropdown, …
    Vue CLI plugin?
    For easier installation
    Actually using it in projects
    And improve/extend based on our needs
    W H A T ’ S N E X T

    View Slide

  39. github.com/liip/chusho
    chusho.dev
    Questions?

    View Slide