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 full-size slide

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

    View full-size slide

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

    View full-size slide

  4. 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 full-size slide

  5. Button
    Icon
    Alert

    View full-size slide

  6. Tabs
    Collapse
    Modal

    View full-size slide

  7. 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 full-size slide

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

    View full-size slide

  9. 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 full-size slide

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

    View full-size slide

  11. 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 full-size slide

  12. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  15. 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 full-size slide

  16. 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 full-size slide

  17. 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 full-size slide

  18. Composition
    API

    View full-size slide

  19. 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 full-size slide

  20. Render
    functions

    View full-size slide

  21. 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 full-size slide

  22. 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 full-size slide

  23. GitHub
    Actions

    View full-size slide

  24. 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 full-size slide

  25. Vite
    playground

    View full-size slide

  26. 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 full-size slide

  27. Lessons learnt

    View full-size slide

  28. 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 full-size slide

  29. 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 full-size slide

  30. What’s next

    View full-size slide

  31. 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 full-size slide

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

    View full-size slide