Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

What

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Button Icon Alert

Slide 7

Slide 7 text

Tabs Collapse Modal

Slide 8

Slide 8 text

Why

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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 ☀ ❄

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Goals

Slide 14

Slide 14 text

Accessible Toggle button>
Lorem ipsum dolor sit amet consectetur adipisicing elit. div> Automatically generate IDs, set proper roles and aria attributes, enable keyboard navigation, …

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

How

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

TypeScript

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Composition API

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Render functions

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Monorepo

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

GitHub Actions

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Vite playground

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Lessons learnt

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

What’s next

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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