Applicazioni HTML5 Superveloci - Salvatore Romeo

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?

http://www.codefessions.com/2012_08_01_archive.html


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



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












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

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


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


YUI compressor

Documentazione del server!!!

Jsoup per Java, Jquery per NodeJs




Velocità hardware


Oltre il codice

Velocità comunicazione

Architetture

Server+DB

Websocket / SPDY

Architetture lato client

1

Aggiornamenti totali


1

2

Aggiornamenti parziali


1

2

history.pushState(null,null,path)


history.pushState(null,null,path)

2.2

4


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


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>

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

Apache NodeJs Vert.x

Server + DB

Server + DB

DB:

• NoSQL

• MySQL on the cloud

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















Architetture

Server+DB

Websocket / SPDY


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

https://github.com/Atmosphere/atmosphere

http://dev.chromium.org/spdy

https://developers.google.com/speed/pagespeed/?hl=it

Web Sockets

2.2

4


Architetture

Server+DB

Websocket / SPDY


Vert.x + MongoDB

AtmosphereJS




Velocità hardware


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


Usate le transition3d CSS3

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


Usate le transition3d CSS3

Ha prestazioni paragonabili a OpenGL




Velocità hardware


Oltre il codice

Responsive layouts: immagini

Richieste statiche

Manipolazione DOM

Pre-load e Post-load

Web Workers


• 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




Velocità hardware


Oltre il codice

Perché progettare app HTML5 superveloci?

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




Velocità hardware


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à

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

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

Applicazioni HTML5 Superveloci - Salvatore Romeo

Documents

Transcript of Applicazioni HTML5 Superveloci - Salvatore Romeo