Dumb CSS-in-JS

https://moox.io/
https://putaindecode.io/
https://reactnative.dev/
https://necolas.github.io/react-native-web/
https://putaindecode.io/articles/introduction-a-rud
https://putaindecode.io/articles/responsive-sans-media-queries/
https://reactnative.dev/docs/view#onlayout
https://putaindecode.io/articles/l-anti-divite-c-est-pas-automatique
https://reason-react-native.github.io/en/docs/apis/Style/
https://github.com/MoOx/LifeTime
https://github.com/MoOx/LifeTime/blob/5ce54e13096642da02e46bf54b48548f7b5b1890/src/components/shareable/Theme.res#L245-L270
https://github.com/MoOx/react-multiversal
https://github.com/MoOx/react-multiversal/blob/master/src/SpacedView.re
https://reactnative.dev/docs/accessibility
https://necolas.github.io/react-native-web/docs/?path=/docs/guides-accessibility--page
https://putaindecode.io/articles/pourquoi-j-ai-arrete-d-utiliser-css/
https://putaindecode.io/articles/tradeoffs
https://putaindecode.io/articles/2021-01-29-ecrivez-du-code-stupide

Transcript

1. @MoOx
   Dumb CSS-in-JS
   1
   

   View Slide

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

   View Slide

3. @MoOx
   3
   

   View Slide

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

   View Slide

5. @MoOx
   5
   🥵
   

   View Slide

6. @MoOx
   SEPARATION
   
   
   OF CONCERN
   6
   

   View Slide

7. @MoOx
   
   7
   

   View Slide

8. @MoOx
   8
   
   … Web only 🥴
   

   View Slide

9. @MoOx
   9
   What if…
   

   View Slide

10. @MoOx
    10
    
    What if…
    

    View Slide

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

    View Slide

12. @MoOx
    React Native
    12
    (And The StyleSheet)
    

    View Slide

13. @MoOx
    13
    

    View Slide

14. @MoOx
    14
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. @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
    

    View Slide

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

    View Slide

20. @MoOx
    En pratique,
    
    
    ça donne quoi?
    20
    

    View Slide

21. @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
    

    View Slide

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

    View Slide

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

    View Slide

24. @MoOx
    24
    INDIRECTIONS*
    *= COHERENCE
    

    View Slide

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

    View Slide

26. @MoOx
    Bonus
    26
    

    View Slide

27. @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
    

    View Slide

28. @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
    

    View Slide

29. @MoOx
    React Native Web StyleSheet
    
    
    =
    
    
    Auto atomic CSS
    29
    

    View Slide

30. @MoOx
    30
    

    View Slide

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

    View Slide

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

    View Slide

33. @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.
    

    View Slide

34. @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/
    

    View Slide

35. @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
    

    View Slide

36. @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
    

    View Slide

37. @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
    

    View Slide

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

    View Slide