Programmation Web Avancée
Cours 7
[email protected]
Plan
1 Généralité et rappels sur le Web/ Javascript : survol du langage ✓
2 Expressions régulières/Evènements/DOM ✓
3 Tableaux/JSON/AJAX/Asynchronisme ✓
4 Nodejs ✓
5 Git & npm
5.1 Git
5.2 npm
Rappels : DAG
Directed Acyclic Graph : graphe orienté acyclique.
dag
3 / 38
git
git est un système de contrôle de version distribué (DVCS) :
◆ suivre un ensemble de �chiers (ou projet)
◆ suivre les modi�cations faites à ces �chiers
◆ savoir qui a modi�é quoi et quand et pourquoi
◆ tout le monde possède tout l'historique (pas de notion de dépôt central ou serveur)
Utilité :
◆ Pouvoir revenir en arrière dans l'historique d'un projet
◆ Pouvoir partager ses modi�cations avec d'autre personnes
◆ Importer les modi�cations de quelqu'un et gérer les con�its (modi�cations
incompatibles)
◆ Travailler de manière asynchrone possiblement sans réseau
4 / 38
Historique
◆ pré-2005 : Le noyau Linux utilise l'outil propriétaire BitKeeper pour gérer les sources
du noyau (+22000 �chiers, 12 million de lignes à l'époque)
◆ Plusieurs développeurs refusent d'utiliser un outil non libre
◆ 2005 Linus Torvalds décide d'écrire son propre système de contrôle de version avec
les critères suivants :
◆ Décentralisé/Distribué : pas de concept de dépôt central, possibilité de travailler
localement sur sa machine
◆ E�cace
◆ Robuste (protection contre la corruption de �chier, …)
git est crée en 15 jours. L'architecture interne a peu changé, par contre l'interface
utilisateur a évolué.
5 / 38
git par l'exemple
◆ On va explorer au fur et à mesure les di�érents concepts de git
◆ On va aussi voire toutes les commandes liées à ces concepts et leur utilisation
D'autres références :
◆ https://www.youtube.com/watch?v=4XpnKHJAok8 talk de Torvalds sur git en 2007
◆ https://git-scm.com/ : le site de git, avec sa documentation
◆ https://github.com, https://bitbucket.org/, https://about.gitlab.com : des hébergeurs
de code basés sur git (propriétaires)
◆ https://gitlab.u-psud.fr : un hebergement proposé par Paris-Sud (login Adonis)
6 / 38
Dépôt git (ou projet)
Un dépôt est une collection de �chiers se trouvant dans un répertoire et dont les
modi�cations sont suivies par git
$ mkdir my-project
$ cd my-project
$ git init
Initialized empty Git repository in …∕my-project∕.git∕
$ ls -a
. .. .git∕
Tout les �chier que l'on veut suivre doivent être dans ce répertoire, ou un sous
répertoire
La commande git status permet de connaître l'état du dépôt
7 / 38
commit (1)
Un commit est un instané de tous les �chiers du dépôt et de leur contenu à un instant
donné, plus des méta-données (date, nom de la personne qui a crée le commit, …). Les
commits sont crées en deux temps :
1. ajout des �chiers modi�és que l'on souhaite au prochain commit
2. validation du commit
$ emacs README.md #ou n'importe quel autre éditeur de texte
$ git add README.md
$ git status
…
Changes to be committed:
(use "git rm --cached <file>..." to unstage)
new file: README.md
$ git commit #lance l'éditeur par défaut
[master (root-commit) 71dda77] Ajout du premier fichier.
1 file changed, 1 insertion(+)
create mode 100644 README.md
8 / 38
commit (2)
git ne possède pas de commande spéciale pour ajouter un �chier au dépôt. Ajouter un
�chier, ou modi�er un �chier existant se font de la même manière
git ne peut stocker que des �chiers et leur chemin. En particulier, on peut pas
ajouter un répertoire vide dans un dépôt git.
Un commit est identi�é de manière unique par son hash (somme de contrôle).
git utilise l'algorithme SHA-1 : les hash font 160 bits (20 octets ou 40 chi�res
hexadécimaux).
La commande git show abcde… permet de montrer l'objet git (commit mais aussi
d'autres) dont le hash est donné. On n'est pas obligé de donner les 40 caractères, un
pre�xe su�t.
9 / 38
Historique (1)
git garde un historique des modi�cations faites à un dépôt.
Chaque commit pointe vers son parent et le hash du parent est pris en compte dans le
calcul du hash du commit.
⇒ Impossible de falsi�er un « commit » dans l'historique
$ emacs README.md
$ emacs test.js
$ git add test.js README.md
$ git commit
[master 30d4a5d] Ajout du fichier principal.
2 files changed, 2 insertions(+), 1 deletion(-)
create mode 100644 test.js
$ git log #affiche les commits
10 / 38
Historique (2)
Un commit git n'est pas un diff d'une version du �chier à l'autre. C'est l'ensemble des
�chiers tels qu'ils étaient à un moment donné.
git stocke ces « images instantanées » de manière compacte.
11 / 38
Historique (3)
L'ensemble des commit d'un projet git forme un DAG :
◆ Il y a un commit initial
◆ Chaque commit pointe vers son (ou ses) parent(s)
◆ Un chemin entre un commit et le commit initial est appelé une branche (branch)
$ emacs test.js
$ git add test.js
$ git commit
12 / 38
Branches (1)
Sauf cas particulier, on est toujours sur une branche, i.e. sur un chemin nommé entre le
commit courant et le commit initial
La branche principale, crée par défaut se nomme master
$ git branch
* master
Il est possible d'avoir plusieurs branches (pour faire des essais, corriger des bugs, …)
sans toucher à la branche principale.
La commande git branch foo crée une nouvelle branche appelée foo à partir du
commit courant.
$ git branch fibonacci
$ git branch
fibonacci
* master
13 / 38
Branches (2)
Chaque branche se souvient de son dernier commit
On peut changer de branche avec git checkout ma_branche
$ git checkout fibonacci
Switched to branch 'fibonacci'
$ emacs test.js
$ git add test.js
$ git commit
$ emacs README.md
$ git add README.md
$ git commit
14 / 38
Branches (3)
Deux branches sont complètement indépendantes et peuvent évoluer en parallèle:
$ git checkout master
Switched to branch 'master'
$ emacs README.md
$ git add README.md
$ git commit
15 / 38
merges
Une opération de merge (fusion) consiste à importer les modi�cations d'une branche
dans une autre. Pour cela :
1. On se place dans la branche de destination (avec git checkout ma_branche)
2. On e�ectue git merge branche_source
$ git checkout master
Switched to branch 'master'
$ git merge fibonacci
Auto-merging README.md
CONFLICT (content): Merge conflict in README.md
Automatic merge failed; fix conflicts and then commit the result.
git essaye de fusionner les deux branches automatiquement. La plupart du temps il y
arrive. Si un même �chier est modi�é de deux manière di�érentes, il y a un con�it.
16 / 38
Con�its
Un con�it dans un �chier est simplement matérialisé par une section :
<<<<<<< HEAD
du texte
=======
une autre version
>>>>>>> branche_source
La portion du haut est le texte de la branche cible (sur laquelle on est) et celui du bas
celui de la branche source.
Il faut retirer toutes les sections qui ont cette forme (en choisissant l'une ou l'autre des
versions, ou encore une troisème), puis commiter.
$ emacs README.md #on règle le conflit
$ git add README.md
$ git commit
[master e01a960] Merge branch 'fibonacci'
17 / 38
Dépôt distant (1)
Pour récupérer un projet git déjà existant, on utilise la commande git clone :
$ git clone https:∕∕gitlri.lri.fr∕kim.nguyen∕js
De telles URL sont appelées « remote »
L'URL source initiale est appelée origin.
Pour synchroniser le projet local avec un remote on utilise git pull et git push.
git pull [nom-de-remote-ou-url] : récupère l'état de la même branche dans la
repository distante et la merge dans la branche courante
git push [nom-de-remote-ou-url] : merge la branche courante dans la branche de
même nom de la repository distante
18 / 38
Dépôt distant (2)
En réalité, un dépôt git (local) possède :
◆ toutes les branches dé�nie localement
◆ Une branche pour chaque branche de chaque remote
$ git branch -a
* master
remotes∕origin∕HEAD -> origin∕master
remotes∕origin∕fibonacci
remotes∕origin∕master
La commande git pull est en fait un alias pour :
1. git fetch : synchronize la branche mirroir locale de chaque remote
2. git merge de la branche mirroir locale dans la branche locale
19 / 38
Dépôt distant (3)
En fonction de l'état des dépôt distants, les commandes git pull ou git push peuvent
créer des con�its :
◆ git pull : c'est un simple con�it de merge. On le résout en retirant les <<…==…>> dans
les �chiers concernés et on commit
◆ git push : le con�it serait stocké « coté remote », la commande échoue. Il faut donc
faire un git pull (qui va merger le nouveau remote, on peut alors régler les con�its
localement) puis git push.
20 / 38
Plein d'autres outils …
git log : a�che l'historique
git log --graph : a�che l'historique avec le graphe de commits
git diff : A�che la di�érence entre deux commits donnés
git bisect : Permet de trouver une régression introduite par un commit
21 / 38
Fichier à ne pas mettre sous git
Certains �chiers peuvent être présents mais ne doivent pas être versionnés :
◆ Les �chiers générés : .o, .class, …
◆ Les �chiers contenant des informations con�dentielles (mots de passe, …)
On peut créer dans tous lse sous-répertoire du dépôt (et aussi à la racine) un �chier
.gitignore qui contient les �chiers à ignorer. Git ne se plaindra pas de leur existance et
interdira de les commiter par erreur.
22 / 38
github et compagnie ?
Il existe de nombreux services autour de git. Ils ne sont pas nécessaire à l'utilisation de
git pour un projet, mais o�re des avantages :
◆ Site web pour le projet
◆ Système de gestion de bugs (bugtracker)
◆ Système d'intégration continue (les tests sont rejoués après chaque git push, si un
test échoue, le push est refusé
◆ Génération d'archives zip à partir du dépôt
On fera cepdant garde, les remarques usuelles sur la souveraineté des données
s'appliquent.
23 / 38
Plan
1 Généralité et rappels sur le Web/ Javascript : survol du langage ✓
2 Expressions régulières/Evènements/DOM ✓
3 Tableaux/JSON/AJAX/Asynchronisme ✓
4 Nodejs ✓
5 Git & npm
5.1 Git ✓
5.2 npm
Gestion des dépendences
On a un programme p qui a besoin d'une bibliothèque l pour s'exécuter (liaison
dynamique). Comment est-ce géré par les di�érents systèmes ?
Linux (la plupart des distributions) : Un système de packages avec de
dépendences. Installer p via le système de package force l'installation de l
Windows : L'installeur du programme installe l.dll dans un répertoire système.
OS X : Une « application » OS X est en fait un répertoire contenant les ressources et
toutes les dépendences nécessaires au programme.
Quels sont les avantages et inconvénients ?
25 / 38
Gestion des dépendences Linux
Avantages
◆ Une seule version de la bibliothèque (faible encombrement en espace)
◆ Mise à jour simple (sécurité)
Inconvénients
◆ Nécessite des gens pour maintenir les paquets
◆ Obligation de passer par le système de packages, plusieurs systèmes de packages
di�érents pour les distributions (fragmentation)
26 / 38
Gestion des dépendences OS X
Avantages
◆ Installation ou désinstallation facile
◆ Facilité de distribution
Inconvénients
◆ Espace disque et mémoire
◆ Mise à jour de sécurité di�cile
27 / 38
Gestion des dépendences Windows
Avantages
Inconvénients
◆ Desinstallation compliquée
◆ Espace disque et mémoire
◆ Mise à jour de sécurité di�cile
DX_D9.DLL is missing…
28 / 38
Bibliothèques nodejs
nodejs est multi-plateforme. Comment installer des bibliothèques Javascript et les
utiliser ?
29 / 38
npm
Node Package Manager est un programme qui permet :
◆ De créer un projet nodejs
◆ D'instaler les dépendences nécessaires au développement et à l'exécution
◆ De sauver la liste des dépendences et leur versions
◆ De publier un projet sur un entrepot global (npmjs.org)
◆ De préparer une archive .tar.gz du programme
30 / 38
npm init
La commande npm init initialise le répertoire courant comme un projet nodejs. Elle pose
diverse questions, le résultat est sauvé dans package.json.
31 / 38
npm install
On peut installer un paquet au moyen de la commande npm install le-paquet.
$ npm install colors #permet d'écrire en couleur dans la console
Dans le �chier Javascript
const colors = require ('colors∕safe');
console.log(colors.rainbow("Hello, world!"));
La dépendence a été enregistrée dans package.json. On peut passer des options à npm
install
-G : (global) installe dans le répertoire système et non pas dans le répertoire
.∕node_module (nécessite les droits administrateurs).
--save-dev : le paquet installé est une dépendence de développement, pas d'exécution
(l'utilisateur �nal n'en a pas besoin)
32 / 38
npm et git
Le répertoire node_modules∕ doit être ajouté au �chier .gitignore, son contenu ne doit
pas être ajouté au dépôt.
Lorsque quelqu'un git clone un projet npm il n'a pas les dépendences. Il faut faire npm
install dans le dépôt cloné pour les télécharger (à partir de .json)
33 / 38
Problèmes de npm
◆ Prolifération de paquets similaires (mais pas identiques).
◆ Prolifération de paquets de quelques lignes contenant une fonction
◆ Liste de dépendences indirectes très longues
34 / 38
Problèmes de npm
$ npm install ascii-art
$ du -sh node_modules
15M node_modules∕
$ ls -d node_modules∕* | wc -l
117
Dans le �chier Javascript
const aa = require ('ascii-art');
aa.font("Hello, world!", "Doom", (result) => {
console.log(result);
});
35 / 38
npm : horror story (1)
1. Un programmeur open-source publie un paquet npm nommé kik
2. L'entreprise kik.com (logiciel de messagerie) demande au programmeur de
renommer le paquet (copyright)
3. Le programmeur refuse
4. npmjs.org donne raison à l'entreprise
5. En protestation, le programmeur supprime ses paquets dont left-pad, un paquet
contenant une unique fonction de 11 lignes qui rajoute des blancs devant une chaîne.
6. L'Internet se casse pendant plusieurs heures
36 / 38
npm : horror story (2)
1. Un programmeur open-source publie un paquet npm nommé event-stream
2. Après plusieurs mois sans release, un autre programmeur contacte l'auteur pour
proposer d'assurer la maintenance, l'auteur accepte
3. Le nouveau mainteneur rajoute discrètement du code pour voler des bitcoins
lorsqu'une page qui charge event-stream se connecte à un porte monnaie virtuel.
37 / 38
npm : bilan
Avantages
◆ Gestion aisée des dépendences et du packaging
Inconvénients
◆ Attention au dépendences transitives
◆ Attention à la taille de la base de con�ance
Éviter absolument d'importer des packages comme is-number
privilégier les paquets avec peu ou pas de dépendences.
Auditer un minimum les paquets importés
38 / 38
