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

More Decks by Benoît Burgener

Other Decks in Programming


  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. Agenda • What is Chūshō • Why it’s born •

    Goals • How it’s made • Lessons learnt • Questions & demo
  3. 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
  4. Why

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

    their inputs Personal growth I like to learn new stuff ¯\_(ツ)_/¯ W H Y
  7. 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 ☀ ❄
  8. 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, …
  9. 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
  10. 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
  11. 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
  12. How

  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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