Rasez cette moustache guidon

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

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

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, aﬁn de permettre à
l'utilisateur de gagner du temps
Modèle (template)
DRY
*
Don’t Repeat Yourself*

Serveurs d’applications classiques
Navigateur Serveur
Modèles
Données
{%}
HTML
HTTP

Importants aspects des modèles
Hautes performances sur mobile60fps

Hautes performances sur mobile
Expressifs: Boucle, Condition, Propriétaire
?

Composabilité

Composabilité
Séparation des préoccupations
JSCSS HTML

Ap
Composabilité
Travail d’équipe efficace

Composabilité
Travail d’équipe efficace
Modèles basés sur le texte

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 simpliﬁé entres rôles JS/CSS
Penser le CSS pour la réutilisabilité
Hautes performances
CSSJSHTML
.reel

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

Composant
Controle un élement DOM
MVC - Model View Controller
Controles d’interface et structure d’Application
Peut avoir un modèle HTML

Composant Main
Charge les donnés d’un service REST
Délègue l’affichage aux sous-composants

Composant moviestrip
Composant categories
Composant details

moviestrip
categories
Les composants acceptent les données
via propriétés ou appel de méthodes
Main sélection
Movie Categories
Category sélectionnée

Main
Category sélectionnée
Movie Categories
sélection

Propagation des données
Composant moviestrip
Composant detail
movie
categoryContentController.selection.one()
data binding

<html>
...
<body>
<div data-montage-id="facade-flow" class="facade-flow">
<div data-montage-id="movieFlow" class="flow flow-fade-out">
<div data-montage-id="image" class="Image"></div>
</div>
<div class="film"></div>
<div data-montage-id="details"></div>
</div>
</body>
</html>
Main.reel/Main.html

</div>
</div>
Markup
Sérialisation d’objets
<script type="text/montage-serialization">
{
"owner": {
"properties": {
"element": {"#": "facade-flow"}
}
},
...

<div data-montage-id="flow" class="flow flow-fade-out">
</div>
</div>
<script type="text/montage-serialization">
{
"owner": {
"properties": {
"element": {"#": "facade-flow"}
}
},
...

</div>
</div>
Le composant Flow répète son modèle imbriqué
Vous pouvez répéter tout composant

<div data-montage-id="poster" class="Image"></div>
</div>
</div>
"poster": {
"prototype": “./image.reel",
"properties": {
"element": {"#": "poster"}
},
"bindings": {
"src": {
"<-": "'http://image.tmdb.org/t/p/w300' + @movieFlow:iteration.object.poster_path"
}
}
},

posters: {
detailed: { }},
"poster": {
"properties": {
},
"bindings": {
"src": {
}
}
},
[ ]

"poster": {
"properties": {
},
"bindings": {
"src": {
}
}
},
posters: {
detailed: { }},[ ]

</div>
</div>
"details": {
"prototype": "ui/details.reel",
"properties": {
"element": {"#": "details"}
},
"bindings": {
"movie": {"<-": "@moviestrip.categoryContentController.selection.one()" }
}
},

Composant detail
Title
Synopsis
Trailer Button
Rent Button
Release Date Runtime Audience Critics

detail
Title
Description
Date Runtime Audience
Critics
Trailer Button
Rent Button
movie.title
movie.date
actionEvent
actionEvent
movie.criticScore
movie.synopsis
movie.runtime
movie.audienceScore

ON AIRTRAININGON AIR
Démonstration
Notre workstation transmet vos modiﬁcations
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.

Document HTML5 valides
Orienté Composants
Séparation des préocupations JS/CSS
Utilise des standards disponibles partout
Travail d’équipe simpliﬁé entres rôles JS/CSS
Productivité accélérée
Hautes performances
CSS
Les modèles de Montage
JSHTML
.reel

Rasez cette moustache guidon

Recommandé

Recommandé

Contenu connexe

Similaire à Rasez cette moustache guidon

Similaire à Rasez cette moustache guidon (20)

Rasez cette moustache guidon