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

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

Serveur Web

Pages dynamiques Pages statiques

Session

2023-04-10 26

Le Web d'entreprise

Serveur Applicatifcommunication

Serveur Web

Pages dynamiques

Session

2023-04-10 27

Service Oriented Architecture

Serveur Applicatif

communication

Serveur Web

Pages dynamiques

Serveur Applicatif

communication

Serveur Web

Pages dynamiques

Serveur Applicatif

communication

Serveur Web

Pages dynamiques

Serveur Applicatif

communication

Serveur Web

Pages dynamiques

Bus de données

2023-04-10 28

Le retour à la réalité

couche métier

Couche Vue

Pages dynamiques

Session

2023-04-10 29

En restant S.O.A

couche métier

Couche Vue

Pages dynamiques

couche métier

Couche Vue

Pages dynamiques

BDDcouche métier

Webservices

2023-04-10 30

Arriva le Mobile

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

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é ?

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

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 !

Le renouveau du web - Mathieu Parisot

Documents

PROSPECTUS Covéa Renouveau - Covea Finance

Mathieu Bonardet

LE RENOUVEAU DU DISCOUNT EN FRANCE

Afrique du Sud : le renouveau - SidactionAfrique du Sud : le renouveau 16 La lutte du héros national 17 La décennie de la honte 18 Le renouveau politique 21 Améliorer l’avenir

Besancon renouveau horlogerie 2011

Sandillon - Le Renouveau

Renouveau digital pour Petzl

La marche des beurs, le renouveau

Le Renouveau Socialiste

Le Renouveau Charismatique.docxmartinique… · Web viewLe Renouveau Charismatique. Le Renouveau Charismatique est un courant qui traverse l’église et s’applique à manifester

MATHIEU DUBÉ

VAISSIER Mathieu

perte, deuil et renouveau · Perte, deuil et renouveau 3 3 Prologue 5 Perte, deuil et renouveau 8 Pertes, et deuil 13 Communauté scolaire 21 Soutenir des groupes d’âge spécifique

Le renouveau de l'herboristerie (L'Express)

Le Renouveau pédagogique en mathématique : de la théorie à la pratique! Sophie Lemay et Guy Mathieu

MATHIEU GAUDET - Analekta

Book Mathieu Saulnier

Introduction Mathieu Bardoux

Mathieu DA VINHA

Le renouveau d’Oasis