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

Chūshō: what, why and how

Chūshō: what, why and how

6a5681378ef043b9050ae1a38d689313?s=128

Benoît Burgener

December 21, 2020
Tweet

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
  2. Name Benoît Burgener Primary role Front-end developer H E L

    L O Location Lausanne
  3. Agenda • What is Chūshō • Why it’s born •

    Goals • How it’s made • Lessons learnt • Questions & demo
  4. What

  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
  6. Button Icon Alert

  7. Tabs Collapse Modal

  8. Why

  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
  10. Open source Give back to the community & benefit from

    their inputs Personal growth I like to learn new stuff ¯\_(ツ)_/¯ W H Y
  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 ☀ ❄
  12. Let’s do this Why did I Oh boi Flip table

  13. Goals

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

    button> <div id="chusho toggle-1"> Lorem ipsum dolor sit amet consectetur adipisicing elit. div> Automatically generate IDs, set proper roles and aria attributes, enable keyboard navigation, …
  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
  16. Use variant for different styles <CBtn variant="primary" disabled>Label CBtn> <button

    class="btn btn primary btn disabled">Label button> No need to wrap components
  17. Skip the con g if you need to <CBtn class="custom

    button" bare>Label CBtn> <button class="custom button">Label button> Create a very specific component variant once
  18. How

  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
  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
  21. TypeScript

  22. None
  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
  24. Composition API

  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
  26. Render functions

  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
  28. Monorepo

  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
  30. GitHub Actions

  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
  32. Vite playground

  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
  34. Lessons learnt

  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
  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
  37. What’s next

  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
  39. github.com/liip/chusho chusho.dev Questions?