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
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
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?