hello angularjs - back to the future

HELLO ANGULARJS

Mars 26, 2016

Meetup #1

The Moroccan AngularJS Developer Community

QUI SUIS JE ?

Ouadie LAHDIOUIConsultant IT

@ouadielahdioui

ouadie-lahdioui

AGENDA

3

Histoire de JavaScript AngularJS 1.x Coding dojo : Comment manger des spaghetti jQuery avec les baguettes

magiques Angular ? Bonnes pratiques

VOYAGE DANS LE TEMPSPour mieux connaitre l'histoire de JavaScriptAttachez vous ceintures....

4

Mai - Décembre 1995Création du Mocha / LiveScript / JavaScript

Par Brendan Erich dans 10 joursNovembre 1990Naissance du Web

1996Création du JScript

Par Microsoft

HISTOIRE DE JAVASCRIPTVoyage dans le temps ....

5

Juin 1997Sortie de la spécification

ECMAScript

HISTOIRE DE JAVASCRIPT

6

Février 2005AJAX

Par Jesse James Garrett

Août 2006Invention de jQuery

Par John Resig

Voyage dans le temps ....

Les développeurs commencaient à faire des belles choses :• Intégrer des composants graphiques• Tirer le max de l’asynchrone avec Ajax• Manipulation du DOM

HISTOIRE DE JAVASCRIPT

7

Février 2005AJAX

Par Jesse James Garrett

Août 2006Invention de jQuery

Par John Resig

Voyage dans le temps ....

Mais les belles choses ne durent pas longtemps

Les développeurs commencaient également à avoir :• Trop de codes non structurés, difficilement testables et no

réutilisables• Une dépendence avec les HTMLeurs• Des plates de spaghetti

Solution = Les Framworks

POURQUOI UN FRAMWORK JAVASCRIPT ?

Écrire du code JavaScript de qualité, testable et réutilisable Gagner en productivité Plusieurs acteurs sur le même projet Implémente les patterns pour exploiter les leçons tirées par d’autres

développeurs Documentation

8

HISTOIRE DE JAVASCRIPT

9

2012AngularJS 1.0

2014Annoncement du AngularJS

2.0

2015AngularJS 1.4

2015AngularJS 1.5

Voyage dans le temps ....

Octobre 2010BackbonJS

Par Jeremy Ashkenas

1.1 1.2 1.3

ANGULAR JS 1.x

10

POURQUOI ANGULARJS ?

Permet d’implémenter le pattern MVW pour structure le code, se qui améliore la qualité de code

Facilite la mise en place des tests unitaires et end-2-end Favorise la collaboration entre les développeurs et les intégrateurs HTML Meilleure expérience utilisateur avec les applications monopages Apporte aux applications web les services traditionnellement apportés côté

serveur : lnjection de dépendances MVC Data-binding bidirectionnel Routing Templating

11

Model-View-Whatever (whatever works for you)

Pattern MVW (a.k.a MV*)ANGULARJS 1.x

MVC MVVM

12

Systèmes de templating : String statique + données = text ajouté au DOM Tout changement sur une donnée nécessite un nouveau merge

Data-binding bi-directionnelANGULARJS 1.x

13

Un objet JavaScript Un domaine dans lequel des variables peuvent exister

Le scopeANGULARJS 1.x

14

Ce que voit l'utilisateur final Fichier HTML enrichi de certains attributs et balises propres à AngularJS

Les vues : TemplatesANGULARJS 1.x

15

Le langage d'expressions d'AngularJS est utilisé pour le binding Des expressions valides :

Les vues : ExpressionANGULARJS 1.x

16

Pou modifie l’affichage des données évaluées Syntaxe inspirée de linux : caractère pipe « | » Filtres pré-inclus : currency, date, json, lowercase, number, limitTo…

Les vues : FiltresANGULARJS 1.x

17

Création du filtre dans le module :

Créer vos propres filtresANGULARJS 1.x

L’application du filtrer sur le vue :

18

Une fonction JavaScript liée à la vue par la directive ng-controller

Les contrôleursANGULARJS 1.x

19

Pour encapsuler l’ensemble des éléments d’une application AngularJS Un module permet de déclarer : directives, contrôleurs, filtres, constantes

et services

Les modulesANGULARJS 1.x

1. Créer le module myApp

2. L’affectation d’un nom de module à la directive ngApp

20

Utiliser des objets sans se soucier de leur création

L’injection de dépendencesANGULARJS 1.x

L’injection des services automatiquement par leur nom :

21

Singletons nommés qui vont fournir une tâche précise Ils peuvent être ensuite injectés dans un contrôleur ou un autre

service Exemple de services natifs :

Les servicesANGULARJS 1.x

22

$location :

$http : Encapsule les appels HTTP via XMLHttpRequest ou JSONP

Création d’un service dans le module :

Créer vos propres servicesANGULARJS 1.x

L’injection du service dans un contrôlleur :

23

Une directive = Flag placé dans la vue Les navigateurs ne reconnaissent pas ces flags, c’est à angularjs de

les traiter Permet la création de composants réutilisables

Les directivesANGULARJS 1.x

24

Directives natives : ngHide, ngShow, ngIf, ngRepeat, ngClick ...

Création d’une directive dans le module :

Créer vos propres directivesANGULARJS 1.x

25

L’utilisation dans la vue :

Une application web accessible via une page web unique,

SPA : Single Page ApplicationANGULARJS 1.x

1. Définir les routes : 2. Définir l’endroit où se “rendra” la vue :

26

Coding dojo

Source de l’image : http://www.evolutiontkd.co.uk/

C’EST QUOI UN CODING DOJO ?

• Un entrainement de programmation sans pression ni stress, pour s’améliorer en s'amusant

• Les coding dojo sont nés d’un constat simple de Dave thomas et Laurent Bossavit :In software we do our practicing on the job, and that’s why we make mistakes on the job. We need to find ways of splitting the practice from the profession. We need practice sessions.

Si je veux apprendre le Judo, je vais m’inscrire au dojo du coin et y passer une heure par semaine pendant deux ans, au bout de quoi j’aurai peut-être envie de pratiquer plus assidûment. Si je veux apprendre la programmation objet, mon employeur va me trouver une formation de trois jours à Java dans le catalogue 2004. Cherchez l’erreur.

Dave thomasThe Pragmatic Programmer

LAURENT BOSSAVITPr de l'association eXtreme Programming France

28

C’EST QUOI UN RANDORI ?

Source de l’image : http://blog.valtech.fr/2008/03/25/coding-dojo-ruby/

Source de l’image : http://blog.aikidojournal.com

• Une technique que l’on retrouve dans divers arts martiaux• Il consiste en attaque d’une personne par plusieurs partenaires• L’objectif est d’implémenter une solution de façon collaborative

29

ON Y VA ?

30

KATA : Comment manger des spaghetti jQuery avec les baguettes magiques Angular

BONNES PRATIQUES

Avant d’utiliser une méthode fournie par jQuery, demandez vous toujours si AngularJS ne propose pas une solution

Pensez à utiliser le “One way data binding” pour améliorer les performances : {::name}}

Il faut toujours utiliser «  track by » dans les directive ngRepeat :

Ne pas oublier le principe “Single Responsability” au moment de création des services

32

NON RESPECT DES BONNES PRATIQUES

Un unique contrôleur pour toute l’application Code dupliqué dans les différents contrôleur Manipulation directe du DOM en dehors des directives Code complexe dans les expressions et non dans le contrôleur Je met un gros conteneur avec tout dedans et tout le monde y accède

33

BACK TO THE FUTURE OF JAVASCRIPT

34

Serveurs(nodeJS)

Drones(nodeJS)

JeuxRobots(nodeJS)

Mobile

MERCI POUR VOTRE ATTENTION

Questions ?