le futur de l'industrialisation du web: l'ingénierie dirigée par les modèles
TRANSCRIPT
Le futur de l’industrialisation du Web:
l’ingénierie dirigée par les modèles
[email protected] / Apéro Web Nancy 2014
Complexité
Diversité
Braille
QualitéUtilisabilité M
arketingPerformance
Design émotionnel
UX Sécu
rité
Robustesse
Design graphique
RéférencementMaintenabilité
Accessibilité
Réda
ction
nel
Industrialisation
Industrialisation du Web
Standards
Bonnes pratiques
Processus
Automatisation
Abstraction
Le futur !
2024
Ingénierie dirigée par les modèles
Modèles
Relations
Transformations
Ingénierie dirigée par les modèles
Modèles
Est représentée par
Conforme à
© Openstreetmap
Système étudié Modèle
Méta-modèle
CC Calmansi on Flickr
“La trahison des images” - René Magritte1948
Photo du tableau Tableau
représente
Une pipe
représente
“Tout est modèle”
2014
Ingénierie dirigée par les modèles
Modèles
Relations
Transformations
Ingénierie dirigée par les modèles
Relations
Transformations
JSON HTML5
ECMA 404 HTML5 W3C Spec
Conforme à Conforme à
Langage de transfo.
Transformation
Conforme à
Transformations
Accueil
AffichageProduit Panier
Page Accueil
Navigation Wireframes
Page Produit
Page Panier
Relations
Zoning Wireframes Prototype
MoodBoard Style Tiles MockupsStyle
Structure
Comportement
Modèle Transfo. Relation
Schéma de navigation
Inspiré de http://romy.tetue.net/990
Workflow de conception
Zoning Wireframes Prototype
MoodBoard Style Tiles MockupsStyle
Structure
Comportement Schéma de navigation
Design patterns
Modèle Transfo. Relation
Références Schéma de données
Style
Structure
Comportement
HTML
CSS
Images
JavaScript
Sitemap
Prototype
Mockups
Modèle Transfo. Relation
Génération de code
Schéma de navigation
Zoning
Style
Structure
Comportement Schéma de navigation
Modèle Transfo. Relation
User Stories Existant Amont
Ingénierie dirigée par les modèles
Modèles
Relations
Transformations
La prophétieDenis & Sloïm : « L’intégrateur va enfin devoir aller au-delà de la technique. […] Il aura rarement à produire du code : le cœur de son métier sera de choisir des solutions. »
Intégration web, Les bonnes pratiques, Corinne Schillinger, 2012, Eyrolles.http://openweb.eu.org/articles/integration-web-les-bonnes-pratiques
2012
Comment mettre en œuvre l’ingénierie dirigée par les modèles ?
2014
StandardisationUbiquitous Application Design Community Group
Model-Based User Interfaces Working Group
Interaction Flow Modeling Language
2014
Outils
http://www.eclipse.org/modeling/ 2014
Eclipse Modeling Project
Éditeurs
2014
Graphiques
Textuels
Éditeurs
2014
Moteurs de Transformations
2014
Modèle à Modèle
Modèle vers Code
Moteurs de Transformations
2014
En conclusion
Prenez de la hauteur !
Modélisez !
Vers des modèles productifs !
Les outils du futur,la recherche du présent
Merci !
http://InteractionEngineering.github.io
Démo
51
Scénario
Génération d’interfaces Web à partir de modèles
Interfaces simples, formulaires CRUD / Mobile
Générer des variantes
Instance : Interface de recherche d’infos sur les
acteurs d’un film donné
52
Processus
53
Modèlesd'entréeModèlesd'entrée
Modèlesd'entréeModèles
intermédiairesAppli Web
Archi de l’appli en sortie
54
BDD graph
HTML, CSS, JS
Neo4jJqueryMobile
http://localhost:7474
Ajax
Processus
55
1.Domaine
2.StateChart
3.Configuration
4.Layout
Interface concrète
jQueryMobile Code
56
La suite dans Eclipse…