jQuery vs AngularJS

1. jQuery VS AngularJS
By Chibani Safwen
1

2. jQuery(1/2)
C’est une bibliothèque JavaScript libre et multi-plateforme
basée sur des sélecteurs CSS ,créée pour faciliter l'écriture
de scripts côté client dans le code HTML des pages web.
jQuery permet de :
 faire du JavaScript non-intrusif.
 Traverser et manipuler très facilement l'arbre DOM des
pages web:remplacement,insertion,suppression d'un
élément DOM.
 Changer/ajouter une classe CSS.
 Créer des animations: il intègre une série complète d’effets
graphiques qui permettent d’animer une page html très
facilement.
2

3. 3
jQuery(2/2)
 Gérer les événements JavaScript: il permet de
créer des déclencheurs d'événements à des
éléments de la page, sans se soucier des
problèmes de compatibilité des navigateurs.
 Faire des requêtes AJAX simplement.

4. 4
AngularJS(1/2)
 C’est un Framework JavaScript pour des SPA (Single Page
Application) développé par Google.
 Il suit le patron de conception logicielle(Model View Controller) .
 Il adapte et étend le HTML traditionnel pour servir le contenu
dynamique: propose de créer des nouvelles balises réutilisable au
HTML ce qui s'apparente au principe des WebComponents.
 Il utilise un système de dirty checking: Il sert à surveiller et de
détecter toutes modifications sur un objet JavaScript standard ce
qui permet de synchroniser les valeurs entre le modèle et la vue
automatiquement.
 Il utilise l’injection de dépendance.

5. 5
AngularJS(2/2)
Principe de Data Binding:
Un contrôleur manipule le modèle de
donnée envoyé
par un service et transmet ces données à la
vue en
utilisant un scope.
Lorsque la donnée enregistrée dans le
scope change
à l'intérieur du contrôleur, la vue est
automatiquement
mise à jour.
Cela marche également dans l'autre sens
:lorsque la vue change, les changements

6. 6
jQuery ou AngularJS ? (1/4)
Ressemblances:
 Les deux sont écrites en JavaScript.
 Ils serrent à réaliser des applications web monopage.
 Pour les utiliser il suffit de spécifier leurs paths dans la balise
<script>.

7. 7
jQuery ou AngularJS ? (2/4)
Différences:
 jQuery est une librairie, cela signifie que le code décide d’appeler
une fonction dans cette librairie pour produire le résultat
attendu.
 AngularJS est un framework MVC structurant qui impose sa
philosophie, on implémente des callbacks et le framework nous
appelle lorsqu’il l’a décidé.
 jQuery se base sur la programmation impérative : on ordonne à
la machine ce qui doit se passer, étape par étape.
 AngularsJS se base sur La programmation déclarative : on
demande à la machine ce qu’on souhaite obtenir mais on ne
décrit pas nécessairement comment l’obtenir (on déclare
simplement le résultat attendu mais pas toutes les étapes).

8. 8
jQuery ou AngularJS ? (3/4)
Avantages Inconvénient
jQuery
Cross browser Obligation de connaitre les bases de JavaScript,
notamment la partie “objet” du langage.
un support excellent pour AJAX
Léger et
facile à utiliser
XML est délicat à parser en Javascript/jQuery
Simplifie et unifie la syntaxe d’accès au DOM
extensible grâce aux plugins
Documentation complète et communautés actives
AngularJS
Le code est facile à maintenir,à decomposer en modules ce qui
améliore la testabilité du code
une courbe d’apprentissage plus ardue que
celle de jQuery
Facilite la collaboration avec d’autres développeurs Absence de gestion du DOM
Rapidité de développement l'optimisation SEO est loin d'être évidente
il réduit le risque de bugs Aucun composant graphique

9. 9
jQuery ou AngularJS ? (4/4)
Conclusion
 jQuery est la bonne solution pour les applications web qui nécessite
beaucoup des appels Ajax ou des animations.
 AngularJS devient indispensable pour les grands projets dont la partie
front end est importante.
le facteur le plus décisif est le but et la caractère du projet à
réaliser.

10. 10
Mots clés
 AJAX: Asynchronous JavaScript and XML. C’est système pour envoyer et
reservoir des données d’après un serveur sans besoin d’actualiser la page.
 DOM
“Le Document Object Model (DOM) est une convention cross-platform et
indépendante du langage pour représenter and interagir avec des objets dans
des documents en HTML, XHTML ou XML.