Université de la Manouba
Ecole Nationale des Sciences
de l’Informatique
II3 Filière ILSI
Ingénierie des Logiciels et
Systèmes d’Information
Frameworks de développement
web
Amine MILED
Ali TURKI
Nesrine BEN YAHIA
AU : 2017/2018
Objectifs du module
Ce cours vise à sensibiliser les étudiants aux technologies
récentes de développement web
Historique du développement web
Les tendances du développement web
Il vise aussi à introduire et présenter les frameworks de
développement les plus connus et les plus utilisés sur le
marché.
Au terme de ce cours, les étudiants seront en mesure de
PRATIQUER certains frameworks de développement web en
réalisant un mini-projet.
2
Plan du module
Session 1 : Historique du web et tendances technologiques
Session 2 : Développement web en Java avec Spring - 1
Session 3 : Développement web en Java avec Spring - 2
Session 4 : Développement web en Java avec Spring - 3
Session 5 : Introduction à AngularJS
Session 6 : Développement d’une application front-end avec
AngularJS
Session 7 : Introduction au framework Symfony
Session 8 : Mini-projet de développement web - 1
Session 9 : Mini-projet de développement web - 2
Session 10 : Mini-projet de développement web - 3
3
Continuité …
Module : « Frameworks de développement Web »
30h
Produit : application web
Back-end : Spring
Front-end : Angular
Module : « Projet Architecture Logicielle »
15h
Produit : application web
Back-end : Symfony
Front-end : Angular (Reuse)
4
Université de la Manouba
Ecole Nationale des Sciences
de l’Informatique
II3 Filière ILSI
Ingénierie des Logiciels et
Systèmes d’Information
Session 1 : Historique du web et
tendances technologiques
Amine MILED
Ali TURKI
Nesrine BEN YAHIA
AU : 2017/2018
Contenu de la session 1
Historique du web
Tendances du développement web
Frameworks web
Définition du Framework de développement
Framework Vs Bibliothèque
Publicité
Les avantages
Les inconvénients
Exemples de Frameworks
Principaux concepts technologiques
6
1. Historique du web
Histoire du web
Un système mondial de réseaux connectés
Un réseau est une inteconnection d’ensemble d’ordinateurs
Dans sa première version, le réseau ne permettait que le
partage de documents textes (une seule police, une seule
taille, une seule couleur)
Tim Berners-Lee, Chercheur au sein du CERN, invente les
hyper-liens (HyperLinks) Naissance du WWW (World
Wide Web)
Il devient facile de naviguer le web. Un clic de souris suffit
7
1. Historique du web
Histoire du web
Internet ne connait un succès qu’en 1994 avec la création du
W3C (World Wide Web Consortium) et la fondation de la
compagne NetScape
La première version de PHP est rendue publique en 1994
Le premier site de e-commerce Amazon.com voit le jour en
1995
Première version du langage Java en 1995
Le CSS (Cascading Style Sheets) est introduit en 1996
Google.com est fondée en 1998
8
1. Historique du web
Histoire du web
les utilisateurs peuvent
La fin des années 1990 et le début des années 2000 connait
une croissance considérable dans le monde du web
De plus en plus,
contenu du web. On parle alors du web 2.0
Les sites comme YouTube, Facebook, MySpace, .. voient le
jour
En 2006, Amazon.com lance le service Elastic Compute
Cloud (Service d’hébergement On-Demand).
contribuer au
9
1. Historique du web
Histoire du web
radicalement
En 2007, avec l’introduction de l’iPhone,
intélligents changent
utilisateurs accèdent à Internet.
le W3C essaye de
Vu les limitations du format HTML,
standardiser le format d’échange des informations sur le web
(Norme RDF) On parle alors du web 3.0 ou Web
Sémantique.
les téléphones
les
la manière dont
10
2. Technologies du web
Historiquement, les pages web était écrites en HTML, ce qui permet de
structurer en arborescence les éléments d’une page web
Le CSS a permis d’ajouter une couche de style pour les éléments
graphiques dans la structure HTML
Avec l’avènement des langages de script (Python, Ruby, PHP, TCL, ...), il
était plus facile de générer du contenu dynamiquement. Les pages HTML
n’était plus figées
NetScape (à travers Javascript) a permis de rendre les applications web
plus riches (Une meilleure User Experience - UX)
Face aux défis techniques du développement web, il était primordial de
passer par des composant logiciels réutilisables Il y a eu naissance des
frameworks web
11
2. Tendances du web
De plus en plus on tend vers le déploiement des applications sur des
Publicité
infrastructures dites PAAS, ce qui permet de faire de l’auto-scaling et du
load-balancing afin de mieux répondre à la charge sur les serveurs
Vu la complexité des applications web récentes, on a souvent recours à
des architectures à micro-services déployées, éventuellement, sur
plusieurs serveurs. L’utilisation d’un framework de développement
devient une néssecité
Les utilisateurs plus exigeants en termes de UX et l’augmentation
considérable de la puissance de calcul des terminaux (ordinateurs,
téléphones, ...) ont poussé vers le développement de nouvelles
technologies frontend. D’où la naissance de frameworks en Javascript.
On peut désormais créer des applications complexes avec une
logique métier qui leur sont propres au niveau frontend
12
2. Tendances du web
Tendances du web
Le web 2.0 et le Big Data, ont changé radicalement la manière de gestion
de la quantité importante de données disponible sur le web
On parle alors de base de données NoSQL, ETL, MapReduce, ...
13
3. Frameworks web
Définition
Un Framework : c’est quoi ?
un ensemble cohérent de composants
logiciels
structurels, qui sert à créer les fondations ainsi que
les grandes lignes de tout ou d’une partie d'un
logiciel.
un cadre de travail (architecture), une aide pratique,
une palette d'outils qui nous évite de réinventer la
roue (réutilisation).
14
3. Frameworks web
Définition
Un Framework : c’est quoi ?
bibliothèques
de
ensemble
permettant
le
développement rapide d'applications.
Il fournit suffisamment de briques logicielles
pour pouvoir produire une application aboutie.
Ces composants
sont organisés pour être
utilisés en interaction les uns avec les autres
Outils de
développement web
15
3. Frameworks web
Les avantages
Un Framework pourquoi faire ?
Gain du temps de développement
: un Framework
garantie la rapidité de développement du projet. Il sera
inutile de re-développer tout un tas de fonctions, servez-
vous tout est là ! (ou presque )
Gain de qualité : un Framework offre un cadre de travail
déjà testé et bien expérimenté = une architecture de
bonne qualité sans risque pour la conception. Il évite de
les erreurs de conception (couplage faible et cohésion
forte).
Outils de
développement web
16
3. Frameworks web
Les avantages
un Framework facilite et simplifie le travail en
groupe, par exemple les designers s'occupent
des vues et les développeurs s'occupent de la
partie métier, le tout en même temps et sur des
fichiers différents.
un
de
Publicité
permet
nombreuses fonctionnalités prêtes à l’emploi
et dont les implémentations sont bien rodées
Le coté open sources des solutions
l’intégration
Framework
17
3. Frameworks web
Les inconvénients
simple à plusieurs
Maitriser un Framework prend du temps, cela
réaliser un
peut-être quelques heures pour
semaines pour
travail
l'utilisation avancé d'un Framework complexe
ou pour une bonne configuration.
Il faut comprendre son fonctionnement interne,
connaître les bonnes pratiques, savoir comment
débuger, lire la documentation etc ...
18
3. Frameworks web
Les inconvénients
Utiliser un Framework oblige d’optimiser sa réutilisation : c'est
comme acheter le dernier smartphone avec toutes les applications
alors que l'on souhaite juste utiliser la fonction "téléphoner".
Il faut poser le problème autrement : Est-ce que l'utilisation de ce
Framework va nous faire gagner du temps ?
Si le projet est simple et rapide à réaliser sans Framework alors passez votre
chemin et créer le tout "from scratch".
Si
le projet est complexe et/ou long à réaliser sans Framework, alors
commencez à y réfléchir très sérieusement et à choisir le Framework qui
convient.
19
3. Frameworks web
Framework versus Librairie
s'utilise directement, un
Une Librairie
Framework s‘étend ou se paramètre.
Avec une Librairie, l’exécution est dirigée
par le code écrit par le développeur qui fait
appel aux classes de la librairie le code
d'une nouvelle application invoque le code
de la Librairie.
20
3. Frameworks web
Framework versus Librairie
avec un Framework : l’exécution est dirigée
par le code du framework qui fait appel au
code écrit par le développeur
le développeur doit compléter les classes et
ressources préexistantes dans le framework
Le code d'un Framework appelle le code de la
nouvelle application.
21
3. Frameworks web
Exemples …
Nombreux Frameworks pour faciliter le développement d'applications Web
Struts (Apache)
Java Server Faces (SUN)
Spring
Tapestry (Apache)
Stripes
Wicket (Apache)
Symfony (PHP)
Ruby On Rails (Ruby)
Django (Python)
Grails (Groovy)
CakePHP
ZendFramework
Etc.
22
Publicité
4.
Principaux
concepts
technologiques
Serveur web :
Une machine connectée à internet qui permet
de servir des ressources (fichiers HTML, CSS,
Javascript, images, vidéos, …) via le protocole
HTTP
Exemples: Apache, Nginx
23
4. Principaux concepts
technologiques
Serveur d’application :
Framework
fournissant
de
création d’applications web et de serveur web
permettant de les faire fonctionner
fonctionnalités
des
Il s’agit d’une surcouche au dessus des serveurs web
Les services fournis sont accessible via des APIs
Exemple : Serveur d’application Java EE qui se base
sur Apache, Tomcat, EJB, et d’autres services
24
4. Principaux concepts
technologiques
Serveur vs Client:
Dans le contexte d’une application web, le serveur est
la machine sur laquelle l’application est hébergée
Par opposition,
l’utilisateur
le client est donc la machine de
La notion de client et de serveur est dépendante du
contexte
Un serveur qui consomme un service offert par un
autre serveur est considéré comme client
25
4. Principaux concepts
technologiques
Architecture Orientée Services (SOA):
où
conception
Style
différents
composant logiciels sont offert via un protocole de
communication sur un réseau
applicatif
de
L’idée derrière cette architecture est d’encapsuler la
logique métier d’un composant et de ne fournir que
l’information nécessaire pour les clients
26
4. Principaux concepts
technologiques
Representational State Transfer (ReST):
Une manière d’offrir de l’interopérabilité entre des
systèmes logiciels via les APIs
Offre une représentation textuelle des données
(généralement sous forme de XML ou JSON)
Un protocole dit Stateless (Les requêtes successives
sont indépendantes)
27
4. Principaux concepts
technologiques
Representational State Transfer (ReST):
Principalement basé sur le protocole HTTP
On va donc utiliser les méthodes GET, POST,
PUT, DELETE, ...
28