Post on 06-May-2015
description
App HTML5 superveloci
HTML5 Italy
http://www.meetup.com/HTML5-Italy/
… prossimamente a Milano
Di cosa parleremo
?
Di cosa parleremo
Facebook abbandona HTML5
Perché?
Cosa non ha funzionato?
E’ tutta colpa di HTML5?
Quante persone ha licenziato?
http://www.codefessions.com/2012_08_01_archive.html
Is HTML5 too slow for Facebook?
App HTML5 superveloci
Riusciamo a convincere Zuck a tornare sui suoi passi?
Sommario
Velocità di download
Velocità di comunicazione client/server
Velocità hardware
Considerazioni generali
Oltre il codice
Quale libreria
Minification
Gzip Compression
Embedding
Velocità di download
App HTML5 superveloci
Esiste una libreria utile come jQuery, ma molto più performante?
Quale libreria
… …
Lib di base Lib grafiche
Quale libreria
http://www.codefessions.com/2012/08/performance-of-jquery-compatible-mobile.html
252KB (32KB)
47KB (8.4KB)
86KB (6KB)
Quale libreria
http://www.codefessions.com/2012/08/performance-of-jquery-compatible-mobile.html
Quale libreria
http://www.codefessions.com/2012/08/performance-of-jquery-compatible-mobile.html
Quale libreria
http://www.codefessions.com/2012/08/performance-of-jquery-compatible-mobile.html
Quale libreria
http://www.codefessions.com/2012/08/performance-of-jquery-compatible-mobile.html
Quale libreria
http://www.codefessions.com/2012/08/performance-of-jquery-compatible-mobile.html
Quale libreria
http://www.codefessions.com/2012/08/performance-of-jquery-compatible-mobile.html
Quale libreria
Minification
Gzip Compression
Embedding
Velocità di download
Minification + Gzip
Riusciamo a comprimere i file del 90%?
Minification + GZip
1. Rimuovere ciò che non serve (JS e CSS)
2. Offuscare il codice (obfuscation, JS)
Minification + GZip
File ridotti in media al
25% originale minified
Minification + GZip
Librerie per javascript:
• JSMin
• YUI compressor
• Closure compiler
Librerie per i CSS:
• YUI compressor
• SimpLess
Minification + GZip
File ridotti in media al
12% originale minified gzipped
Quale libreria
Minification
Gzip Compression
Embedding
Velocità di download
YUI compressor
Documentazione del server!!!
Embedding
• Asymmetric internet connections
• HTTP over TCP/IPv4 overhead
• Latenza significativa su connessioni mobile
Embedding
Upload:Download 1:20
500bytes up ≈ 10kB down
+ 1.5KB a richiesta HTTP
Embedding
One shot apps: tutta l’app in una sola richiesta http!
Embedding
<div style=“color:red”>ciao</div>
<div
onclick=“javascript:alert()”>ok</di
v>
Embedding
Nota sugli sprites CSS:
NON USATELI
Embedding
<div style=“color:red”>ciao</div>
<div
onclick=“javascript:alert()”>ok</di
v>
Embedding
Embedding
<html>
<head>
</head>
<body>
</body>
</html>
<script src=“file.js”></script>
<link rel=“stylesheet” “file.css” />
Embedding
<html>
<head>
</head>
<body>
</body>
</html>
<script src=“file.js”></script>
<link rel=“stylesheet” “file.css” />
<script>
//code of the file.js file
</script>
<style>
// style here
</style>
Embedding
Manipolazione DOM server side:
– Jsoup in JAVA
– Jquery in NodeJS
–Querypath in PHP
Embedding
1 sola richiesta
Embedding
<html>
<head>
</head>
<body>
</body>
</html>
Embedding
Sprites CSS
background-position: -20px -30px
Embedding
Nota sugli sprites CSS:
NON USATELI
Embedding
Sprites CSS
background-position: -20px -30px
Embedding
<html>
<head>
</head>
<body>
</body>
</html>
Base64
Embedding
<html>
<head>
</head>
<body>
</body>
</html>
Base64
<img
src="data:image/
gif;base64,R0lGl…"
width="16“ height="14">
background:url(
data:image/
gif;base64,R0lG1…
Embedding
1
2
3
Embedding
PRO CONTRO Ottimo per i first time users Non utilizzabile su elementi dinamici
(o forse no?)
Riduzione numero di richieste No cache
Distinguere tra file fissi e dinamici No CDN
Pensare bene a cosa poter caricare dopo per snellire la pagina
Non è consigliabile embeddare troppi file creando pagine complete >100KB
La cache de browser è cancellata su iPhone 4 (e precedenti) quando spento
Quale libreria
Minification
Gzip Compression
Embedding
Velocità di download
YUI compressor
Documentazione del server!!!
Jsoup per Java, Jquery per NodeJs
App HTML5 superveloci
Velocità di download
Velocità di comunicazione client/server
Velocità hardware
Considerazioni generali
Oltre il codice
Velocità comunicazione
Architetture
Server+DB
Websocket / SPDY
Architetture lato client
1
Aggiornamenti totali
Architetture lato client
1
2
Aggiornamenti parziali
Architetture lato client
1
2
history.pushState(null,null,path)
Architetture lato client
history.pushState(null,null,path)
2.2
4
Architetture lato client
history.pushState(null,null,path)
2.2
4
Velocità comunicazione
Architetture
Server+DB
Websocket / SPDY
Aggiornamenti parziali (history.pushState)
Server + DB
E’ arrivato il momento di mandare in pensione
Apache + MySql
Server + DB
Server + DB
Server + DB
Server + DB
Client Comunicazione Server
Server + DB
Server + DB
Client Comunicazione Server
Tempo di elaborazione server + DB
Server + DB
Server + DB
Client Comunicazione Server
1
2
Server + DB
Server + DB
Client Comunicazione Server
1
2
Server + DB
• Un server che non allochi un thread per ogni utente
Server + DB
• Un server che non allochi un thread per ogni utente
• NodeJS se volete usare Javascript Server Side
• Vert.x se volete usare Java, Ruby, Groovy, Javascript, Scala, Xtend
Server + DB
<p>Hello World</p>
Server + DB
<p>Hello World</p>
Richieste fallite
1000000 richieste, 20000 concorrenti
Server + DB
<p>Hello World</p>
1000000 richieste, 20000 concorrenti
Richieste al secondo
http://zgadzaj.com/benchmarking-nodejs-basic-performance-tests-against-apache-php
Server + DB
http://vertxproject.wordpress.com/2012/05/09/vert-x-vs-node-js-simple-http-benchmarks/
Server + DB
http://vertxproject.wordpress.com/2012/05/09/vert-x-vs-node-js-simple-http-benchmarks/
Server + DB
Apache NodeJs Vert.x
Server + DB
Server + DB
DB:
• NoSQL
• MySQL on the cloud
http://kkovacs.eu/cassandra-vs-mongodb-vs-couchdb-vs-redis
Velocità comunicazione
Architetture
Server+DB
Websocket / SPDY
Aggiornamenti parziali (history.pushState)
Vert.x + MongoDB
WebSockets / SPDY
• Bassa latenza (non si trasmette l’header)
• Full duplex
• La connessione dura a lungo
• Ideale per notifiche Push
• Il processing time è molto minore
• Crea una connessione su un’altra porta
http://www.youtube.com/watch?v=Z897fkPn7Rw
WebSockets / SPDY
• Non utilizzateli ‘nativamente’, ma fate riferimento a librerie che li utilizzano se possibile, altrimenti si servono del classico Ajax
WebSockets / SPDY
• AtmosphereJS
• Server ( Java): – onRequest(AtmosphereResource r)
– r.suspend(-1)
– BroadcasterFactory.getDefault()
.lookup()
• Client (JavaScript):
– $.atmosphere.subscribe(request)
https://github.com/Atmosphere/atmosphere
http://dev.chromium.org/spdy
https://developers.google.com/speed/pagespeed
Web Sockets
2.2
4
Web Sockets
2.2
4
Velocità comunicazione
Architetture
Server+DB
Websocket / SPDY
Aggiornamenti parziali (history.pushState)
Vert.x + MongoDB
AtmosphereJS
App HTML5 superveloci
Velocità di download
Velocità di comunicazione client/server
Velocità hardware
Considerazioni generali
Oltre il codice
Velocità hardware
Vogliamo superare le prestazioni di un’app nativa
Velocità hardware
Perché
Animazioni
Canvas
Velocità hardware
Se usate animazioni ed effetti grafici, anche di minima entità, un processore mobile ne risente.
setInterval
animate
Velocità hardware
Perché
Animazioni
Canvas
.animate è troppo lento
Animazioni hardware
-webkit-transform: translate3d(0, 0, 0);
-webkit-transition: ALL 0.3s ease-out;
Animazioni hardware -webkit-transform: translate3d(0, 0, 0);
-webkit-transition: ALL 0.3s ease-out;
left
background-position-left
Velocità hardware
Perché
Animazioni
Canvas
.animate è troppo lento
Usate le transition3d CSS3
Canvas
http://www.codefessions.com/2012/03/how-fast-is-html5-canvas-part-2.html
Particle test
fps
Canvas
http://www.codefessions.com/2012/03/how-fast-is-html5-canvas-part-2.html
Particle test
fps
Canvas
Pre-rendering:
context.drawImage(m_canvas, 0, 0)
context m_canvas
Canvas
Android 2.3
Android 4
Chrome Mobile 16
iPhone 4
iPhone 5
Canvas
Partial rendering:
context.fillRect(0, 0,
canvas.width, canvas.height);
Canvas
Android 2.3
Android 4
Chrome Mobile 16
iPhone 4
iPhone 5
Canvas Big fixed images:
<canvas id="background" width="640" height="480"
style="position: absolute; z-index: 0"> </canvas>
<canvas id="foreground" width="640" height="480"
style="position: absolute; z-index: 1"> </canvas>
background foreground
Canvas
Android 2.3
Android 4
iPhone 4
iPhone 5
http://www.html5rocks.com/en/tutorials/canvas/performance/
Velocità hardware
Perché
Animazioni
Canvas
.animate è troppo lento
Usate le transition3d CSS3
Ha prestazioni paragonabili a OpenGL
App HTML5 superveloci
Velocità di download
Velocità di comunicazione client/server
Velocità hardware
Considerazioni generali
Oltre il codice
Responsive layouts: immagini
Richieste statiche
Manipolazione DOM
Pre-load e Post-load
Web Workers
Considerazioni generali
• Immagini fisse
• Immagini di contenuto
• Le giuste immagini per il device
– 2x (high density devices)
– 1x
– Thumbs
– Don't Scale Images in HTML
Responsive layouts
• Minimizza i cookie inviati al server
• Usa lo storage server-side o client-side per salvare le info dell’utente
• Per le richieste statiche utilizza un sottodominio che non si serve dei cookie
Richieste statiche
• Salvate i riferimenti agli elementi che accedete con $(…)
• Aggiornate i nodi “offline” e solo alla fine aggiungeteli al DOM
• Utilizzate CSS per il layout e non JavaScript
Manipolazione DOM
Elementi non subito necessari
Elementi necessari tra poco
Post-load & Pre-load
• E’ come un Thread: non blocca l’interfaccia grafica
var worker = new Worker(“async.js")
worker.postMessage(“message")
worker.onmessage = function(event) {… event.data …}
worker.terminate()
Web Workers
Web Workers
2.2
4
Web Workers
2.2
4
App HTML5 superveloci
Velocità di download
Velocità di comunicazione client/server
Velocità hardware
Considerazioni generali
Oltre il codice
Perché progettare app HTML5 superveloci?
Oltre il codice
Oltre il codice
Oltre il codice
Oltre il codice
Oltre il codice
Oltre il codice
User Experience
Oltre il codice
User Experience
Chi userà l’app
Dove userà l’app
Come userà l’app
Quando userà l’app
Perché userà l’app
Oltre il codice
Es: loading piuttosto che niente
Oltre il codice
Es: loading piuttosto che niente
Oltre il codice
App HTML5 superveloci
Velocità di download
Velocità di comunicazione client/server
Velocità hardware
Considerazioni generali
Oltre il codice
Chrome Web Tools
Chrome Page Speed https://developers.google.com/speed/pagespeed/
Chrome FPS Counter about:flag
Adobe Edge Inspect
Javascript
Misurare la velocità
Altro
https://developers.google.com/speed/
http://mobile.smashingmagazine.com/2012/07/12/elements-mobile-user-experience/
Grazie
linkedin.com/in/salvatoreromeo
twitter.com/romeosalv
stiamo cercando dev e designer