Javascript Framework MVC

Dimitri Larue - P2012

Petit rappel

Quand le chef tente d’éditer du code en production

Ou encore

Quand le commercial propose fièrement une solution

Rappel : Framework

Une boîte à outils

• éléments préfabriqués
• moins de code, moins d’erreurs
• meilleur productivité

Rappel : Framework

Une méthodologie

• “schéma de montage” pour applications
• approche structurée
• peut sembler contraignant
• mais garantie les bonnes pratiques, la sécurité, la maintenabilité et l’évolutivité.

Rappel : MVC

• Problème : organisation du code
• Solution séparation du code
  • Modèle pour le code lié aux données et la logique métier vis à vis de ces données
  • Contrôleur pour la gestion des requêtes
  • Vues pour l’affichage

Rappel : MVC

Les frameworks javascripts

Certains frameworks javascripts sont basés sur le pattern MVC, d'autres sur des variantes :

• MVVM (Model-View-ViewModel)
• MVP (Model-View-Presenter)
• MVW (Model-View-Whatever)

Angular.js

https://github.com/SideraX/H3P2017-G1

Angular.js

Avantages

• Developpement rapide !
• Manipulation du DOM automatique
• Magique
• Opinionated

Inconvenients

• Performance moyenne
• Trop magique
• Opinionated
• Certains concepts sont particulièrements complexes

Concepts clés

Controllers

• Liaison entre le modèle et la vue
• Logique de présentation et évènements
• Chaque controlleur possède un scope

Concepts clés

Directives

• Manipulation du DOM et affichage
• Chaque directive possède un scope

Concepts clés

Services

• Logique business
• Communication avec le serveur

Concepts clés

Scope

• Object javascript
• Représente le modèle de données
• Accessible dans les templates

Concepts clés

Template

• L'HTML
• Composé de directive
• Utilise un langage de Markup ---> {{ }} pour bind les données du scope aux DOM

Style Guide