Une présentation des modèles orienté composants du framework HTML5 Montage par rapport aux classiques modèles basés sur les chaines de caractères comme handlebar. Cette présentation aborde des considérations d'expérience utilisateur, développement logiciel et productivité d'équipe
1. Rasez cette moustache guidon
Benoit Marchant
CEO & Founder
montagestudio.com
@montagejs
✉ benoit@montagestudio.com
Pour l’élégance des modèles
orienté composant de Montage
Shave that handlebar moustache
2. Modèle (template)
1. Forme de référence en métal, bois, carton,
plastique, ou autre materiau à partir de
laquelle sont créés des objets qui
présentent des caractéristiques communes,
en peinture, découpe, où perçage
3. Modèle (template)
1. Forme de référence en métal, bois, carton,
plastique, ou autre materiau à partir de
laquelle sont créés des objets qui
présentent des caractéristiques communes,
en peinture, découpe, où perçage
4. 2. Informatique: un modèle de document,
pouvant contenir des images, du texte et
des éléments de formatage, qui est
souvent utilisé pour créer d'autres
d o c u m e n t s , p a r u n s i m p l e a j o u t
d'informations, afin de permettre à
l'utilisateur de gagner du temps
Modèle (template)
DRY
*
Don’t Repeat Yourself*
8. Importants aspects des modèles
Hautes performances sur mobile
Expressifs: Boucle, Condition, Propriétaire
?
9. Importants aspects des modèles
Hautes performances sur mobile
Expressifs: Boucle, Condition, Propriétaire
Composabilité
10. Importants aspects des modèles
Hautes performances sur mobile
Expressifs: Boucle, Condition, Propriétaire
Composabilité
Séparation des préoccupations
JSCSS HTML
11. Ap
Importants aspects des modèles
Hautes performances sur mobile
Expressifs: Boucle, Condition, Propriétaire
Composabilité
Séparation des préoccupations
Travail d’équipe efficace
12. Hautes performances sur mobile
Expressifs: Boucle, Condition, Propriétaire
Composabilité
Séparation des préoccupations
Travail d’équipe efficace
Modèles basés sur le texte
13. Les Modèles de Montage
Document HTML5 valides
Orienté Composants
Sérialisation d’objets, dépendances CommonJS
Séparation des préocupations JS/CSS
Travail d’équipe simplifié entres rôles JS/CSS
Penser le CSS pour la réutilisabilité
Hautes performances
CSSJSHTML
.reel
14. CSS
Penser le CSS pour la réutilisabilité
Ne pas utiliser l’attribut “id”
Attention, le CSS est global au niveau du document
Convention:
JSHTML
package-Component
package-Component-childElement
package-Component--variation
.digit-Progress
.digit-Progress-bar
.digit-Progress—-small
.reel
15. Composant
Controle un élement DOM
MVC - Model View Controller
Controles d’interface et structure d’Application
Peut avoir un modèle HTML
36. ON AIRTRAININGON AIR
Démonstration
Notre workstation transmet vos modifications
sur le project, en temps réel, par le cloud, aux
instances de votre application, sur tout
appareil connecté. Vous pouvez collaborer
avec d’autres personnes où qu’elles soient, et
voir l’effet de vos changements, en situation,
i n st a n t a n é m e n t , u n e fo n c t i o n n a l i té
exceptionnelle pour développer des
applications adaptables à toute taille d’écran.
37.
38. Document HTML5 valides
Orienté Composants
Séparation des préocupations JS/CSS
Utilise des standards disponibles partout
Travail d’équipe simplifié entres rôles JS/CSS
Productivité accélérée
Hautes performances
CSS
Les modèles de Montage
JSHTML
.reel
39. Rasez cette moustache guidon
Benoit Marchant
CEO & Founder
montagestudio.com
@montagejs
✉ benoit@montagestudio.com
Pour l’élégance des modèles
orienté composant de Montage
Shave that handlebar moustache