Digital performance.

MEET-UP SQLI

ANGULAR 24/09/2015

+ Concepteur Multimédia chez SQLI depuis depuis 1 an grâce au premier Meet-up

+ Aime Drupal, Symfony, JavaScript, Node et Angular

+ Twitter : @ivelfan

+ Github : @ivelfan

+ Drupal.org : @ivelfan

+ #sallysaitout

ANGULAR FLAVIEN MOUTAWE

24/09/2015 2

+ « AngularJS est ce que le navigateur Web aurait du être s'il avait été conçu pour des applications Web . »

ANGULAR MISKO HEVERY, CREATEUR D’ANGULAR

24/09/2015 3

QU’EST-CE QUE C’EST ?

+ Un célèbre framework JavaScript propulsé par Google depuis 2012

+ Facile à apprendre même sans grande connaissance en JavaScript

+ Rapide à mettre en place dans une architecture Client / Server

+ Pratique pour créer des applications Web, des sites Web dynamiques et des applications mobiles hybrides

+ Utile pour séparer les couches techniques : › Template › Logique cliente › Logique serveur

+ Permet de mieux organiser son code et de faire des tests !!

ANGULAR

24/09/2015 4

+ MVW › MVC : Model View Controller › MVVM : Model View View Model

+ Template et Data Binding ($scope)

+ Directives

+ Injection de dépendances

+ SPA (Single Page Application) › Navigation coté client › Indépendant du « back-end »

+ Interaction avec un « back-end » via des requêtes Ajax ou des Web sockets

ANGULAR SUPER HEROIC JAVASCRIPT FRAMEWORK

24/09/2015 5

ANGULAR FACILE NON ?

24/09/2015 6

+ jQuery

+ Angular

+ Le conteneur principal : le Module

+ Contrôleur : Fonction JavaScript

+ Modèle : Objet standard JavaScript

+ Scope › Objet JavaScript permettant la liaison entre la

vue et le contrôleur › Partage des propriétés du scope avec les

scopes enfant

+ Vue : HTML, Directives et « Expression » Angular

ANGULAR MVC

24/09/2015 7

Module

Contrôleur

Scope

Modèle

Vue

ANGULAR MVC ET SCOPE

24/09/2015 8

+ Le partage des variables du scope parent vers le scope enfant est à sens unique.

+ Lorsque le modèle dans le scope enfant subit une modification, le modèle du scope parent n’est pas impacté (à moins d’utiliser la propriété $parent).

ANGULAR DANGER DU SCOPE

24/09/2015 9

ANGULAR TEMPLATE & DATA BINDING

24/09/2015 10

+ Template › Aucune manipulation explicite de DOM › Transformation du DOM par la mécanique

Angular › Extension de HTML via les directives

+ Data Binding Bidirectionnel › Littéralement « Donnée liée » › Liaison entre la vue et le « scope » du

Contrôleur › La vue et le contrôleur sont synchronisés

+ La mécanique d’Angular consiste à vérifier la valeur de chaque modèle du scope et de la comparer avec la valeur existante. Si elle est différente, il enclenche la modification du template.

ANGULAR PROBLEME DU DATA BINDING

24/09/2015 11

+ La communauté Angular recommande une utilisation maximum de 2000 ng-model dans une application !

+ Partitionner son code et les templates

+ Créer des composants réutilisables

+ Restriction : › E pour « Element » › A pour « Attribut »

» Ng-app » Ng-model » Ng-repeat » ….

› M pour « Comment »

ANGULAR DIRECTIVES

24/09/2015 12

+ Singleton qui fournit des tâches spécifiques à l'application (ex: $scope, $http)

+ Créer des services réutilisables à travers le module › Code réutilisable et modulaire › Maintenabilité du code › Tests localisés

ANGULAR INJECTION DE DÉPENDANCES

24/09/2015 13

+ Autrement appelé « Application web monopage » est une application web accessible via une page web unique qui permet de réduire le temps de chargement et améliorer l’expérience utilisateur (UX).

+ Angular nécessite une librairie supplémentaire afin de profiter de la navigation : ui-route ou angular-route

+ La navigation ne nécessite pas de rechargement de page. L’intégralité des routes est gérée et renseignée dans la configuration du module.

ANGULAR SINGLE PAGE APPLICATION / NAVIGATION

24/09/2015 14

ANGULAR 2 BUILD INCREDIBLE APPLICATIONS

24/09/2015 15

+ L’arrivée d’EcmaScript 6

+ L’arrivée d’ATScript : Hérité de TypeScript, un preprocesseur JavaScript

+ Une meilleure expérience développeur

+ Performances accrues › Des rendus de 3 à 5 fois plus rapides › Précompilation des templates et réutilisation › Vues mise en cache › Meilleur gestion de la mémoire

ANGULAR 2 DES AMÉLIORATIONS NOTABLES

24/09/2015 16

+ Component › Controller + View › Element on the screen

+ Directive Decorator › Ajout de comportement au

HTML (ex : ng-show)

+ Template Syntax › HTML as template (ex: ng-if,

ng-repeat)

ANGULAR 2 LA FIN DU CONCEPT « DIRECTIVE DEFINITION OBJECT »

24/09/2015 17

+ Liaison des propriétés

ANGULAR 2 TEMPLATE SYNTAX

24/09/2015 18

+ Liaison des évènements

ANGULAR LE COMPONENT

24/09/2015 19

ANGULAR LE COMPONENT

24/09/2015 20

ANGULAR LE COMPONENT

24/09/2015 21

NOUS RESPIRONS, PARLONS & VIVONS L’INNOVATION 24/7

LIKEZ & SUIVEZ-NOUS !

CONTACT SQLI Enterprise France

268 Avenue du Président Wilson 93210 Saint-Denis La Plaine Tel : +33 1 55 93 26 26

SQLI Enterprise Suisse Chemin de la Rueyre 116 - 1020 Renens, VD Tel : +41 (0)21 637 72 30

SQLI Enterprise Belgium Kortrijksesteenweg 90 - 9830 Sint-Martens-Latem Tel : +32 (0)9 329 83 80

24/09/2015 22

A propos de SQLI Enterprise : L’ESN du groupe SQLI est le partenaire de référence de la transformation digitale des entreprises : coopération métiers/IT, architectures du futur, expertises de pointe sur les technologies innovantes sont mises au service des usages collaboratifs et de la digitalisation des processus et services. SQLI Enterprise œuvre pour la création d’une véritable force de frappe digitale : mise en place d’usines d’industrialisation digitale de taille significative alliant qualité, innovation et flexibilité, conception de socles cross-canal évolutifs, conseil et solutions sur le big data, les technologies mobiles et les objets connectés.

Notre cabinet de conseil Alcyonix vous aide a résoudre une équation complexe : manager et optimiser la digitalisation ! Ses activités s’articulent autour du management de l’organisation (Amélioration de processus, gouvernance, méthodes Lean et Agile, innovation, conduite et changement et formations) et du système d’information (Alignement SI et métiers, assurance qualité, gouvernance et budgets IT, portfolio management et conseil IT). Ses 1200 passionnés sont répartis en France (Paris, Lyon, Toulouse, Bordeaux, Rouen, Nantes, Lille), en Suisse (Lausanne et Genève), en Belgique (Bruxelles), au Luxembourg, aux Pays-Bas et au Maroc (Rabat et Oujda).

+ Immeuble le Pressensé 268 Avenue du Président Wilson 93210 La Plaine Saint-Denis Tél: 01 55 93 26 00 / Fax: 01 55 93 26 01

+ www.sqli.com

+ Propriété intellectuelle Le présent document, propriété exclusive de SQLI, est protégé par les lois françaises et internationales de la propriété intellectuelle. Toute reproduction ou représentation intégrale ou partielle de ce document par quelque procédé et sur quelque support que ce soit est strictement interdite, sauf autorisation préalable, expresse et écrite de SQLI. A défaut d'autorisation, toute utilisation est constitutive du délit de contrefaçon. Tout contrevenant s'expose ainsi à des poursuites judiciaires civiles et/ou pénales. Seules sont tolérées, sans autorisation préalable, d'une part, les reproductions strictement réservées à l'usage privé du copiste et non destinées à une utilisation collective, et d'autre part, les courtes citations justifiées par le caractère scientifique ou d'information de l’œuvre dans laquelle elles sont incorporées (articles L.122-4, L.122-5 et L.335-2 du Code de la propriété intellectuelle).

GROUPE SQLI

24/09/2015 23

Digital that works

LIKEZ & SUIVEZ-NOUS !

WWW.SQLI-ENTERPRISE.COM