Hello AngularJS - Back to the future

1. HELLO ANGULARJS
Mars 26, 2016
Meetup #1
The Moroccan AngularJS Developer Community

2. QUI SUIS JE ?
Ouadie LAHDIOUI
Consultant IT
@ouadielahdioui
ouadie-lahdioui

3. AGENDA
3
 Histoire de JavaScript
 AngularJS 1.x
 Coding dojo : Comment manger des spaghetti jQuery avec les baguettes magiques Angular ?
 Bonnes pratiques

4. VOYAGE DANS LE TEMPS
Pour mieux connaitre l'histoire de JavaScript
Attachez vous ceintures....
4

5. Mai - Décembre 1995
Création du Mocha / LiveScript / JavaScript
Par Brendan Erich dans 10 jours
Novembre 1990
Naissance du Web
1996
Création du JScript
Par Microsoft
HISTOIRE DE JAVASCRIPT
Voyage dans le temps ....
5
Juin 1997
Sortie de la spécification
ECMAScript

6. HISTOIRE DE JAVASCRIPT
6
Février 2005
AJAX
Par Jesse James Garrett
Août 2006
Invention 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

7. HISTOIRE DE JAVASCRIPT
7
Février 2005
AJAX
Par Jesse James Garrett
Août 2006
Invention 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

8. 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

9. HISTOIRE DE JAVASCRIPT
9
2012
AngularJS 1.0
2014
Annoncement du AngularJS 2.0
2015
AngularJS 1.4
2015
AngularJS 1.5
Voyage dans le temps ....
Octobre 2010
BackbonJS
Par Jeremy Ashkenas
1.1 1.2 1.3

10. ANGULAR JS 1.x
10

11. 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

12.  Model-View-Whatever (whatever works for you)
Pattern MVW (a.k.a MV*)
ANGULARJS 1.x
MVC
MVVM
12

13.  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-directionnel
ANGULARJS 1.x
13

14.  Un objet JavaScript
 Un domaine dans lequel des variables peuvent exister
Le scope
ANGULARJS 1.x
14

15.  Ce que voit l'utilisateur final
 Fichier HTML enrichi de certains attributs et balises propres à AngularJS
Les vues : Templates
ANGULARJS 1.x
15

16.  Le langage d'expressions d'AngularJS est utilisé pour le binding
 Des expressions valides :
Les vues : Expression
ANGULARJS 1.x
16

17.  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 : Filtres
ANGULARJS 1.x
17

18.  Création du filtre dans le module :
Créer vos propres filtres
ANGULARJS 1.x
 L’application du filtrer sur le vue :
18

19.  Une fonction JavaScript liée à la vue par la directive ng-controller
Les contrôleurs
ANGULARJS 1.x
19

20.  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 modules
ANGULARJS 1.x
1. Créer le module myApp
2. L’affectation d’un nom de module à la directive ngApp
20

21.  Utiliser des objets sans se soucier de leur création
L’injection de dépendences
ANGULARJS 1.x
 L’injection des services automatiquement par leur nom :
21

22.  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 services
ANGULARJS 1.x
22
 $location :
 $http : Encapsule les appels HTTP via XMLHttpRequest ou JSONP

23.  Création d’un service dans le module :
Créer vos propres services
ANGULARJS 1.x
 L’injection du service dans un contrôlleur :
23

24.  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 directives
ANGULARJS 1.x
24
 Directives natives : ngHide, ngShow, ngIf, ngRepeat, ngClick ...

25.  Création d’une directive dans le module :
Créer vos propres directives
ANGULARJS 1.x
25
 L’utilisation dans la vue :

26.  Une application web accessible via une page web unique,
SPA : Single Page Application
ANGULARJS 1.x
1. Définir les routes : 2. Définir l’endroit où se “rendra” la vue :
26

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

28. 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 thomas
The Pragmatic Programmer
LAURENT BOSSAVIT
Pr de l'association eXtreme Programming France
28

29. 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

30. ON Y VA ?
30
KATA : Comment manger des spaghetti jQuery avec les baguettes magiques Angular

32. 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

33. 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

34. BACK TO THE FUTURE OF JAVASCRIPT
34
Serveurs
(nodeJS)
Drones
(nodeJS)
JeuxRobots
(nodeJS)
Mobile

35. MERCI POUR VOTRE ATTENTION
Questions ?