Rasez cette moustache guidon

286 vues

Publié le

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

Publié dans : Logiciels
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
286
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
3
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Rasez cette moustache guidon

  1. 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. 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. 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. 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*
  5. 5. Serveurs d’applications classiques Navigateur Serveur Modèles Données {%} HTML HTTP
  6. 6. Importants aspects des modèles Hautes performances sur mobile60fps
  7. 7. Importants aspects des modèles Hautes performances sur mobile Expressifs: Boucle, Condition, Propriétaire ?
  8. 8. Importants aspects des modèles Hautes performances sur mobile Expressifs: Boucle, Condition, Propriétaire Composabilité
  9. 9. Importants aspects des modèles Hautes performances sur mobile Expressifs: Boucle, Condition, Propriétaire Composabilité Séparation des préoccupations JSCSS HTML
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. Composant Controle un élement DOM MVC - Model View Controller Controles d’interface et structure d’Application Peut avoir un modèle HTML
  15. 15. Structure des composants
  16. 16. Composant Main Charge les donnés d’un service REST Délègue l’affichage aux sous-composants
  17. 17. Composant moviestrip Composant categories Composant details
  18. 18. 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
  19. 19. Main Category sélectionnée Movie Categories sélection
  20. 20. Propagation des données Composant moviestrip Composant detail movie categoryContentController.selection.one() data binding
  21. 21. <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
  22. 22. <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"} } }, ...
  23. 23. <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"} } }, ...
  24. 24. <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
  25. 25. <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" } } },
  26. 26. posters: { detailed: { }}, "poster": { "prototype": “./image.reel", "properties": { "element": {"#": "poster"} }, "bindings": { "src": { "<-": "'http://image.tmdb.org/t/p/w300' + @movieFlow:iteration.object.poster_path" } } }, [ ]
  27. 27. "poster": { "prototype": “./image.reel", "properties": { "element": {"#": "poster"} }, "bindings": { "src": { "<-": "'http://image.tmdb.org/t/p/w300' + @movieFlow:iteration.object.poster_path" } } }, posters: { detailed: { }},[ ]
  28. 28. <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()" } } },
  29. 29. Composant detail
  30. 30. Composant detail Title Synopsis Trailer Button Rent Button Release Date Runtime Audience Critics
  31. 31. 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
  32. 32. 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.
  33. 33. 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
  34. 34. 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

×