SlideShare une entreprise Scribd logo
1  sur  39
Qui gère ?
● Le graphisme ?
● L'intégration
HTML/CSS/JS ?
● Le code applicatif ?
● Le SGBD ?
● Le contenu ?
Il manque quelque chose ....
Utiliser pleinement le navigateur
● C'est à vous de le faire (désolé)
● Mais le navigateur travaillera pour vous
HTTP, JSON, Cache, GET, Etag, 304, Ajax, PUT
Éric Daspet
http://eric.daspet.name/
Cache ?
● Simple, connu
– On évite de calculer
ce qui est déjà connu
● Quelle solution ?
Pear::
Cache_Lite
require_once('Cache/Lite/Output.php');
$opt = array(
'cacheDir' => '/tmp/',
'lifeTime' => 10
);
$cache = new Cache_Lite_Output($opt);
if (!($cache->start( $id ))) {
// Cache missed... making the page
$cache->end();
}
Pear::Cache_Lite
● Défauts ?
Pear::Cache_Lite
● Défauts ?
● Ca ne change rien pour le visiteur
– C'est le visiteur qui est important
● Quoi faire ?
Utiliser HTTP
● Dire « la page n'a pas changé depuis 2h »
● Dire « ça ne changera pas pendant 1h »
● Dire « Ce contenu là tu l'as déjà téléchargé »
La page n'a pas changé
● Requête conditionnelle
– 1er téléchargement « Last-Modified: hier 16h »
– par la suite « If-Not-Modified-Since: hier 16h »
– code de retour « 304 »
● On ne retélécharge pas
– on ne le calcule
parfois même pas
La page ne changera pas
● Date limite de consommation
– Expires: après demain 12h
– Cache-Control: max-age=300
●
● Le temps réel est-il nécessaire ?
– Je reviens souvent sur les mêmes pages
– Mais uniquement pour les liens, pas le contenu
Déjà téléchargé
● Requête conditionnelle (HTTP 1.1)
– 1er téléchargement « Etag: identifiant unique »
– par la suite « If-None-Match: identifiants en cache »
–
● Le plus souvent la date est préférable
Solution ?
● Anciennement : jpcache
– il existe probablement des choses plus récentes
● Plus simple et plus évident :
– Cache statique
– Reste à regénérer le cache statique au besoin
– Une architecture MVC claire peut aider
Attention aux sessions
● session_start = cache-control:private
– donc pas de proxy, peu de cache
● Pas de session sur les pages publiques
● Ou contrôle manuel du cache-control
Ce qu'on va faire
● Lien entre PHP et code client
● Pas vraiment de syntaxe PHP
● Pas vraiment de syntaxe HTML
On parlera surtout d'architecture
Application
● Pendant les grèves,
ma société met en place un service de bus
● C'est codé comme
d'habitude...
(vous voyez ce que je veux dire ?)
Je sais
● Plein d'erreurs
● Pb de sécurité
● Mauvais code
● Regardez le reste
– C'est pour l'exercice
Quoi en faire ?
● Nous devons
– la rendre plus sympa
– lui faire supporter la charge
– la rendre utilisable par des appli. tierces
Maintenant ...
● Vous travaillez
– Idée
– Évaluation
– Présentation
– Action
– Conclusion
Ajax
● Asynchronous
● Javascript
● and
● XML
● Rien à voir avec PHP
Ajax
● Possibilité de faire une requête HTTP en js
– sans bloquer le navigateur
– pour modifier la page ensuite
● Toujours rien à voir avec PHP
Ajax et PHP
● Ajax n'implique rien pour PHP
● Il s'agit d'une page normale
– XML, HTML, JSON, peu importe ...
● C'est même ça qui est génial : rien à changer
Ajax et Javascript
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
// Ici on place l'action à effectuer
}
}
xhr.open("GET", 'destination.php', true);
xhr.setRequestHeader('Content-Type','x-www-form-urlencoded');
xhr.send("name=value&name=value");
Pourquoi ?
● Éviter de tout recharger
– perdre les saisies
– recalculer ce qui est
déjà à l'écran
Lourd non ?
Pourquoi ?
● On télécharge des objets indépendants
– et pas des pages
● Une chose à calculer, une à afficher
– on profite à fond de notre MVC
● Une page classique réutilise nos parties Ajax
– les appels au modèle sont les mêmes
– les vues peuvent s'imbriquer
– on ajoute/supprime facilement des éléments
Cache ... encore mieux
● On ne pouvait pas envoyer en cache
– à cause de la personnalisation
● Si on télécharge des morceaux indépendants
– Eux peuvent être en cache
– Expiration, requêtes conditionnelles, etc.
Le client travaille
● En profiter pour faire travailler le client
– les données brutes sont communes (en cache)
– les personnalisations sont données à part
– Javascript recolle le tout
● Pas besoin de toucher aux pages classiques
– le javascript peut refaire le contrôleur
– le modèle fait le gros du travail
Un peu plus loin
● REST
– Interface « historique de HTTP »
– Une ressource (URI= identifiant, URL= localisation)
– Un verbe (GET, POST, PUT, DELETE)
– Des paramètres optionnels
● C'est le CRUD adapté à HTTP
– opérations très simples, à coder et à utiliser
– tout utilisable en Ajax
Préloading
● Devancez l'utilisateur
– Avec Ajax c'est un
vrai plaisir
Utilisez le client
● Restez un maximum statique
● Faites la personnalisation en javascript
● Vous « dégraderez » correctement
C'est pareil dans la vie réelle
Utilisez le client
● Et pourquoi pas
● directement du XSLT ?
– à réserver en interne
Encore plus
« REST »
● Auto-négociation
de contenu
– principalement pour la
langue
– car l'IP n'est pas une
bonne solution
Pour les perf
● Compression client
– tous les navigateurs le supportent
Cookies
● Passez vous des sessions
– quand les cookies suffisent
OpenId
● Passez vous même de l'authentification
Codes de retour HTTP
● 410, 403, 401, 301, 304, 204 .... quid ?

Contenu connexe

Tendances

Bonnes pratiques de developpement en PHP
Bonnes pratiques de developpement en PHPBonnes pratiques de developpement en PHP
Bonnes pratiques de developpement en PHPPascal MARTIN
 
Retours sur le concours Webperf 2010
Retours sur le concours Webperf 2010Retours sur le concours Webperf 2010
Retours sur le concours Webperf 2010Jean-Pierre Vincent
 
Un site web rapide ?
Un site web rapide ? Un site web rapide ?
Un site web rapide ? haricot
 
Réu technodejs
Réu technodejsRéu technodejs
Réu technodejsnaholyr
 
2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.jsTelecomValley
 
Présentation de nodejs
Présentation de nodejsPrésentation de nodejs
Présentation de nodejs13p
 
Toutes les raisons d'adopter MongoDB
Toutes les raisons d'adopter MongoDBToutes les raisons d'adopter MongoDB
Toutes les raisons d'adopter MongoDBContent Square
 
Initiation à Express js
Initiation à Express jsInitiation à Express js
Initiation à Express jsAbdoulaye Dieng
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontendyllieth
 
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013Julien Jakubowski
 
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...Real-Time applications avec la spécification Java (JSR 356) et le protocole W...
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...Ouadie LAHDIOUI
 
MongoDB day Paris 2012
MongoDB day Paris 2012MongoDB day Paris 2012
MongoDB day Paris 2012FastConnect
 
Amélioration des performances eCommerce - Webinaire par aYaline
Amélioration des performances eCommerce - Webinaire par aYalineAmélioration des performances eCommerce - Webinaire par aYaline
Amélioration des performances eCommerce - Webinaire par aYalineaYaline
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...Horacio Gonzalez
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JSENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JSHoracio Gonzalez
 

Tendances (20)

Bonnes pratiques de developpement en PHP
Bonnes pratiques de developpement en PHPBonnes pratiques de developpement en PHP
Bonnes pratiques de developpement en PHP
 
Retours sur le concours Webperf 2010
Retours sur le concours Webperf 2010Retours sur le concours Webperf 2010
Retours sur le concours Webperf 2010
 
Un site web rapide ?
Un site web rapide ? Un site web rapide ?
Un site web rapide ?
 
Introduction à Node.js
Introduction à Node.js Introduction à Node.js
Introduction à Node.js
 
Réu technodejs
Réu technodejsRéu technodejs
Réu technodejs
 
2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js2014.12.11 - TECH CONF #3 - Présentation Node.js
2014.12.11 - TECH CONF #3 - Présentation Node.js
 
WebSocket avec Java EE 7
WebSocket avec Java EE 7WebSocket avec Java EE 7
WebSocket avec Java EE 7
 
Présentation de nodejs
Présentation de nodejsPrésentation de nodejs
Présentation de nodejs
 
Toutes les raisons d'adopter MongoDB
Toutes les raisons d'adopter MongoDBToutes les raisons d'adopter MongoDB
Toutes les raisons d'adopter MongoDB
 
Rails 3 au Djangocong
Rails 3 au DjangocongRails 3 au Djangocong
Rails 3 au Djangocong
 
Initiation à Express js
Initiation à Express jsInitiation à Express js
Initiation à Express js
 
AngularJS et autres techno frontend
AngularJS et autres techno frontendAngularJS et autres techno frontend
AngularJS et autres techno frontend
 
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
Du JavaScript propre ? Challenge accepted ! @Devoxx France 2013
 
Présentation de Node.js
Présentation de Node.jsPrésentation de Node.js
Présentation de Node.js
 
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...Real-Time applications avec la spécification Java (JSR 356) et le protocole W...
Real-Time applications avec la spécification Java (JSR 356) et le protocole W...
 
NodeJs in real life
NodeJs in real lifeNodeJs in real life
NodeJs in real life
 
MongoDB day Paris 2012
MongoDB day Paris 2012MongoDB day Paris 2012
MongoDB day Paris 2012
 
Amélioration des performances eCommerce - Webinaire par aYaline
Amélioration des performances eCommerce - Webinaire par aYalineAmélioration des performances eCommerce - Webinaire par aYaline
Amélioration des performances eCommerce - Webinaire par aYaline
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JSENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
 

En vedette

El tiempo imperfecto en frances
El tiempo imperfecto en francesEl tiempo imperfecto en frances
El tiempo imperfecto en francesTavogus2
 
Imagenes fuertes de_anuncios_por_grandes_causas
Imagenes fuertes de_anuncios_por_grandes_causasImagenes fuertes de_anuncios_por_grandes_causas
Imagenes fuertes de_anuncios_por_grandes_causasfreddypb
 
WUD 2010 Paris : Introduction
WUD 2010 Paris : IntroductionWUD 2010 Paris : Introduction
WUD 2010 Paris : IntroductionFrederic CAVAZZA
 
Nuevos Dibujos de J Breaver
Nuevos Dibujos de J BreaverNuevos Dibujos de J Breaver
Nuevos Dibujos de J BreaverCris Araújo
 
Wiser Tuesday La Ruche Survey Results 2 11 09
Wiser Tuesday La Ruche Survey Results 2 11 09Wiser Tuesday La Ruche Survey Results 2 11 09
Wiser Tuesday La Ruche Survey Results 2 11 09Camilla Burg
 
Operativo Semana Santa 2010
Operativo Semana Santa 2010Operativo Semana Santa 2010
Operativo Semana Santa 2010Antonio Ulloa
 
El nacimiento del Mesías conforme a las Sagradas Escrituras
El nacimiento del Mesías conforme a las Sagradas EscriturasEl nacimiento del Mesías conforme a las Sagradas Escrituras
El nacimiento del Mesías conforme a las Sagradas EscriturasRecursos Cristianos. Org
 
U T P L E M B A R A Z O N O D E S E A D O S E G U N D O B I M E S T R E
U T P L  E M B A R A Z O  N O  D E S E A D O  S E G U N D O  B I M E S T R EU T P L  E M B A R A Z O  N O  D E S E A D O  S E G U N D O  B I M E S T R E
U T P L E M B A R A Z O N O D E S E A D O S E G U N D O B I M E S T R ERosa
 
Planta De Produccion Global 1
Planta De Produccion Global 1Planta De Produccion Global 1
Planta De Produccion Global 1juanstrikesback
 
DiseñO De SesióN De Aprendizaje. Dra Vilma Didactica Ii
DiseñO De SesióN De Aprendizaje. Dra Vilma Didactica IiDiseñO De SesióN De Aprendizaje. Dra Vilma Didactica Ii
DiseñO De SesióN De Aprendizaje. Dra Vilma Didactica IiUniv Peruana Los Andes
 
Laberintos Crediticios
Laberintos CrediticiosLaberintos Crediticios
Laberintos CrediticiosVictor Wong
 
Venus hottentote rabiet
Venus hottentote rabietVenus hottentote rabiet
Venus hottentote rabietprofchaumes
 
WUD 2010 Paris : Webdocumentaire
WUD 2010 Paris : WebdocumentaireWUD 2010 Paris : Webdocumentaire
WUD 2010 Paris : WebdocumentaireFrederic CAVAZZA
 

En vedette (20)

El tiempo imperfecto en frances
El tiempo imperfecto en francesEl tiempo imperfecto en frances
El tiempo imperfecto en frances
 
Imagenes fuertes de_anuncios_por_grandes_causas
Imagenes fuertes de_anuncios_por_grandes_causasImagenes fuertes de_anuncios_por_grandes_causas
Imagenes fuertes de_anuncios_por_grandes_causas
 
WUD 2010 Paris : Introduction
WUD 2010 Paris : IntroductionWUD 2010 Paris : Introduction
WUD 2010 Paris : Introduction
 
Nuevos Dibujos de J Breaver
Nuevos Dibujos de J BreaverNuevos Dibujos de J Breaver
Nuevos Dibujos de J Breaver
 
Como Nace Un Paradigma
Como Nace Un ParadigmaComo Nace Un Paradigma
Como Nace Un Paradigma
 
Wiser Tuesday La Ruche Survey Results 2 11 09
Wiser Tuesday La Ruche Survey Results 2 11 09Wiser Tuesday La Ruche Survey Results 2 11 09
Wiser Tuesday La Ruche Survey Results 2 11 09
 
asdasd
asdasdasdasd
asdasd
 
Créalu: Catalogue 2015
Créalu: Catalogue 2015Créalu: Catalogue 2015
Créalu: Catalogue 2015
 
Operativo Semana Santa 2010
Operativo Semana Santa 2010Operativo Semana Santa 2010
Operativo Semana Santa 2010
 
El nacimiento del Mesías conforme a las Sagradas Escrituras
El nacimiento del Mesías conforme a las Sagradas EscriturasEl nacimiento del Mesías conforme a las Sagradas Escrituras
El nacimiento del Mesías conforme a las Sagradas Escrituras
 
U T P L E M B A R A Z O N O D E S E A D O S E G U N D O B I M E S T R E
U T P L  E M B A R A Z O  N O  D E S E A D O  S E G U N D O  B I M E S T R EU T P L  E M B A R A Z O  N O  D E S E A D O  S E G U N D O  B I M E S T R E
U T P L E M B A R A Z O N O D E S E A D O S E G U N D O B I M E S T R E
 
Planta De Produccion Global 1
Planta De Produccion Global 1Planta De Produccion Global 1
Planta De Produccion Global 1
 
DiseñO De SesióN De Aprendizaje. Dra Vilma Didactica Ii
DiseñO De SesióN De Aprendizaje. Dra Vilma Didactica IiDiseñO De SesióN De Aprendizaje. Dra Vilma Didactica Ii
DiseñO De SesióN De Aprendizaje. Dra Vilma Didactica Ii
 
Laberintos Crediticios
Laberintos CrediticiosLaberintos Crediticios
Laberintos Crediticios
 
Presen Pdf
Presen PdfPresen Pdf
Presen Pdf
 
Venus hottentote rabiet
Venus hottentote rabietVenus hottentote rabiet
Venus hottentote rabiet
 
Chile
ChileChile
Chile
 
Unidad 1
Unidad 1Unidad 1
Unidad 1
 
WUD 2010 Paris : Webdocumentaire
WUD 2010 Paris : WebdocumentaireWUD 2010 Paris : Webdocumentaire
WUD 2010 Paris : Webdocumentaire
 
Historia el progreso del dogma
Historia el progreso del dogmaHistoria el progreso del dogma
Historia el progreso del dogma
 

Similaire à Utiliser pleinement le navigateur et les nouveaux clients web - AFUP 2007

Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetDevclic
 
La mise en cache et ses secrets
La mise en cache et ses secretsLa mise en cache et ses secrets
La mise en cache et ses secretsAymeric Bouillat
 
Construire un data lake managé - GDG Paris - Juin 2019
Construire un data lake managé - GDG Paris - Juin 2019Construire un data lake managé - GDG Paris - Juin 2019
Construire un data lake managé - GDG Paris - Juin 2019Jean-Baptiste Claramonte
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesOxalide
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceLudovic Piot
 
Optimiser WordPress
Optimiser WordPressOptimiser WordPress
Optimiser WordPressChi Nacim
 
Responsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousResponsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousjwajsberg
 
Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...
Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...
Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...Nicolas Silberman
 
Panel de solutions javascript
Panel de solutions javascriptPanel de solutions javascript
Panel de solutions javascriptjp_mouton
 
Performance et optimisation de PrestaShop
Performance et optimisation de PrestaShopPerformance et optimisation de PrestaShop
Performance et optimisation de PrestaShopPrestaShop
 
Meetup Drupal Lyon mars 2013 - Optimiser les performances Drupal par le cache
Meetup Drupal Lyon mars 2013 - Optimiser les performances Drupal par le cacheMeetup Drupal Lyon mars 2013 - Optimiser les performances Drupal par le cache
Meetup Drupal Lyon mars 2013 - Optimiser les performances Drupal par le cacheAurelien Navarre
 
Memcached, une solution de cache par excellence
Memcached, une solution de cache par excellenceMemcached, une solution de cache par excellence
Memcached, une solution de cache par excellenceMehdi Mehni
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 
Deliverance, la puissance de la gestion de contenu Plone appliquee aux themes...
Deliverance, la puissance de la gestion de contenu Plone appliquee aux themes...Deliverance, la puissance de la gestion de contenu Plone appliquee aux themes...
Deliverance, la puissance de la gestion de contenu Plone appliquee aux themes...Paris, France
 
Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"Adyax
 

Similaire à Utiliser pleinement le navigateur et les nouveaux clients web - AFUP 2007 (20)

Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internet
 
Les performances Web mobile
Les performances Web mobileLes performances Web mobile
Les performances Web mobile
 
La mise en cache et ses secrets
La mise en cache et ses secretsLa mise en cache et ses secrets
La mise en cache et ses secrets
 
Construire un data lake managé - GDG Paris - Juin 2019
Construire un data lake managé - GDG Paris - Juin 2019Construire un data lake managé - GDG Paris - Juin 2019
Construire un data lake managé - GDG Paris - Juin 2019
 
Morning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slidesMorning tech #2 - Démarche performance slides
Morning tech #2 - Démarche performance slides
 
Oxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performanceOxalide Morning tech #2 - démarche performance
Oxalide Morning tech #2 - démarche performance
 
Cours Php
Cours PhpCours Php
Cours Php
 
Cours Php
Cours PhpCours Php
Cours Php
 
Optimiser WordPress
Optimiser WordPressOptimiser WordPress
Optimiser WordPress
 
Optimiser wordpress
Optimiser wordpressOptimiser wordpress
Optimiser wordpress
 
Responsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tousResponsible Design ou Le web moderne à destination de tous
Responsible Design ou Le web moderne à destination de tous
 
Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...
Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...
Industrialisation des environnements de dev avec Puppet et Amazon (mais en fa...
 
Panel de solutions javascript
Panel de solutions javascriptPanel de solutions javascript
Panel de solutions javascript
 
Performance et optimisation de PrestaShop
Performance et optimisation de PrestaShopPerformance et optimisation de PrestaShop
Performance et optimisation de PrestaShop
 
Meetup Drupal Lyon mars 2013 - Optimiser les performances Drupal par le cache
Meetup Drupal Lyon mars 2013 - Optimiser les performances Drupal par le cacheMeetup Drupal Lyon mars 2013 - Optimiser les performances Drupal par le cache
Meetup Drupal Lyon mars 2013 - Optimiser les performances Drupal par le cache
 
Memcached, une solution de cache par excellence
Memcached, une solution de cache par excellenceMemcached, une solution de cache par excellence
Memcached, une solution de cache par excellence
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
Deliverance, la puissance de la gestion de contenu Plone appliquee aux themes...
Deliverance, la puissance de la gestion de contenu Plone appliquee aux themes...Deliverance, la puissance de la gestion de contenu Plone appliquee aux themes...
Deliverance, la puissance de la gestion de contenu Plone appliquee aux themes...
 
Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"Cours 1/3 "Architecture Web"
Cours 1/3 "Architecture Web"
 

Plus de Eric D.

Bonnes pratiques API - Paris Web 2013
Bonnes pratiques API - Paris Web 2013Bonnes pratiques API - Paris Web 2013
Bonnes pratiques API - Paris Web 2013Eric D.
 
Blend Web Mix 2013 : Concevoir son API
Blend Web Mix 2013 : Concevoir son APIBlend Web Mix 2013 : Concevoir son API
Blend Web Mix 2013 : Concevoir son APIEric D.
 
Un peu de TLS ne fait pas de mal - Sudweb 2013
Un peu de TLS ne fait pas de mal - Sudweb 2013Un peu de TLS ne fait pas de mal - Sudweb 2013
Un peu de TLS ne fait pas de mal - Sudweb 2013Eric D.
 
Api - mix it 2013
Api - mix it 2013Api - mix it 2013
Api - mix it 2013Eric D.
 
Performance des applications web - USI Casa 2011
Performance des applications web - USI Casa 2011Performance des applications web - USI Casa 2011
Performance des applications web - USI Casa 2011Eric D.
 
Webpagetest en 5 minutes - Sud Web 2011
Webpagetest en 5 minutes - Sud Web 2011Webpagetest en 5 minutes - Sud Web 2011
Webpagetest en 5 minutes - Sud Web 2011Eric D.
 
Soirée webperf du 29 nov 2010 - Latence et CDN
Soirée webperf du 29 nov 2010 - Latence et CDNSoirée webperf du 29 nov 2010 - Latence et CDN
Soirée webperf du 29 nov 2010 - Latence et CDNEric D.
 
Yahoo! Search monkey API - CEBIT 2008
Yahoo! Search monkey API - CEBIT 2008Yahoo! Search monkey API - CEBIT 2008
Yahoo! Search monkey API - CEBIT 2008Eric D.
 
Yahoo! Fire eagle API - CEBIT 2008
Yahoo! Fire eagle API - CEBIT 2008Yahoo! Fire eagle API - CEBIT 2008
Yahoo! Fire eagle API - CEBIT 2008Eric D.
 
Migrations PHP 5 - Solutions linux 2009
Migrations PHP 5 - Solutions linux 2009Migrations PHP 5 - Solutions linux 2009
Migrations PHP 5 - Solutions linux 2009Eric D.
 
Frameworks php - Solutions Linux 2008
Frameworks php - Solutions Linux 2008Frameworks php - Solutions Linux 2008
Frameworks php - Solutions Linux 2008Eric D.
 
Un web ouvert, Paris Web 2009
Un web ouvert, Paris Web 2009Un web ouvert, Paris Web 2009
Un web ouvert, Paris Web 2009Eric D.
 
Performance des sites web : qui, pourquoi, quoi, comment et où ? - USI 2010
Performance des sites web : qui, pourquoi, quoi, comment et où ? - USI 2010Performance des sites web : qui, pourquoi, quoi, comment et où ? - USI 2010
Performance des sites web : qui, pourquoi, quoi, comment et où ? - USI 2010Eric D.
 
Introduction à la soirée webperf du 21 juillet 2010, Paris
Introduction à la soirée webperf du 21 juillet 2010, ParisIntroduction à la soirée webperf du 21 juillet 2010, Paris
Introduction à la soirée webperf du 21 juillet 2010, ParisEric D.
 
Performance des sites web - Latence - AFUP 2010
Performance des sites web - Latence - AFUP 2010Performance des sites web - Latence - AFUP 2010
Performance des sites web - Latence - AFUP 2010Eric D.
 
web, métier de valeur - Paris Web 2010
web, métier de valeur - Paris Web 2010web, métier de valeur - Paris Web 2010
web, métier de valeur - Paris Web 2010Eric D.
 
Performances Web - Afup 2008
Performances Web - Afup 2008Performances Web - Afup 2008
Performances Web - Afup 2008Eric D.
 

Plus de Eric D. (17)

Bonnes pratiques API - Paris Web 2013
Bonnes pratiques API - Paris Web 2013Bonnes pratiques API - Paris Web 2013
Bonnes pratiques API - Paris Web 2013
 
Blend Web Mix 2013 : Concevoir son API
Blend Web Mix 2013 : Concevoir son APIBlend Web Mix 2013 : Concevoir son API
Blend Web Mix 2013 : Concevoir son API
 
Un peu de TLS ne fait pas de mal - Sudweb 2013
Un peu de TLS ne fait pas de mal - Sudweb 2013Un peu de TLS ne fait pas de mal - Sudweb 2013
Un peu de TLS ne fait pas de mal - Sudweb 2013
 
Api - mix it 2013
Api - mix it 2013Api - mix it 2013
Api - mix it 2013
 
Performance des applications web - USI Casa 2011
Performance des applications web - USI Casa 2011Performance des applications web - USI Casa 2011
Performance des applications web - USI Casa 2011
 
Webpagetest en 5 minutes - Sud Web 2011
Webpagetest en 5 minutes - Sud Web 2011Webpagetest en 5 minutes - Sud Web 2011
Webpagetest en 5 minutes - Sud Web 2011
 
Soirée webperf du 29 nov 2010 - Latence et CDN
Soirée webperf du 29 nov 2010 - Latence et CDNSoirée webperf du 29 nov 2010 - Latence et CDN
Soirée webperf du 29 nov 2010 - Latence et CDN
 
Yahoo! Search monkey API - CEBIT 2008
Yahoo! Search monkey API - CEBIT 2008Yahoo! Search monkey API - CEBIT 2008
Yahoo! Search monkey API - CEBIT 2008
 
Yahoo! Fire eagle API - CEBIT 2008
Yahoo! Fire eagle API - CEBIT 2008Yahoo! Fire eagle API - CEBIT 2008
Yahoo! Fire eagle API - CEBIT 2008
 
Migrations PHP 5 - Solutions linux 2009
Migrations PHP 5 - Solutions linux 2009Migrations PHP 5 - Solutions linux 2009
Migrations PHP 5 - Solutions linux 2009
 
Frameworks php - Solutions Linux 2008
Frameworks php - Solutions Linux 2008Frameworks php - Solutions Linux 2008
Frameworks php - Solutions Linux 2008
 
Un web ouvert, Paris Web 2009
Un web ouvert, Paris Web 2009Un web ouvert, Paris Web 2009
Un web ouvert, Paris Web 2009
 
Performance des sites web : qui, pourquoi, quoi, comment et où ? - USI 2010
Performance des sites web : qui, pourquoi, quoi, comment et où ? - USI 2010Performance des sites web : qui, pourquoi, quoi, comment et où ? - USI 2010
Performance des sites web : qui, pourquoi, quoi, comment et où ? - USI 2010
 
Introduction à la soirée webperf du 21 juillet 2010, Paris
Introduction à la soirée webperf du 21 juillet 2010, ParisIntroduction à la soirée webperf du 21 juillet 2010, Paris
Introduction à la soirée webperf du 21 juillet 2010, Paris
 
Performance des sites web - Latence - AFUP 2010
Performance des sites web - Latence - AFUP 2010Performance des sites web - Latence - AFUP 2010
Performance des sites web - Latence - AFUP 2010
 
web, métier de valeur - Paris Web 2010
web, métier de valeur - Paris Web 2010web, métier de valeur - Paris Web 2010
web, métier de valeur - Paris Web 2010
 
Performances Web - Afup 2008
Performances Web - Afup 2008Performances Web - Afup 2008
Performances Web - Afup 2008
 

Utiliser pleinement le navigateur et les nouveaux clients web - AFUP 2007

  • 1.
  • 2. Qui gère ? ● Le graphisme ? ● L'intégration HTML/CSS/JS ? ● Le code applicatif ? ● Le SGBD ? ● Le contenu ? Il manque quelque chose ....
  • 3. Utiliser pleinement le navigateur ● C'est à vous de le faire (désolé) ● Mais le navigateur travaillera pour vous HTTP, JSON, Cache, GET, Etag, 304, Ajax, PUT
  • 4.
  • 6. Cache ? ● Simple, connu – On évite de calculer ce qui est déjà connu ● Quelle solution ?
  • 7. Pear:: Cache_Lite require_once('Cache/Lite/Output.php'); $opt = array( 'cacheDir' => '/tmp/', 'lifeTime' => 10 ); $cache = new Cache_Lite_Output($opt); if (!($cache->start( $id ))) { // Cache missed... making the page $cache->end(); }
  • 9. Pear::Cache_Lite ● Défauts ? ● Ca ne change rien pour le visiteur – C'est le visiteur qui est important ● Quoi faire ?
  • 10. Utiliser HTTP ● Dire « la page n'a pas changé depuis 2h » ● Dire « ça ne changera pas pendant 1h » ● Dire « Ce contenu là tu l'as déjà téléchargé »
  • 11. La page n'a pas changé ● Requête conditionnelle – 1er téléchargement « Last-Modified: hier 16h » – par la suite « If-Not-Modified-Since: hier 16h » – code de retour « 304 » ● On ne retélécharge pas – on ne le calcule parfois même pas
  • 12. La page ne changera pas ● Date limite de consommation – Expires: après demain 12h – Cache-Control: max-age=300 ● ● Le temps réel est-il nécessaire ? – Je reviens souvent sur les mêmes pages – Mais uniquement pour les liens, pas le contenu
  • 13. Déjà téléchargé ● Requête conditionnelle (HTTP 1.1) – 1er téléchargement « Etag: identifiant unique » – par la suite « If-None-Match: identifiants en cache » – ● Le plus souvent la date est préférable
  • 14. Solution ? ● Anciennement : jpcache – il existe probablement des choses plus récentes ● Plus simple et plus évident : – Cache statique – Reste à regénérer le cache statique au besoin – Une architecture MVC claire peut aider
  • 15. Attention aux sessions ● session_start = cache-control:private – donc pas de proxy, peu de cache ● Pas de session sur les pages publiques ● Ou contrôle manuel du cache-control
  • 16. Ce qu'on va faire ● Lien entre PHP et code client ● Pas vraiment de syntaxe PHP ● Pas vraiment de syntaxe HTML On parlera surtout d'architecture
  • 17. Application ● Pendant les grèves, ma société met en place un service de bus ● C'est codé comme d'habitude... (vous voyez ce que je veux dire ?)
  • 18. Je sais ● Plein d'erreurs ● Pb de sécurité ● Mauvais code ● Regardez le reste – C'est pour l'exercice
  • 19. Quoi en faire ? ● Nous devons – la rendre plus sympa – lui faire supporter la charge – la rendre utilisable par des appli. tierces
  • 20. Maintenant ... ● Vous travaillez – Idée – Évaluation – Présentation – Action – Conclusion
  • 21.
  • 22. Ajax ● Asynchronous ● Javascript ● and ● XML ● Rien à voir avec PHP
  • 23. Ajax ● Possibilité de faire une requête HTTP en js – sans bloquer le navigateur – pour modifier la page ensuite ● Toujours rien à voir avec PHP
  • 24. Ajax et PHP ● Ajax n'implique rien pour PHP ● Il s'agit d'une page normale – XML, HTML, JSON, peu importe ... ● C'est même ça qui est génial : rien à changer
  • 25. Ajax et Javascript var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if(xhr.readyState == 4 && xhr.status == 200) { // Ici on place l'action à effectuer } } xhr.open("GET", 'destination.php', true); xhr.setRequestHeader('Content-Type','x-www-form-urlencoded'); xhr.send("name=value&name=value");
  • 26. Pourquoi ? ● Éviter de tout recharger – perdre les saisies – recalculer ce qui est déjà à l'écran Lourd non ?
  • 27. Pourquoi ? ● On télécharge des objets indépendants – et pas des pages ● Une chose à calculer, une à afficher – on profite à fond de notre MVC ● Une page classique réutilise nos parties Ajax – les appels au modèle sont les mêmes – les vues peuvent s'imbriquer – on ajoute/supprime facilement des éléments
  • 28. Cache ... encore mieux ● On ne pouvait pas envoyer en cache – à cause de la personnalisation ● Si on télécharge des morceaux indépendants – Eux peuvent être en cache – Expiration, requêtes conditionnelles, etc.
  • 29. Le client travaille ● En profiter pour faire travailler le client – les données brutes sont communes (en cache) – les personnalisations sont données à part – Javascript recolle le tout ● Pas besoin de toucher aux pages classiques – le javascript peut refaire le contrôleur – le modèle fait le gros du travail
  • 30. Un peu plus loin ● REST – Interface « historique de HTTP » – Une ressource (URI= identifiant, URL= localisation) – Un verbe (GET, POST, PUT, DELETE) – Des paramètres optionnels ● C'est le CRUD adapté à HTTP – opérations très simples, à coder et à utiliser – tout utilisable en Ajax
  • 31.
  • 32. Préloading ● Devancez l'utilisateur – Avec Ajax c'est un vrai plaisir
  • 33. Utilisez le client ● Restez un maximum statique ● Faites la personnalisation en javascript ● Vous « dégraderez » correctement C'est pareil dans la vie réelle
  • 34. Utilisez le client ● Et pourquoi pas ● directement du XSLT ? – à réserver en interne
  • 35. Encore plus « REST » ● Auto-négociation de contenu – principalement pour la langue – car l'IP n'est pas une bonne solution
  • 36. Pour les perf ● Compression client – tous les navigateurs le supportent
  • 37. Cookies ● Passez vous des sessions – quand les cookies suffisent
  • 38. OpenId ● Passez vous même de l'authentification
  • 39. Codes de retour HTTP ● 410, 403, 401, 301, 304, 204 .... quid ?