Rasez cette moustache guidon

39
Rasez cette moustache guidon Benoit Marchant CEO & Founder montagestudio.com @montagejs [email protected] Pour l’élégance des modèles orienté composant de Montage Shave that handlebar moustache

Transcript of Rasez cette moustache guidon

Page 1: Rasez cette moustache guidon

Rasez cette moustache guidon

Benoit MarchantCEO & Founder

montagestudio.com@montagejs

✉!

[email protected]

Pour l’élégance des modèles orienté composant de Montage

Shave that handlebar moustache

Page 2: Rasez cette moustache guidon

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

Page 3: Rasez cette moustache guidon

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

Page 4: Rasez cette moustache guidon

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*

Page 5: Rasez cette moustache guidon

Serveurs d’applications classiques

Navigateur Serveur

Modèles

Données

{%}

HTML

HTTP

Page 6: Rasez cette moustache guidon
Page 7: Rasez cette moustache guidon

Importants aspects des modèles

Hautes performances sur mobile 60fps

Page 8: Rasez cette moustache guidon

Importants aspects des modèles

Hautes performances sur mobile

Expressifs: Boucle, Condition, Propriétaire ?

Page 9: Rasez cette moustache guidon

Importants aspects des modèles

Hautes performances sur mobile

Expressifs: Boucle, Condition, Propriétaire

Composabilité

Page 10: Rasez cette moustache guidon

Importants aspects des modèles

Hautes performances sur mobile

Expressifs: Boucle, Condition, Propriétaire

Composabilité

Séparation des préoccupations

JSCSS HTML

Page 11: Rasez cette moustache guidon

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

Page 12: Rasez cette moustache guidon

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

Page 13: Rasez cette moustache guidon

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

Page 14: Rasez cette moustache guidon

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

Page 15: Rasez cette moustache guidon

Composant

Controle un élement DOM

MVC - Model View Controller

Controles d’interface et structure d’Application

Peut avoir un modèle HTML

Page 16: Rasez cette moustache guidon

Structure des composants

Page 17: Rasez cette moustache guidon

Composant Main Charge les donnés d’un service REST

Délègue l’affichage aux sous-composants

Page 18: Rasez cette moustache guidon

Composant moviestrip

Composant categories

Composant details

Page 19: Rasez cette moustache guidon

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

Page 20: Rasez cette moustache guidon

Main

Category sélectionnée

Movie Categories

sélection

Page 21: Rasez cette moustache guidon

Propagation des données

Composant moviestrip

Composant detail

movie

categoryContentController.selection.one()

data binding

Page 22: Rasez cette moustache guidon

<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

Page 23: Rasez cette moustache guidon

<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": {

Page 24: Rasez cette moustache guidon

<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": {

Page 25: Rasez cette moustache guidon
Page 26: Rasez cette moustache guidon
Page 27: Rasez cette moustache guidon
Page 28: Rasez cette moustache guidon

<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

Page 29: Rasez cette moustache guidon

<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" } } },

Page 30: Rasez cette moustache guidon

posters: { detailed: { }},

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

[ ]

Page 31: Rasez cette moustache guidon

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

posters: { detailed: { }},[ ]

Page 32: Rasez cette moustache guidon

<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()" } } },

Page 33: Rasez cette moustache guidon

Composant detail

Page 34: Rasez cette moustache guidon

Composant detail

Title

Synopsis

Trailer Button

Rent Button

Release Date Runtime Audience Critics

Page 35: Rasez cette moustache guidon

detailTitle

Description

Date Runtime Audience

Critics

Trailer Button

Rent Button

movie.title

movie.date

actionEvent

actionEvent

movie.criticScore

movie.synopsis

movie.runtimemovie.audienceScore

Page 36: Rasez cette moustache guidon

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.

Page 37: Rasez cette moustache guidon
Page 38: Rasez cette moustache guidon

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

Page 39: Rasez cette moustache guidon

Rasez cette moustache guidon

Benoit MarchantCEO & Founder

montagestudio.com@montagejs

✉!

[email protected]

Pour l’élégance des modèles orienté composant de Montage

Shave that handlebar moustache