Type safe CSS with Reason

Slide 1

Slide 1 text

Reason with TYPE SAFE CSS Ciro Nunes @cironunesdev

Slide 2

Slide 2 text

Are you using a CSS pre-processor? @cironunesdev

Slide 3

Slide 3 text

Are you writing CSS-in-JS? @cironunesdev

Slide 4

Slide 4 text

AGENDA TYPE SAFE CSS

Slide 5

Slide 5 text

AGENDA TYPE SAFE CSS Why? 1

Slide 6

Slide 6 text

AGENDA TYPE SAFE CSS Why? 1 How? 2

Slide 7

Slide 7 text

Why should I write my CSS in JavaScript? @cironunesdev

Slide 8

Slide 8 text

@cironunesdev import { css } from '@emotion/core' const titleStyle = css({ boxSizing: 'border-box', width: 300, height: 200 })

Slide 9

Slide 9 text

@cironunesdev

Slide 10

Slide 10 text

@cironunesdev CONFIDENCE Add, change and delete CSS without any unexpected consequences

Slide 11

Slide 11 text

@cironunesdev CONFIDENCE Add, change and delete CSS without any unexpected consequences DYNAMIC STYLES Style your components with a global theme or based on different states

Slide 12

Slide 12 text

@cironunesdev CONFIDENCE Add, change and delete CSS without any unexpected consequences DYNAMIC STYLES Style your components with a global theme or based on different states MAINTAINIBILITY Never go on a hunt for CSS affecting your components ever again

Slide 13

Slide 13 text

Slide 14

Slide 14 text

You know what’s better than CSS-in-JS? @cironunesdev

Slide 15

Slide 15 text

@cironunesdev import { css } from '@emotion/core' const titleStyle = css({ boxSizing: 'bordre-box', width: 300, height: 200 })

Slide 16

Slide 16 text

@cironunesdev import { css } from '@emotion/core'; const titleStyle = css({ ^ Argument of type 'boxSizing: 'bordre-box';' is not assignable [...] boxSizing: 'bordre-box', // Oops, there's a typo! width: 300, height: 200, });

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

That’s right! Type safe CSS! @cironunesdev

Slide 19

Slide 19 text

Can it get better than TypeScript/Flow? @cironunesdev

Slide 20

Slide 20 text

@cironunesdev const titleStyle = css({ border: '1px red red', width: 300, height: 200 })

Slide 21

Slide 21 text

@cironunesdev Type safety ✅ ✅ ✅ Safety level Shallow Deep 100%

Slide 22

Slide 22 text

@cironunesdev

Slide 23

Slide 23 text

let title = style([ boxSizing(`borderBox), width(px(300)), height(px(300)), ]); @cironunesdev

Slide 24

Slide 24 text

let title = style([ boxSizing(`bordreBox), width(px(300)), height(px(300)), ]); @cironunesdev

Slide 25

Slide 25 text

let title = style([ boxSizing(`bordreBox), width(px(300)), height(px(300)), ]); @cironunesdev

Slide 26

Slide 26 text

@cironunesdev let title = style([ border(px(1), red, red), boxSizing(`borderBox), width(px(300)), height(px(300)), ]);

Slide 27

Slide 27 text

@cironunesdev let title = style([ border(px(1), red, red), boxSizing(`borderBox), width(px(300)), height(px(300)), ]);

Slide 28

Slide 28 text

@cironunesdev

Slide 29

Slide 29 text

@cironunesdev 100% SAFETY The compiler ﬁnds errors reliably so you don’t have to

Slide 30

Slide 30 text

@cironunesdev 100% SAFETY The compiler ﬁnds errors reliably so you don’t have to CLARITY There is far less ambiguity. e.g.: “1” == 1 && 1.0 == 1

Slide 31

Slide 31 text

@cironunesdev 100% SAFETY The compiler ﬁnds errors reliably so you don’t have to CLARITY There is far less ambiguity. e.g.: “1” == 1 && 1.0 == 1 LESS ERRORS Type problems are a whole class of errors you just don’t have to deal with

Slide 32

Slide 32 text

Slide 33

Slide 33 text

How can I use it? @cironunesdev

Slide 34

Slide 34 text

@cironunesdev IT’S SHOWTIME FOLKS!

Slide 35

Slide 35 text

@cironunesdev IT’S SHOWTIME FOLKS!

Slide 36

Slide 36 text

@cironunesdev You may fall in love with Reason " WARNING!

Slide 37

Slide 37 text

@cironunesdev OBJECTIVES

Slide 38

Slide 38 text

@cironunesdev OBJECTIVES ☐ Create a Todo app using ReasonReact

Slide 39

Slide 39 text

@cironunesdev OBJECTIVES ☐ Create a Todo app using ReasonReact ☐ Style it using bs-css

Slide 40

Slide 40 text

@cironunesdev OBJECTIVES ☐ Create a Todo app using ReasonReact ☐ Style it using bs-css ☐ Animate the items being added/removed

Slide 41

Slide 41 text

https://reasonml.github.io/

Slide 42

Slide 42 text

@cironunesdev IN CASE YOU HAVEN’T NOTICED

Slide 43

Slide 43 text

@cironunesdev ⚡ speedy compilation time IN CASE YOU HAVEN’T NOTICED

Slide 44

Slide 44 text

@cironunesdev ⚡ speedy compilation time $ helpful error messages IN CASE YOU HAVEN’T NOTICED

Slide 45

Slide 45 text

TAKEAWAYS 1 2 3

Slide 46

Slide 46 text

TAKEAWAYS CSS-IN-JS 1 2 3 %

Slide 47

Slide 47 text

TAKEAWAYS ✓ Conﬁdence: to add, change and delete code CSS-IN-JS 1 2 3 %

Slide 48

Slide 48 text

TAKEAWAYS ✓ Conﬁdence: to add, change and delete code ✓ Performance: improved by delivering only the critical path CSS CSS-IN-JS 1 2 3 %

Slide 49

Slide 49 text

TAKEAWAYS ✓ Conﬁdence: to add, change and delete code ✓ Performance: improved by delivering only the critical path CSS ✓ Dynamic styles is a no brainer CSS-IN-JS 1 2 3 %

Slide 50

Slide 50 text

TAKEAWAYS ✓ Conﬁdence: to add, change and delete code ✓ Performance: improved by delivering only the critical path CSS ✓ Dynamic styles is a no brainer CSS-IN-JS STATIC TYPING 1 2 3 %

Slide 51

Slide 51 text

TAKEAWAYS ✓ Conﬁdence: to add, change and delete code ✓ Performance: improved by delivering only the critical path CSS ✓ Dynamic styles is a no brainer CSS-IN-JS STATIC TYPING ✓ Conﬁdence: that our code is correct at compile-time 1 2 3 %

Slide 52

Slide 52 text

Slide 53

Slide 53 text

TAKEAWAYS ✓ Conﬁdence: to add, change and delete code ✓ Performance: improved by delivering only the critical path CSS ✓ Dynamic styles is a no brainer CSS-IN-JS STATIC TYPING REASON ✓ Conﬁdence: that our code is correct at compile-time ✓ Performance: by giving the compiler type information 1 2 3 %