Frameworks de développement web

Programming, Web Development · course

Browse all développement web documents

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

[email protected]

Ali TURKI

[email protected]

Nesrine BEN YAHIA

[email protected]

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

[email protected]

Ali TURKI

[email protected]

Nesrine BEN YAHIA

[email protected]

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

Advertisement

 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

Advertisement

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

Advertisement

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

Advertisement

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):

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