Dumb CSS-in-JS - Speaker Deck

Slide 1

Slide 1 text

@MoOx Dumb CSS-in-JS 1

Slide 2

Slide 2 text

@MoOx 2 https://moox.io/ @MoOx Max Thirouin • PostCSS • cssnext • reason-react-native • … Known for its contributions to… putaindecode.io

Slide 3

Slide 3 text

@MoOx 3

Slide 4

Slide 4 text

@MoOx Dumb CSS-in-JS Ode à la simplicité 4

Slide 5

Slide 5 text

@MoOx 5 🥵

Slide 6

Slide 6 text

@MoOx SEPARATION OF CONCERN 6

Slide 7

Slide 7 text

@MoOx

Slide 8

Slide 8 text

@MoOx 8

… Web only 🥴

Slide 9

Slide 9 text

@MoOx 9 What if…

Slide 10

Slide 10 text

@MoOx 10 What if…

Slide 11

Slide 11 text

@MoOx PLATFORMS iOS Android Windows macOS Web … 11 📱 💻 🪟 🪟 🤖 🕸 

Slide 12

Slide 12 text

@MoOx React Native 12 (And The StyleSheet)

Slide 13

Slide 13 text

@MoOx 13

Slide 14

Slide 14 text

@MoOx 14

Slide 15

Slide 15 text

@MoOx Rajouter un composant Pseudo-Element? 15 https://putaindecode.io/articles/introduction-a-rud

Slide 16

Slide 16 text

@MoOx On fait du JS Servez vous en et vous pourrez même faire mieux que du hover. Pseudo-selector? 16

Slide 17

Slide 17 text

@MoOx En ben tant mieux! Pas d’effet de bord, enfin! Selector > * + {} = mdr { 17

Slide 18

Slide 18 text

@MoOx Responsive? 18 1. Souvent pas tant besoin que ça. Faites des UIs simples. 2.Du responsive sans media queries c’est possible 3.`onLayout` équivalent des element query! https://putaindecode.io/articles/responsive-sans-media-queries/ https://reactnative.dev/docs/view#onlayout

Slide 19

Slide 19 text

@MoOx Cas particulier? 19 Simple à gérer via de la programmation

Slide 20

Slide 20 text

@MoOx En pratique, ça donne quoi? 20

Slide 21

Slide 21 text

@MoOx 1. Un peu de styles statiques avec indirection 2. Un peu de spacer ou de wrapper au besoin 3. Valeur dynamiques comme les couleurs dans le contexte pratique pour le côté themeable (ex: Dark Mode) 21 https://putaindecode.io/articles/l-anti-divite-c-est-pas-automatique

Slide 22

Slide 22 text

@MoOx import Styles from “./static-styles” import SpacedView from “./SpacedView” const theme = useTheme(); 22

Slide 23

Slide 23 text

@MoOx 23 https://reason-react-native.github.io/en/docs/apis/Style/

Slide 24

Slide 24 text

@MoOx 24 INDIRECTIONS* *= COHERENCE

Slide 25

Slide 25 text

@MoOx Sauf exception • Nommer vos valeurs* • Pas de valeurs numériques “aléatoire” 25 * Oui c’est compliqué

Slide 26

Slide 26 text

@MoOx Bonus 26

Slide 27

Slide 27 text

@MoOx 27 https://github.com/MoOx/LifeTime/blob/ 5ce54e13096642da02e46bf54b48548f7b5b1890/ src/components/shareable/Theme.res#L245-L270 https://github.com/MoOx/react-multiversal/blob/master/src/SpacedView.re https://github.com/MoOx/react-multiversal https://github.com/MoOx/LifeTime

Slide 28

Slide 28 text

@MoOx React Native avec props d’accessibilité → tag html auto 28 https://reactnative.dev/docs/accessibility https://necolas.github.io/react-native-web/docs/?path=/docs/guides-accessibility--page

Slide 29

Slide 29 text

@MoOx React Native Web StyleSheet = Auto atomic CSS 29

Slide 30

Slide 30 text

@MoOx 30

Slide 31

Slide 31 text

@MoOx Animation simple, performante et réaliste avec Animated 31 https://moox.io

Slide 32

Slide 32 text

@MoOx Faites VOS briques petit à petit, au besoin SANS ABSTRAIRE PRÉMATURÉMENT. 32

Slide 33

Slide 33 text

@MoOx « Oui mais tout ça je peux le faire en CSS » 33 • Effort de maintenance supérieur. • CSS a été désigné pour ajouter des « skins » à des documents • Ce côté “modifiable” n’a aucun sens pours des produits de qualité • L’UX a besoin de chose bien défini et non modifiable.

Slide 34

Slide 34 text

@MoOx Peut être ça ne colle pas à vos besoin du moment mais prenez juste le temps de savoir pourquoi 34 https://putaindecode.io/articles/pourquoi-j-ai-arrete-d-utiliser-css/

Slide 35

Slide 35 text

@MoOx Ne vous bloquer pas sur vos connaissances et expérimenter. Les choix sont toujours une question de compromis 35 https://putaindecode.io/articles/tradeoffs

Slide 36

Slide 36 text

@MoOx N’ayez pas peur d’utiliser des choses simples qui ont l’air stupide. 36 https://putaindecode.io/articles/2021-01-29-ecrivez-du-code-stupide

Slide 37

Slide 37 text

@MoOx 1. Facile à lire car concentré à l’endroit où il a du sens 2. Explicite car directe pas de side effects de sélecteur ou des pseudo-elements etc 3. Supprimable car localisé la où il est utilisé 37

Slide 38

Slide 38 text

@MoOx 38 Questions ? https://moox.io/ @MoOx Max Thirouin 🤔