Type safe CSS with Reason

Transcript

1. Reason with TYPE SAFE CSS Ciro Nunes @cironunesdev
2. Are you using a CSS pre-processor? @cironunesdev
3. Are you writing CSS-in-JS? @cironunesdev
4. AGENDA TYPE SAFE CSS
5. AGENDA TYPE SAFE CSS Why? 1
6. AGENDA TYPE SAFE CSS Why? 1 How? 2
7. Why should I write my CSS in JavaScript? @cironunesdev
8. @cironunesdev import { css } from '@emotion/core' const titleStyle = css({ boxSizing: 'border-box', width: 300, height: 200 })
9. @cironunesdev
10. @cironunesdev CONFIDENCE Add, change and delete CSS without any unexpected consequences
11. @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
12. @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
13. @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 PERFORMANCE Send only the critical CSS to the user for a rapid first paint
14. You know what’s better than CSS-in-JS? @cironunesdev
15. @cironunesdev import { css } from '@emotion/core' const titleStyle = css({ boxSizing: 'bordre-box', width: 300, height: 200 })
16. @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, });
18. That’s right! Type safe CSS! @cironunesdev
19. Can it get better than TypeScript/Flow? @cironunesdev
20. @cironunesdev const titleStyle = css({ border: '1px red red', width: 300, height: 200 })
21. @cironunesdev Type safety ✅ ✅ ✅ Safety level Shallow Deep 100%
22. @cironunesdev
23. let title = style([ boxSizing(`borderBox), width(px(300)), height(px(300)), ]); @cironunesdev
24. let title = style([ boxSizing(`bordreBox), width(px(300)), height(px(300)), ]); @cironunesdev
25. let title = style([ boxSizing(`bordreBox), width(px(300)), height(px(300)), ]); @cironunesdev
26. @cironunesdev let title = style([ border(px(1), red, red), boxSizing(`borderBox), width(px(300)), height(px(300)), ]);
27. @cironunesdev let title = style([ border(px(1), red, red), boxSizing(`borderBox), width(px(300)), height(px(300)), ]);
28. @cironunesdev
29. @cironunesdev 100% SAFETY The compiler finds errors reliably so you don’t have to
30. @cironunesdev 100% SAFETY The compiler finds errors reliably so you don’t have to CLARITY There is far less ambiguity. e.g.: “1” == 1 && 1.0 == 1
31. @cironunesdev 100% SAFETY The compiler finds 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
32. @cironunesdev 100% SAFETY The compiler finds 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 PERFORMANCE The more information the compiler has, the more it can optimise
33. How can I use it? @cironunesdev
34. @cironunesdev IT’S SHOWTIME FOLKS!
35. @cironunesdev IT’S SHOWTIME FOLKS!
36. @cironunesdev You may fall in love with Reason " WARNING!
37. @cironunesdev OBJECTIVES
38. @cironunesdev OBJECTIVES ☐ Create a Todo app using ReasonReact
39. @cironunesdev OBJECTIVES ☐ Create a Todo app using ReasonReact ☐ Style it using bs-css
40. @cironunesdev OBJECTIVES ☐ Create a Todo app using ReasonReact ☐ Style it using bs-css ☐ Animate the items being added/removed
41. https://reasonml.github.io/
42. @cironunesdev IN CASE YOU HAVEN’T NOTICED
43. @cironunesdev ⚡ speedy compilation time IN CASE YOU HAVEN’T NOTICED
44. @cironunesdev ⚡ speedy compilation time $ helpful error messages IN CASE YOU HAVEN’T NOTICED
45. TAKEAWAYS 1 2 3
46. TAKEAWAYS CSS-IN-JS 1 2 3 %
47. TAKEAWAYS ✓ Confidence: to add, change and delete code CSS-IN-JS 1 2 3 %
48. TAKEAWAYS ✓ Confidence: to add, change and delete code ✓ Performance: improved by delivering only the critical path CSS CSS-IN-JS 1 2 3 %
49. TAKEAWAYS ✓ Confidence: 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 %
50. TAKEAWAYS ✓ Confidence: 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 %
51. TAKEAWAYS ✓ Confidence: 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 ✓ Confidence: that our code is correct at compile-time 1 2 3 %
52. TAKEAWAYS ✓ Confidence: 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 ✓ Confidence: that our code is correct at compile-time ✓ Performance: by giving the compiler type information 1 2 3 %
53. TAKEAWAYS ✓ Confidence: 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 ✓ Confidence: that our code is correct at compile-time ✓ Performance: by giving the compiler type information 1 2 3 %
54. TAKEAWAYS ✓ Confidence: 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 ✓ Confidence: that our code is correct at compile-time ✓ Performance: by giving the compiler type information ✓ Confidence: that our code is 100% type safe and sound 1 2 3 %
55. TAKEAWAYS ✓ Confidence: 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 ✓ Confidence: that our code is correct at compile-time ✓ Performance: by giving the compiler type information ✓ Confidence: that our code is 100% type safe and sound ✓ Familiar: Syntax & ecosystem used by JS developers 1 2 3 %
56. Ciro Nunes THANK YOU! @cironunesdev
57. Ciro Nunes THANK YOU! Follow me on Twitter @cironunesdev Ask me anything!
58. cironunes/todo-reason
59. reasonml-labs/bs-css/