Applicazioni HTML5 Superveloci - Salvatore Romeo

HTML5 Italy

http://www.meetup.com/HTML5-Italy/
… prossimamente a Milano

Di cosa parleremo

?

Facebook abbandona HTML5
 Perché?
 Cosa non ha funzionato?
 E’ tutta colpa di HTML5?
 Quante persone ha licenziato?

Is HTML5 too slow for Facebook?
http://www.codefessions.com/2012_08_01_archive.html

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

Velocità di download

 Quale libreria
 Minification
 Gzip Compression
 Embedding


Esiste una libreria
utile come jQuery,
ma molto più
performante?

Quale libreria

Lib di base Lib grafiche

… …

Quale libreria

252KB (32KB)
47KB (8.4KB)
86KB (6KB)

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

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

originale
minified

25%

Minification + GZip
Librerie per javascript:
• JSMin
• YUI compressor
• Closure compiler

Librerie per i CSS:
• YUI compressor
• SimpLess

Minification + GZip
File ridotti in media al

originale
minified

12%
gzipped


Quale libreria
 Minification YUI compressor
 Gzip Compression Documentazione del server!!!
 Embedding

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
<html> <script src=“file.js”></script>

<head> <link rel=“stylesheet” “file.css” />

</head>
<body>

</body>
</html>

Embedding
<html> <script src=“file.js”></script>

<head> <link rel=“stylesheet” “file.css” />

<script>
</head> </script>
//code of the file.js file

<body> <style>
// style here
</style>

</body>
</html>

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
<html>
<head>
Base64
</head>
<body>

</body>
</html>

Embedding
<html>
<head> <img
src="data:image/
gif;base64,R0lGl…"
</head> width="16“ height="14">
<body>
Base64 background:url(
</body> data:image/
gif;base64,R0lG1…
</html>

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 Non è consigliabile embeddare troppi file
per snellire la pagina creando pagine complete >100KB

La cache de browser è cancellata su iPhone 4 (e precedenti) quando spento


Quale libreria
 Minification YUI compressor
 Gzip Compression Documentazione del server!!!
 Embedding Jsoup per Java, Jquery per NodeJs


 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
Aggiornamenti totali

1


1

2

Aggiornamenti parziali


1

history.pushState(null,null,path)

2

history.pushState(null,null,path)

2.2

4


 Architetture Aggiornamenti parziali (history.pushState)
 Server+DB

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

Tempo di elaborazione server + DB

Server + DB

Server
+ DB

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>

1000000 richieste, 20000 concorrenti

Richieste
fallite

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

Apache

NodeJs

Vert.x

Server + DB
DB:
• NoSQL
• MySQL on the cloud

http://kkovacs.eu/cassandra-vs-mongodb-
vs-couchdb-vs-redis


 Server+DB 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
http://www.youtube.com/watch?v=Z897fkPn7Rw

• Crea una connessione su un’altra porta

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


 Server+DB Vert.x + MongoDB
 Websocket / SPDY AtmosphereJS

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é .animate è troppo lento

 Animazioni
 Canvas

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

 Animazioni Usate le transition3d CSS3
 Canvas

Canvas
Particle test

fps

http://www.codefessions.com/2012/03/how-fast-is-html5-canvas-part-2.html

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

 Animazioni Usate le transition3d CSS3
 Canvas Ha prestazioni paragonabili a OpenGL

Considerazioni generali

 Responsive layouts: immagini
 Richieste statiche
 Manipolazione DOM
 Pre-load e Post-load
 Web Workers

Responsive layouts

• Immagini fisse
• Immagini di contenuto
• Le giuste immagini per il device
– 2x (high density devices)
– 1x
– Thumbs
– Don't Scale Images in HTML

Richieste statiche

• 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

Manipolazione DOM

• 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

Post-load & Pre-load

Elementi non subito necessari

Elementi necessari tra poco

Web Workers
• 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()

Oltre il codice

Perché progettare
app HTML5
superveloci?

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

Misurare la velocità

 Chrome Web Tools
 Chrome Page Speed
https://developers.google.com/speed/pagespeed/

 Chrome FPS Counter
about:flag

Adobe Edge Inspect
Javascript

Altro

https://developers.google.com/speed/

http://mobile.smashingmagazine.com/2012/0
7/12/elements-mobile-user-experience/

Grazie

stiamo cercando
dev e designer
linkedin.com/in/salvatoreromeo
twitter.com/romeosalv

Applicazioni HTML5 Superveloci - Salvatore Romeo

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (15)

Destacado

Destacado (6)

Similar a Applicazioni HTML5 Superveloci - Salvatore Romeo

Similar a Applicazioni HTML5 Superveloci - Salvatore Romeo (20)

Más de marcocasario

Más de marcocasario (15)

Applicazioni HTML5 Superveloci - Salvatore Romeo