Applicazioni HTML5 Superveloci - Salvatore Romeo
Upcoming SlideShare
Loading in...5
×
 

Applicazioni HTML5 Superveloci - Salvatore Romeo

on

  • 1,182 views

Presentazione di Salvatore Romeo all'evento CreateTheWeb organizzato dalla community HTML5 Italy http://www.meetup.com/HTML5-Italy/

Presentazione di Salvatore Romeo all'evento CreateTheWeb organizzato dalla community HTML5 Italy http://www.meetup.com/HTML5-Italy/

Statistics

Views

Total Views
1,182
Views on SlideShare
1,180
Embed Views
2

Actions

Likes
3
Downloads
5
Comments
0

1 Embed 2

https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Applicazioni HTML5 Superveloci - Salvatore Romeo Applicazioni HTML5 Superveloci - Salvatore Romeo Presentation Transcript

    • App HTML5 superveloci
    • HTML5 Italyhttp://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?Is HTML5 too slow for Facebook?http://www.codefessions.com/2012_08_01_archive.html
    • App HTML5 supervelociRiusciamo 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
    • App HTML5 supervelociEsiste 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 libreriahttp://www.codefessions.com/2012/08/performance-of-jquery-compatible-mobile.html
    • Quale libreriahttp://www.codefessions.com/2012/08/performance-of-jquery-compatible-mobile.html
    • Quale libreriahttp://www.codefessions.com/2012/08/performance-of-jquery-compatible-mobile.html
    • Quale libreriahttp://www.codefessions.com/2012/08/performance-of-jquery-compatible-mobile.html
    • Quale libreriahttp://www.codefessions.com/2012/08/performance-of-jquery-compatible-mobile.html
    • Quale libreriahttp://www.codefessions.com/2012/08/performance-of-jquery-compatible-mobile.html
    • Velocità di downloadQuale libreria MinificationGzip Compression Embedding
    • Minification + GzipRiusciamo a comprimere i file del 90%?
    • Minification + GZip1. Rimuovere ciò che non serve (JS e CSS)2. Offuscare il codice (obfuscation, JS)
    • Minification + GZipFile ridotti in media al originale minified 25%
    • Minification + GZipLibrerie per javascript:• JSMin• YUI compressor• Closure compilerLibrerie per i CSS:• YUI compressor• SimpLess
    • Minification + GZipFile ridotti in media al originale minified 12% gzipped
    • Velocità di download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
    • EmbeddingOne shot apps: tutta l’app in una solarichiesta http!
    • Embedding<div style=“color:red”>ciao</div><div onclick=“javascript:alert()”>ok</di v>
    • EmbeddingNota sugli sprites CSS:NON USATELI
    • Embedding<div style=“color:red”>ciao</div><div onclick=“javascript:alert()”>ok</di v>
    • Embedding
    • 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>
    • EmbeddingManipolazione DOM server side: – Jsoup in JAVA – Jquery in NodeJS –Querypath in PHP
    • Embedding 1 sola richiesta
    • Embedding<html><head></head><body></body></html>
    • EmbeddingSprites CSS background-position: -20px -30px
    • EmbeddingNota sugli sprites CSS:NON USATELI
    • EmbeddingSprites 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>
    • Embedding123
    • Embedding PRO CONTROOttimo per i first time users Non utilizzabile su elementi dinamici (o forse no?)Riduzione numero di richieste No cacheDistinguere tra file fissi e dinamici No CDNPensare bene a cosa poter caricare dopo Non è consigliabile embeddare troppi fileper snellire la pagina creando pagine complete >100KB La cache de browser è cancellata su iPhone 4 (e precedenti) quando spento
    • Velocità di downloadQuale libreria Minification YUI compressor Gzip Compression Documentazione del server!!! Embedding 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 Aggiornamenti totali1
    • Architetture lato client12 Aggiornamenti parziali
    • Architetture lato client 1history.pushState(null,null,path) 2
    • Architetture lato clienthistory.pushState(null,null,path) 2.2 4
    • Architetture lato clienthistory.pushState(null,null,path) 2.2 4
    • Velocità comunicazione Architetture Aggiornamenti parziali (history.pushState) Server+DB Websocket / SPDY
    • Server + DBE’ 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 Server12
    • Server + DB Server + DB Client Comunicazione Server12
    • 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 secondohttp://zgadzaj.com/benchmarking-nodejs-basic-performance-tests-against-apache-php
    • Server + DBhttp://vertxproject.wordpress.com/2012/05/09/vert-x-vs-node-js-simple-http-benchmarks/
    • Server + DBhttp://vertxproject.wordpress.com/2012/05/09/vert-x-vs-node-js-simple-http-benchmarks/
    • Server + DB Apache NodeJs Vert.x
    • Server + DB
    • Server + DBDB:• NoSQL• MySQL on the cloudhttp://kkovacs.eu/cassandra-vs-mongodb-vs-couchdb-vs-redis
    • Velocità comunicazione Architetture Aggiornamenti parziali (history.pushState) Server+DB Vert.x + MongoDB Websocket / SPDY
    • 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/atmospherehttp://dev.chromium.org/spdyhttps://developers.google.com/speed/pagespeed
    • Web Sockets 2.2 4
    • Web Sockets 2.2 4
    • Velocità comunicazione Architetture Aggiornamenti parziali (history.pushState) Server+DB Vert.x + MongoDB Websocket / SPDY AtmosphereJS
    • App HTML5 superveloci Velocità di download Velocità di comunicazione client/server Velocità hardware Considerazioni generali Oltre il codice
    • Velocità hardwareVogliamo superare le prestazioni di un’app nativa
    • Velocità hardware Perché Animazioni Canvas
    • Velocità hardwareSe 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;leftbackground-position-left
    • Velocità hardware Perché .animate è troppo lento Animazioni Usate le transition3d CSS3 Canvas
    • Canvas Particle test fpshttp://www.codefessions.com/2012/03/how-fast-is-html5-canvas-part-2.html
    • Canvas Particle test fpshttp://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 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 5http://www.html5rocks.com/en/tutorials/canvas/performance/
    • Velocità hardware Perché .animate è troppo lento Animazioni Usate le transition3d CSS3 Canvas Ha prestazioni paragonabili a OpenGL
    • App HTML5 superveloci Velocità di download Velocità di comunicazione client/server Velocità hardware Considerazioni generali Oltre il codice
    • 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 – Dont 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 graficavar worker = new Worker(“async.js")worker.postMessage(“message")worker.onmessage = function(event) {… event.data …}worker.terminate()
    • 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
    • Oltre il codicePerché progettare app HTML5 superveloci?
    • Oltre il codice
    • Oltre il codice
    • Oltre il codice
    • Oltre il codice
    • Oltre il codice
    • Oltre il codiceUserExperience
    • Oltre il codiceUser 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
    • App HTML5 superveloci Velocità di download Velocità di comunicazione client/server Velocità hardware Considerazioni generali Oltre il codice
    • Misurare la velocità Chrome Web Tools Chrome Page Speed https://developers.google.com/speed/pagespeed/ Chrome FPS Counter about:flagAdobe Edge InspectJavascript
    • Altrohttps://developers.google.com/speed/http://mobile.smashingmagazine.com/2012/07/12/elements-mobile-user-experience/
    • Grazie stiamo cercando dev e designer linkedin.com/in/salvatoreromeo twitter.com/romeosalv