le futur de l'industrialisation du web: l'ingénierie dirigée par les modèles

Le futur de l’industrialisation du Web:

l’ingénierie dirigée par les modèles

alain.vagner@tudor.lu / 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…