Chūshō: what, why and how

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