Le renouveau du web - Mathieu Parisot

2023-04-10 1

Penser le Web autrement !

TEST_Cliquez et modifiez le pied de page

2023-04-10 TEST_Cliquez et modifiez le pied de page 2

De quoi on va parler ?

⦿Ben du Web…⦿D'architecture autour du Web⦿De conception de sites pour le Web⦿De conception de sites pour le Web Mobile⦿De Web de données⦿Et un peu de Cloud et de NoSQL

Bref du passé, du présent et du futur du Web !


Et en Buzz Words ?

WOA, SOA, REST, STATELess, HATEOAS, HTML5, Mobile First, Responsive Web Design, Web sémantique, Web de données,

Web Mobile, Cloud, NoSQL, etc.

2023-04-10 4

Disclaimer


2023-04-10 5

Pourquoi cette présentation ?


Parce que !!!!Sponsored By


Les terminaux changent


Les attentes changent

⦿Ajax à gogo⦿Animations et transitions léchées⦿Défilements infinis⦿Disparition des popup modales⦿Réactivité immédiate⦿Sites + sobres


Donc le développement change

⦿Construire avec les technologies d'hierLes technologies dépassées

⦿Construire avec les technologies d'aujourd'huiLes technologies matures et rassurantes

⦿Construire avec les technologies de demainLes technologies que l'on invente aujourd'hui pour les usages de demain


Qui ?

2023-04-10 10

Et vous ?



La citation kivabien™

“ Le problème avec le futur, c'est qu'il n'arrête pas de devenir le

présent. ”Bill Watterson

2023-04-10 12

A propos du Web…


Sa vie, son œuvre, etc.

2023-04-10 13

Commençons par une définition


WEB = HTTP + URI + HTML

HTTP : Transport des données

URI : Identifier et localiser les donnéesHTML : Afficher les données

2023-04-10 14

Et attention…


Web != Internet

Web : Consultation de documents

Internet : Interconnexion de réseaux

Internet = Web + mail + P2P + IRC + …


Les dates clefs – Le 1er Age

⦿1989 : invention par Tim Bernes Lee⦿1991 : Le projet est rendu public⦿1993 : apparition de Mosaic, premier navigateur

graphique⦿1994 : Naissance du W3C pour standardiser tout

ça⦿1995 : 1ere guerre des navigateurs : IE vs

Netscape⦿1997 : HTML 4, le Web tel qu'on le connait⦿2001 : IE6 (Qu'il soit maudit à jamais!)


Les dates clefs – Le Renouveau

⦿2004 : Web 2.0 (basé sur Ajax), Naissance de Firefox⦿2007 : Début des travaux du W3C sur le

HTML5 et apparition de l'iPhone⦿2008 : Seconde Guerre des navigateurs : IE vs

Chrome vs Firefox (vs Safari vs Opera)

⦿2011 : Adobe et Microsoft sont les derniers grands du Web a promouvoir le HTML5

2023-04-10 17

Les architectures du Web


En simplifiant et avec un peu de provocation

2023-04-10 18

L'origine : 1992-1998


Simple et rapide

Un peu sommaire

2023-04-10 19

Le sites dynamiques : 1998-2002


Simple et efficace

Pas facile a maintenir

2023-04-10 20

Les sites Entreprise : 2002-2006


Resistant (a quoi ?)

Un peu compliqué

2023-04-10 21

Les sites Entreprise : 2006-2012


Plus simple

Pas prévu pour le multicanal

2023-04-10 22

Les sites Multicanaux : 2010-20??


Très flexible

Plus de technologies

2023-04-10 23

Les architectures du Web


En Schémas techniques

2023-04-10 24

L'origine


Pages Webs statiques

2023-04-10 25

Le web dynamique


BDD

Serveur Web

Pages dynamiques Pages statiques

Session

2023-04-10 26

Le Web d'entreprise


BDD

Serveur Applicatifcommunication

Serveur Web

Pages dynamiques

Session

2023-04-10 27

Service Oriented Architecture


BDD

Serveur Applicatif

communication

Serveur Web

Pages dynamiques

BDD

Serveur Applicatif

communication

Serveur Web

Pages dynamiques

BDD

Serveur Applicatif

communication

Serveur Web

Pages dynamiques

BDD

Serveur Applicatif

communication

Serveur Web

Pages dynamiques

Bus de données

2023-04-10 28

Le retour à la réalité


BDD

couche métier

Couche Vue

Pages dynamiques

Session

2023-04-10 29

En restant S.O.A


BDD

couche métier

Couche Vue

Pages dynamiques

BDD

couche métier

Couche Vue

Pages dynamiques

BDDcouche métier

Webservices

Webservices

2023-04-10 30

Arriva le Mobile


BDD

couche métier

Couche Vue Web

Pages dynamiques

Couche Services Mobile

Web Mobile App Mobile

Session

Couche Vue Web Couche Services Mobile

2023-04-10 31

Web Oriented Architecture


BDD

Services REST

BDD

Services REST

BDD

Services REST

Client Web

Client Web MobileApp Mobile

2023-04-10 32

Si on rentre dans les détails


Wooooooah? non WOA !


REST ?

⦿ REpresentational State Transfer⦿Utiliser le Web pour exposer des données⦿L'URI permet d'identifier les données⦿Les verbes HTTP permettent de manipuler les

données⦿HTML, XML et JSON permettent de les

réprésenter⦿Sans session (STATELess)


Pourquoi REST ?

⦿Beaucoup plus simple que RPC ou SOAP⦿Mieux structuré⦿Moins gourmand en mémoire⦿Meilleurs elasticité (scalable)⦿Pas de surcouche : utilise directement HTTP⦿Profite de tous les méchanismes HTTP et URI⦿cache, authentification, codes d'erreurs, etc.


Les verbes HTTP, kézako ?

⦿GET : récupération d'infos⦿POST & PUT : création / modification⦿DELETE : suppression

⦿Attention le DELETE n'est pas bien supporté par les navigateurs!


Plus concrètement

⦿Récupérer la liste des utilisateurs : GET http://soat.fr/users/

⦿Récupérer un utilisateur : GET http://soat.fr/users/1

⦿Récupérer la listes de ses amis : GET http://soat.fr/users/1/friends/

⦿Supprimer un utilisateur :DELETE http://soat.Fr/users/1

⦿ Créé un utilisateur :POST http://soat.fr/users/2


Le résultat en JSON

GET http://soat.fr/users/1HTTP RESPONSE 200 OK{ 'name' : 'Mathieu PARISOT', 'civility' : 'Mr',

'birthdate' : '22/06/1982','languages' : ['java', 'php', 'html', 'css', 'javascript'],'GPS' : {

'link' : {'rel' : 'groupe GPS','href' : 'http://soat.fr/gps/2'

}}

}


Différents "niveaux"

⦿Niveau 0 : SOAP ou RPCPOST http://soat.fr/userService

Entrée : <addFriend userId="1" friendId="2"/>Sortie : <result status="ok"/>

⦿Niveau 1 : La transitionPOST http://soat.fr/users/addFriend

Entrée : <data userId="1" friendId="2"/>Sortie : <result status="ok"/>


Différents "niveaux"

⦿Niveau 2 : Utilisation de HTPPPOST http://soat.fr/users/1/friends/2

Entrée : rien d'autreSortie : HTTP 200

⦿Niveau 3 : HATEOAS !


HATEOAS ?

⦿Hypermedia as the Engine of Application State⦿Découvrir les possibilités à partir d'un point

d'entrée unique⦿Pas de contrat autre que le standard REST⦿Toutes les resources sont liées les unes aux

autres


Un exemple

⦿GET http://soat.fr<company name="so@t"> <users> <link rel="users" href="http://soat.fr/users/"/> </users> <customers> <link rel="customers" href="http://soat.fr/customers/"/> </customers></company>


Un exemple la suite

⦿GET http://soat.fr/users/<users> <user name="mathieu parisot"> <link ref="self" href="http://soat.fr/users/1"/> </user> <user name="Jean Dupont"> <link ref="self" href="http://soat.fr/users/2"/> </user></users>


Un exemple la fin

⦿GET http://soat.fr/users/1<user name="mathieu parisot"> <link ref="self" href="http://soat.fr/users/1"/> <customers> <link rel="customer" href="http://soat.fr/customers/1"/> </customers></user>


OpenAPI

⦿Vous avez des tonnes de services …⦿… alors exposez les au monde entier !⦿Ou seulement à vos partenaires⦿Et pas forcément tous⦿Mais pensez-y même si vous ne le faîte pas !

2023-04-10 45

Architecture


Des questions ?

2023-04-10 46

Le Web Mobile


Ses challenges coté client


Natif Vs Web

⦿Débat sans fin sur internet⦿Natif :⦿Rapide⦿Accès au matériel⦿Look&Feel natif

⦿Web :⦿Multiplateforme⦿Plus de développeurs


Mais ça bouge

⦿Web Devices en HTML5 pour accéder au matériel⦿Moteurs Javascript de + en + rapide⦿API CSS et Javascript pour simuler un

look&feel natif

Convergence entre les deux !


Les problématiques Mobile

⦿Taille de l'écran⦿Disparité du parc⦿Bande passante (ko/s)⦿Latence (temps minimal de chaque requête)⦿Batterie⦿Puissance de calcul⦿Navigation (tactile / flèches / clavier num.)


La disparité

⦿Pensez votre site pour le périphérique cible qui posera le plus de problèmes…

⦿Puis activer les fonctionnalités avancées en fonction du périphérique


Le réseau

⦿Taille totale recommandée : 20ko !

⦿Réduisez le nombre de requêtes au serveur : Si 1s de latence et 5 requêtes en // : 5 secondes

pour charger 25 ressources (images, css, js)

⦿Prévoyez un mode offline minimal


La puissance

⦿Limiter au maximum le Javascript !

⦿Pas de setInterval

⦿Attention aux modifications du DOM

⦿Tester sur les périphériques les + lents


La navigation

⦿Aucun scroll horizontal⦿Eviter les scrolls verticaux⦿Boutons et champs beaucoup + gros⦿Typer les champs de formulaires en HTML5⦿Pas de survol⦿Pas de popup


Pour vous épauler

⦿JQuery Mobile⦿Sancha⦿JQTouch⦿GWT / PrimeFaces / Wicket⦿PhoneGap⦿Et plein d 'autres…

2023-04-10 55

Le Web mobile


Des questions ?

2023-04-10 56

Responsive Web Design


Un site unique pour les gouverner tous…


Le site s'adapte à l'écran


Mobile First !

⦿Pensez le site pour l'écran le + petit

⦿Ajouter les éléments en fonction de la place

Oblige à se concentrer sur l'essentiel !


Comment ça marche ?

⦿En CSS !⦿Grille Fluide : tailles en % et en em⦿Images Flexibles : max-width et cropping⦿Media Queries : CSS conditionnelles⦿Taille de l'affichage (min-width, max-height, etc.)⦿Taille de l'écran (min-width, max-height, etc.)⦿Résolution (dpi)⦿Orientation, ratio, couleurs, etc.


Une exemple de CSS

@media (min-width: 481px) and (max-width: 768px) { #banner { width:740px; } #banner img { max-width:740px; max-height:222px; } #main { width:740px; } #main-content { width:450px; float:left; } #widget-container { width:200px; float:right; } .widget-content { width:160px; }}


La compatibilité ?

< 9


Les autres problèmes

⦿Le contenu n'est pas forcément commun entre desktop et mobile

⦿Taille des pages pas adaptée au mobile

⦿Navigation pas adaptée non plus

⦿Fixer des bornes min et max pour la lisibilité


Quand l'utiliser ?

⦿Tout le temps ! Même sur le desktop les écrans sont différents !

⦿Si votre contenu est commun avec le mobile

⦿Pour préparer une transition vers le mobile

2023-04-10 64

Responsive Web Design


Des Questions ?

2023-04-10 65

Gérer son code Client


Javascript c'est de la <censored> !


Le retour du Client - Serveur

La théorie : découpage en couches, n-tiers

La réalité : code vue et métier intriqué

Avec le WOA on sépare complètement la vue !Serveur : expose des services RESTClient : site Web, appli native, client lourd, etc.


Les sites Webs

Structure Style Traitement Ressources


Le CSS

⦿Langage très limité : ⦿Pas de variables⦿Beaucoup de valeurs prédéfinies

⦿Mais très compliqué :⦿Héritage en cascade⦿Déclarations à plat⦿Surcharge des selecteurs


Bonnes pratiques

⦿Utiliser un Reset CSS voir un framework⦿Eric Meyer, HTML5Reset, etc.⦿Twitter Bootstrap, Skeleton, etc.

⦿Séparer les CSS par page/composant/etc.⦿Plus facile a maintenir⦿Pages plus légères

⦿Utiliser une surcouche⦿Sass, Less, Compass


Le javascript

⦿Très puissant

⦿Très compliqué

⦿Mais facile d'accès pour les débutants

Code buggué et impossible à maintenir


Pourquoi tant de haine ?

42 == "42"42 === "42"

var myInt = parseInt("08");var myInt = parseInt("08", 10);

truefalse

myInt === 0 myInt === 8


Améliorer les choses ?

⦿Lire des livres !

⦿validation par JSLint

⦿TDD en JS : Qunit, jsTestDriver, Jasmine, etc.

⦿Frameworks et APIs : Jquery, Dojo, YUI, etc.


Le Framework : JQuery

⦿Utilisé par 60% des sites !⦿Fait pour la manipulation du DOM⦿Efficace, facile, bien documenté⦿Des tonnes de plugins

var link = document.createElement('a');link.setAttribute('href', 'mylink.htm');var elem = document.getElementById("myId");elem.appendChild(link);

$('#myId').append('<a href="mylink.htm">');


Les Frameworks MVC en JS

⦿Gérer des sites Webs complexes⦿Nombreuses solutions :

Angular.js, Backbone.js, Sprout, sammy, Spine, Ember.js, batman.js, etc.⦿Frameworks très jeunes …⦿… donc c'est un peu le bordel !⦿Mais très prometteur et incontournable

dans le futur


Le Javascript coté Server

⦿Explosion du Buzz autours de Javascript⦿Plein de frameworks coté client …⦿… mais aussi coté server !

A étudier et voir à long terme


Dans tous les cas

⦿MinifierYUI compressor

⦿CompresserMod_deflate sur apache

⦿Utiliser des CDNhttps://developers.google.com/speed/libraries/devguide

⦿Fusionner vos ressourceshttp://spritegen.website-performance.org/

⦿BenchmarkerChrome, PageSpeed, YSlow

2023-04-10 77

Le Web coté client


Des questions ?

2023-04-10 78

Le Web Sémantique


Donner du sens à vos données !


Kézako

⦿Donner du sens aux données du WebWeb de données

⦿Lier ces données entre ellesArbres de connaissances⦿Structurer ces données

Ontologie⦿Enrichir ces données

Métadonnées


Un exemple 1/2

So@t104, bis rue de Reuilly 75012 Paris Téléphone : +33(1) 44 75 42 55 Télécopie : +33(1) 44 75 05 25SA au capital de 80.000 EurosN° Siret : 433 353 760 000 39


Un exemple 2/2

<div class="entreprise">So@t104, bis rue de Reuilly 75012 ParisTéléphone : +33(1) 44 75 42 55Télécopie : +33(1) 44 75 05 25SA au capital de 80.000 EurosN° Siret : 433 353 760 000 39</div>


Donner du sens

⦿Plusieurs langages pour le faire :⦿Microdata en HTML5⦿Microformat⦿RDFa⦿OWL

⦿Plusieurs langages pour les requêter :⦿SPARQL⦿RDQL⦿DQL


Open Data

⦿Libérer vos données !⦿Mise à disposition de données à tous⦿Exemple : http://www.data.gouv.fr/

⦿Pas nécessairement dans un but Web de Donnée…⦿… mais très pratique si c'est le cas (Linked

Open Data)

2023-04-10 84

Qui en fait ?



Vous arrivez pas à lire ?

http://fr.dbpedia.org/

http://upload.wikimedia.org/wikipedia/commons/3/34/

LOD_Cloud_Diagram_as_of_September_2011.png


Pourquoi ?

http://www.google.com/insidesearch/features/search/knowledge.html

2023-04-10 87

Le Web Sémantique


Des Questions ?

2023-04-10 88

Les outils



Scalabilité extrème

⦿De + en + de gens connectés⦿De + en + de données⦿Comment tenir la charge ?⦿STATELess pour pouvoir distribuer les

serveurs

Nouveaux serveurs, Cloud et NoSQL à la rescousse

2023-04-10 90

Nouveaux serveurs



Comment marche un serveur?

Thread d'écoute

Traitement Traitement Traitement


Pourquoi ca pose problème ?

⦿1 client = 1 thread⦿Grosse consommation mémoire⦿Synchronisation⦿Beaucoup de temps d'attente pour rien

2023-04-10 93

Comment faire mieux ?


Thread d'écoute

Thread d'écriture Thread de lecture

Evènement Evènement


Pourquoi c'est mieux ?

⦿Nombre de threads fixe⦿Moins de mémoire⦿Gestion par Evens⦿Aucun temps d'attente pour rien

2023-04-10 95

Le Cloud


Nouveaux défis, nouveaux problèmes


Le Cloud en 1 minute

Matériel

Environnement

Apps


Le PaaS pour les développeurs

⦿Nouvelles manières de déployer des applications

⦿Forte élasticité

⦿Rapidité de mise en place

⦿Administration simplifiée


Nouveaux défis

⦿Déploiement Continue⦿Applications élastiques⦿Stateless⦿Distribuées⦿Répartition des tâches⦿Asynchronisme⦿résistance aux pannes


Nouveaux problèmes

⦿Vendor Locking⦿Données distantes⦿Cadre législatif⦿Gestion des défaillances⦿Nouveaux patterns de développements

2023-04-10 100

Le NoSQL


Non au SQL !


Kézako ?

⦿Not Only SQL⦿a.k.a Big Data⦿Les principes de base : (ni exclusif, ni obligatoire)

⦿Pas de jointure⦿Distribué⦿Pas ACID⦿Sacrifice de la consistance des données⦿Hautes performances


Adapter le stockage aux données

⦿Les données ne sont pas forcément des tableaux⦿clefs/valeur⦿graphs⦿objets⦿documents⦿etc.

Pourquoi tout vouloir mettre dans un tableau ?

2023-04-10 103

Autour du Web


Des questions ?

2023-04-10 104

La synthèse


Parce que c'était vraiment long…


Ce qu'il faut retenir

⦿Ca bouge sur et autour du Web !⦿Le mobile est entrain de tout changer !⦿Les gens sont beaucoup plus exigeants…⦿… et beaucoup plus nombreux !⦿Le prochain défi du Web est de donner du

sens à son contenu !


Ce qu'il faut faire

⦿Du REST⦿Du HTML5/Javascript/CSS3⦿Du STATELess⦿Du Cloud⦿Du NoSQL⦿Mettre des microdata


Et surtout …

Vous n'êtes pas seul à galérer !

Alors regardez ce que font les autres !

2023-04-10 108

C'est fini !


Des Questions ?

2023-04-10 109

Merci !

Documents

Le renouveau du web - Mathieu Parisot