Post on 18-Aug-2015
Rasez cette moustache guidon
Benoit MarchantCEO & 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
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 util isé 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*
Serveurs d’applications classiques
Navigateur Serveur
Modèles
Données
{%}
HTML
HTTP
Importants aspects des modèles
Hautes performances sur mobile 60fps
Importants aspects des modèles
Hautes performances sur mobile
Expressifs: Boucle, Condition, Propriétaire ?
Importants aspects des modèles
Hautes performances sur mobile
Expressifs: Boucle, Condition, Propriétaire
Composabilité
Importants aspects des modèles
Hautes performances sur mobile
Expressifs: Boucle, Condition, Propriétaire
Composabilité
Séparation des préoccupations
JSCSS HTML
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
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
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
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
Structure des composants
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
Mainsé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 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>
Markup
Sérialisation d’objets<script type="text/montage-serialization"> { "owner": { "properties": { "element": {"#": "facade-flow"} } },
... "flow": {
<div data-montage-id="facade-flow" class="facade-flow"> <div data-montage-id="flow" 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>
<script type="text/montage-serialization"> { "owner": { "properties": { "element": {"#": "facade-flow"} } },
... "flow": {
<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>
Le composant Flow répète son modèle imbriqué Vous pouvez répéter tout composant
<div data-montage-id="facade-flow" class="facade-flow"> <div data-montage-id="flow" class="flow flow-fade-out"> <div data-montage-id="poster" class="Image"></div> </div> <div class="film"></div> <div data-montage-id="details"></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": { "prototype": “./image.reel", "properties": { "element": {"#": "poster"} }, "bindings": { "src": { "<-": "'http://image.tmdb.org/t/p/w300' + @movieFlow:iteration.object.poster_path" } } },
[ ]
"poster": { "prototype": “./image.reel", "properties": { "element": {"#": "poster"} }, "bindings": { "src": { "<-": "'http://image.tmdb.org/t/p/w300' + @movieFlow:iteration.object.poster_path" } } },
posters: { detailed: { }},[ ]
<div data-montage-id="facade-flow" class="facade-flow"> <div data-montage-id="flow" 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>
"details": { "prototype": "ui/details.reel", "properties": { "element": {"#": "details"} }, "bindings": { "movie": {"<-": "@moviestrip.categoryContentController.selection.one()" } } },
Composant detail
Composant detail
Title
Synopsis
Trailer Button
Rent Button
Release Date Runtime Audience Critics
detailTitle
Description
Date Runtime Audience
Critics
Trailer Button
Rent Button
movie.title
movie.date
actionEvent
actionEvent
movie.criticScore
movie.synopsis
movie.runtimemovie.audienceScore
ON AIRTRAININGON AIR
DémonstrationNotre 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 s t a n t a n é m e n t , u n e fo n c t i o n n a l i té except ionnel le 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 simplifié entres rôles JS/CSS
Productivité accélérée
Hautes performances
CSS
Les modèles de Montage
JSHTML
.reel
Rasez cette moustache guidon
Benoit MarchantCEO & Founder
montagestudio.com@montagejs
✉!
benoit@montagestudio.com
Pour l’élégance des modèles orienté composant de Montage
Shave that handlebar moustache