Grid Style Sheets for webapp layout

Présentation et retour d'expérience sur l'utilisatation d'un moteur de contrainte pour réaliser un layout complexe.
Les liens vers les exemples de démo :
- positionnement simple http://codepen.io/abanctelchevrel/pen/obbRaJ?editors=100
- VFL http://codepen.io/abanctelchevrel/pen/JGGqma
- Dynamic & variables http://codepen.io/abanctelchevrel/pen/pgyvOz?editors=101

Transcript

1. Grid Style Sheets Antoine BANCTEL-CHEVREL
2. Modélisation de l'expérience client par l'analyse sémantique des commentaires client
4. GSS c'est quoi ? ! ! Ne pas confondre
5. GSS c'est quoi ? !
6. Apparté Inspiré de CSS Basé sur des contraintes Pratique pour décrire des layouts non triviaux
7. GSS c'est quoi ? Une syntaxe simple proche de CSS pour faire des layouts complexes en déclarant des contraintes
8. GSS c'est quoi ? Flavored CSS Compiler JSON Layout Engine Solver DOM “GSS is a CSS preprocessor & JS runtime” CCSS
9. Pourquoi GSS howtocenterincss.com
10. Pourquoi GSS Alignement vertical
11. Pourquoi GSS Alignement vertical
12. Pourquoi GSS Et Flexbox alors ? OK, mais •dépendant de l'ordre des noeuds •moins expressif que GSS •pas adapté à des layouts complexes
13. Layout complexe codepen.io
14. Relative positioning
15. I can haz Relative Positioning & Sizing? Why ? Cyclic Dependencies ! NO ! Relative positioning
16. #box1[width] == #box2[width]; #box2[width] == #box3[width]; #box3[width] == #box1[width]; Cyclic Dependencies
17. Cassowary Constraints Resolver Cycles sometimes arise when the programmer added redundant constraints we need a specification for how conflicting preferences are to be traded off For such as complex layout problems with conflicting goals, cycles seem unavoidable 1999
18. Peu connu jusqu'à ce que Apple l'utilise dans Autolayout (depuis Lion) Cassowary Constraints Resolver
19. DEMO !
20. Positionnement et surcontrainte http://codepen.io/abanctelchevrel/pen/obbRaJ?editors=100
21. VFL
22. VFL
23. VFL
24. VFL & Size predicate http://codepen.io/abanctelchevrel/pen/JGGqma
25. Dynamic & Variables http://codepen.io/abanctelchevrel/pen/pgyvOz?editors=101
26. Limitations • pas évident à débuger • mauvais en text wrapping • solveur pas prévisible quand beaucoup de contraintes • taille de la lib 352 ko (jQuery : 98 ko, angular 45 ko)
27. Recommandations • utiliser pour des layouts non triviaux (web app) • garder CSS pour la dimension horizontale • pas trop de contraintes
28. Ressources • https://news.ycombinator.com/item?id=7353944 • https://news.ycombinator.com/item?id=7988064 • https://news.ycombinator.com/item?id=9677306 • http://gridstylesheets.org/ • https://github.com/gss/engine • https://vimeo.com/91393694 • http://codepen.io/thegridgssdocs/pens/popular/ • https://constraints.cs.washington.edu/solvers/ cassowary-tochi.pdf
29. Voilà http://www.dictanova.com/ http://lazyentropy.com/ https://twitter.com/chevreuil Antoine BANCTEL-CHEVREL
30. Voilà http://www.dictanova.com/ http://lazyentropy.com/ https://twitter.com/chevreuil Antoine BANCTEL-CHEVREL on recrute un-e dev front-end !!! Angular, d3.js, UX, React ? http://www.dictanova.com/ingenieure-ux-front-end.html