Applicazioni HTML5 Superveloci - Salvatore Romeo

1,249 views

Published on

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

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,249
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
6
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Applicazioni HTML5 Superveloci - Salvatore Romeo

  1. 1. App HTML5 superveloci
  2. 2. HTML5 Italyhttp://www.meetup.com/HTML5-Italy/ … prossimamente a Milano
  3. 3. Di cosa parleremo ?
  4. 4. Di cosa parleremo
  5. 5. 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
  6. 6. App HTML5 supervelociRiusciamo a convincere Zuck a tornare sui suoi passi?
  7. 7. Sommario Velocità di download Velocità di comunicazione client/server Velocità hardware Considerazioni generali Oltre il codice
  8. 8. Velocità di download Quale libreria Minification Gzip Compression Embedding
  9. 9. App HTML5 supervelociEsiste una libreria utile come jQuery, ma molto più performante?
  10. 10. Quale libreria Lib di base Lib grafiche … …
  11. 11. Quale libreria 252KB (32KB) 47KB (8.4KB) 86KB (6KB)http://www.codefessions.com/2012/08/performance-of-jquery-compatible-mobile.html
  12. 12. Quale libreriahttp://www.codefessions.com/2012/08/performance-of-jquery-compatible-mobile.html
  13. 13. Quale libreriahttp://www.codefessions.com/2012/08/performance-of-jquery-compatible-mobile.html
  14. 14. Quale libreriahttp://www.codefessions.com/2012/08/performance-of-jquery-compatible-mobile.html
  15. 15. Quale libreriahttp://www.codefessions.com/2012/08/performance-of-jquery-compatible-mobile.html
  16. 16. Quale libreriahttp://www.codefessions.com/2012/08/performance-of-jquery-compatible-mobile.html
  17. 17. Quale libreriahttp://www.codefessions.com/2012/08/performance-of-jquery-compatible-mobile.html
  18. 18. Velocità di downloadQuale libreria MinificationGzip Compression Embedding
  19. 19. Minification + GzipRiusciamo a comprimere i file del 90%?
  20. 20. Minification + GZip1. Rimuovere ciò che non serve (JS e CSS)2. Offuscare il codice (obfuscation, JS)
  21. 21. Minification + GZipFile ridotti in media al originale minified 25%
  22. 22. Minification + GZipLibrerie per javascript:• JSMin• YUI compressor• Closure compilerLibrerie per i CSS:• YUI compressor• SimpLess
  23. 23. Minification + GZipFile ridotti in media al originale minified 12% gzipped
  24. 24. Velocità di downloadQuale libreria Minification YUI compressor Gzip Compression Documentazione del server!!! Embedding
  25. 25. Embedding• Asymmetric internet connections• HTTP over TCP/IPv4 overhead• Latenza significativa su connessioni mobile
  26. 26. Embedding Upload:Download 1:20 500bytes up ≈ 10kB down + 1.5KB a richiesta HTTP
  27. 27. EmbeddingOne shot apps: tutta l’app in una solarichiesta http!
  28. 28. Embedding<div style=“color:red”>ciao</div><div onclick=“javascript:alert()”>ok</di v>
  29. 29. EmbeddingNota sugli sprites CSS:NON USATELI
  30. 30. Embedding<div style=“color:red”>ciao</div><div onclick=“javascript:alert()”>ok</di v>
  31. 31. Embedding
  32. 32. Embedding<html> <script src=“file.js”></script><head> <link rel=“stylesheet” “file.css” /></head><body></body></html>
  33. 33. 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>
  34. 34. EmbeddingManipolazione DOM server side: – Jsoup in JAVA – Jquery in NodeJS –Querypath in PHP
  35. 35. Embedding 1 sola richiesta
  36. 36. Embedding<html><head></head><body></body></html>
  37. 37. EmbeddingSprites CSS background-position: -20px -30px
  38. 38. EmbeddingNota sugli sprites CSS:NON USATELI
  39. 39. EmbeddingSprites CSS background-position: -20px -30px
  40. 40. Embedding<html><head> Base64</head><body></body></html>
  41. 41. 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>
  42. 42. Embedding123
  43. 43. 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
  44. 44. Velocità di downloadQuale libreria Minification YUI compressor Gzip Compression Documentazione del server!!! Embedding Jsoup per Java, Jquery per NodeJs
  45. 45. App HTML5 superveloci Velocità di download Velocità di comunicazione client/server Velocità hardware Considerazioni generali Oltre il codice
  46. 46. Velocità comunicazione Architetture Server+DB Websocket / SPDY
  47. 47. Architetture lato client Aggiornamenti totali1
  48. 48. Architetture lato client12 Aggiornamenti parziali
  49. 49. Architetture lato client 1history.pushState(null,null,path) 2
  50. 50. Architetture lato clienthistory.pushState(null,null,path) 2.2 4
  51. 51. Architetture lato clienthistory.pushState(null,null,path) 2.2 4
  52. 52. Velocità comunicazione Architetture Aggiornamenti parziali (history.pushState) Server+DB Websocket / SPDY
  53. 53. Server + DBE’ arrivato il momento di mandare in pensione Apache + MySql
  54. 54. Server + DB Server + DB
  55. 55. Server + DB Server + DB Client Comunicazione Server
  56. 56. Server + DB Server + DB Client Comunicazione Server Tempo di elaborazione server + DB
  57. 57. Server + DB Server + DB Client Comunicazione Server12
  58. 58. Server + DB Server + DB Client Comunicazione Server12
  59. 59. Server + DB• Un server che non allochi un thread per ogni utente
  60. 60. 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
  61. 61. Server + DB<p>Hello World</p>
  62. 62. Server + DB<p>Hello World</p> 1000000 richieste, 20000 concorrenti Richieste fallite
  63. 63. Server + DB <p>Hello World</p> 1000000 richieste, 20000 concorrenti Richieste al secondohttp://zgadzaj.com/benchmarking-nodejs-basic-performance-tests-against-apache-php
  64. 64. Server + DBhttp://vertxproject.wordpress.com/2012/05/09/vert-x-vs-node-js-simple-http-benchmarks/
  65. 65. Server + DBhttp://vertxproject.wordpress.com/2012/05/09/vert-x-vs-node-js-simple-http-benchmarks/
  66. 66. Server + DB Apache NodeJs Vert.x
  67. 67. Server + DB
  68. 68. Server + DBDB:• NoSQL• MySQL on the cloudhttp://kkovacs.eu/cassandra-vs-mongodb-vs-couchdb-vs-redis
  69. 69. Velocità comunicazione Architetture Aggiornamenti parziali (history.pushState) Server+DB Vert.x + MongoDB Websocket / SPDY
  70. 70. 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
  71. 71. WebSockets / SPDY• Non utilizzateli ‘nativamente’, ma fate riferimento a librerie che li utilizzano se possibile, altrimenti si servono del classico Ajax
  72. 72. 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
  73. 73. Web Sockets 2.2 4
  74. 74. Web Sockets 2.2 4
  75. 75. Velocità comunicazione Architetture Aggiornamenti parziali (history.pushState) Server+DB Vert.x + MongoDB Websocket / SPDY AtmosphereJS
  76. 76. App HTML5 superveloci Velocità di download Velocità di comunicazione client/server Velocità hardware Considerazioni generali Oltre il codice
  77. 77. Velocità hardwareVogliamo superare le prestazioni di un’app nativa
  78. 78. Velocità hardware Perché Animazioni Canvas
  79. 79. Velocità hardwareSe usate animazioni ed effetti grafici, anche di minima entità, un processore mobile ne risente. setInterval animate
  80. 80. Velocità hardware Perché .animate è troppo lento Animazioni Canvas
  81. 81. Animazioni hardware-webkit-transform: translate3d(0, 0, 0);-webkit-transition: ALL 0.3s ease-out;
  82. 82. Animazioni hardware-webkit-transform: translate3d(0, 0, 0);-webkit-transition: ALL 0.3s ease-out;leftbackground-position-left
  83. 83. Velocità hardware Perché .animate è troppo lento Animazioni Usate le transition3d CSS3 Canvas
  84. 84. Canvas Particle test fpshttp://www.codefessions.com/2012/03/how-fast-is-html5-canvas-part-2.html
  85. 85. Canvas Particle test fpshttp://www.codefessions.com/2012/03/how-fast-is-html5-canvas-part-2.html
  86. 86. Canvas Pre-rendering:context.drawImage(m_canvas, 0, 0) context m_canvas
  87. 87. Canvas Android 2.3 Android 4 Chrome Mobile 16 iPhone 4 iPhone 5
  88. 88. Canvas Partial rendering:context.fillRect(0, 0, canvas.width, canvas.height);
  89. 89. Canvas Android 2.3 Android 4 Chrome Mobile 16 iPhone 4 iPhone 5
  90. 90. 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
  91. 91. Canvas Android 2.3 Android 4 iPhone 4 iPhone 5http://www.html5rocks.com/en/tutorials/canvas/performance/
  92. 92. Velocità hardware Perché .animate è troppo lento Animazioni Usate le transition3d CSS3 Canvas Ha prestazioni paragonabili a OpenGL
  93. 93. App HTML5 superveloci Velocità di download Velocità di comunicazione client/server Velocità hardware Considerazioni generali Oltre il codice
  94. 94. Considerazioni generali Responsive layouts: immagini Richieste statiche Manipolazione DOM Pre-load e Post-load Web Workers
  95. 95. Responsive layouts• Immagini fisse• Immagini di contenuto• Le giuste immagini per il device – 2x (high density devices) – 1x – Thumbs – Dont Scale Images in HTML
  96. 96. 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
  97. 97. 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
  98. 98. Post-load & Pre-load Elementi non subito necessari Elementi necessari tra poco
  99. 99. 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()
  100. 100. Web Workers 2.2 4
  101. 101. Web Workers 2.2 4
  102. 102. App HTML5 superveloci Velocità di download Velocità di comunicazione client/server Velocità hardware Considerazioni generali Oltre il codice
  103. 103. Oltre il codicePerché progettare app HTML5 superveloci?
  104. 104. Oltre il codice
  105. 105. Oltre il codice
  106. 106. Oltre il codice
  107. 107. Oltre il codice
  108. 108. Oltre il codice
  109. 109. Oltre il codiceUserExperience
  110. 110. Oltre il codiceUser Experience Chi userà l’app Dove userà l’app Come userà l’app Quando userà l’app Perché userà l’app
  111. 111. Oltre il codiceEs: loading piuttosto che niente
  112. 112. Oltre il codiceEs: loading piuttosto che niente
  113. 113. App HTML5 superveloci Velocità di download Velocità di comunicazione client/server Velocità hardware Considerazioni generali Oltre il codice
  114. 114. Misurare la velocità Chrome Web Tools Chrome Page Speed https://developers.google.com/speed/pagespeed/ Chrome FPS Counter about:flagAdobe Edge InspectJavascript
  115. 115. Altrohttps://developers.google.com/speed/http://mobile.smashingmagazine.com/2012/07/12/elements-mobile-user-experience/
  116. 116. Grazie stiamo cercando dev e designer linkedin.com/in/salvatoreromeo twitter.com/romeosalv

×