web 2.0 expo sf 2010
Post on 19-Oct-2014
706 views
DESCRIPTION
Presentazione interna al gruppo di lavoro. Argomenti: - State of the Internet Operating System - Web performance optimizationTRANSCRIPT
Web 2.0 Expo 2010 The power of platforms
Stefano Chiari
2
Sommario
Lo stato del Sistema Operativo Internetperchè non avere delle API al giorno d’oggi è come non avere un sito nel 2000
Web Performance OptimizationMotivazioni
10 previsioni sul futuro
Websocket
Terze parti (p3pc)
3
Introduzione
Un sistema operativo si occupa delle risorse locali di un pc, ma le attività odierne si avvalgono di risorse remote. E’ però riduttivo pensare al “sistema operativo di internet” solamente come un insieme di “risorse fisiche remote” (es: Amazon ecc.)Internet (ma non solo), rende disponibili alle applicazioni servizi, oltre che risorse: localizzazione (gps, wireless, ip, mappe), social network, search (non solo tradizionali, es: barcode), pagamenti
Lo stato del “sistema operativo internet”
4
I sottosistemi disponibili
SearchMediaComunicazioneIdentità e social networkPagamentiPubblicitàLocalizzazioneActivity StreamTimeImage & speech recognitionGov2.0
5
Search
Le websearch sono molto complesse e praticamente solo Google e MS hanno avuto successoEsiste spazio di mercato però in ricerche specializzate. Qualche esempio
Cddb o nuove ricerche audio (query by humming)C’è molto spazio di crescita per ricerche testuali (ebook) o su immagini o video
In generale, i programmatori avranno sempre più a che fare con chiamate remote e sempre meno con algoritmi e si potranno concentrare sull’applicazione vera e propria invece che sui dettagli implementativi, così come ad un certo punto non si sono più dovuti occupare dei dettagli delle interfacce grafiche sui pc.
6
Media
Come un classico sistema operativo fornisce accesso a risorse come dischi e file, nella “internet era”, il sistema deve offrire accesso a pagine web, video, documenti, foto, applicazioni. Tutte queste risorse hanno bisogno delle stesse tecnologieAutorizzazione e controllo sugli accessi per fornire preview piuttosto che accesso completo a risorse risevate o a pagamento (che piaccia o meno). L’adv non sarà più il primo modello di business. Caching & proximity (es: kamai)Analytics anche su media (e social media), oltre che sulle pagine web standard. Es: analisi sull’utilizzo di un videogioco, un ebook o quant’altro
7
Comunicazione
Con l’avvento del VoIP e del mondo mobile, si sta avvicinando la guerra fra internet e le telecomunicaizioni tradizionaliLa directory (l’elenco del telefono), sarà uno dei fronti più caldi: esisterà prima o poi un servizio integrato di ricerca di email e telefoni? Chi lo gestirà? “Emergerà” autonomamente dai social network e fornirà informazioni personali integrate?
8
Identità e social network
Facebook connect permette ad un applicazione di usare facebook come un proprio sottosistemaFb sta espandendo la quantità di dati esposti tramite connect: hanno capito la potenzialità di Fb come piattaforma oltre che come applicazioneOltre a fb, tweetter e similari, moltissimi dati “social” sono sepolti in applicazioni come Outlook, Sharepoint, Gmail, Google docs ecc.Piuttosto che cercare di copiare fb e tweeter, bisognerebbe concentrarsi su come integrare tutti questi dati fornendo Api per definire il concetto di “contatto” che assume significati differenti a seconda che sia un collega di lavoro, piuttosto che un item della rubrica del cellulare o un amico di fb o quant’altro. Chi per primo riuscirà in questo compito, avrà una posizione di mercato predominante
9
Pagamenti
Il telefonino diventerà il portafogli del futuro
Aziende come Apple potranno giocare un ruolo importante, gestendo già milioni di clienti
Pay pal è il leader attuale190 nazioni
24 valute
210M di account (81M attivi)
Comunità di sviluppatori molto viva: l’ultima “developer conference” ha avuto 2000 partecipanti.
10
Advertising
La pubblicità è stato il principale modello di business fino ad oggiL’ecommerce è destinato a crescere, soprattutto su mobileAd continuerà comunque giocare un ruolo importanteL’opportunità, ancora, è cominciare a fornire API per il delivering della pubblicità, pittosto che pubblicità stessa, come adesso. Chi comincerà a fornire servizi, piuttosto che prodotti (il singolo ad)?
11
Localizzazione
La sua vera dimensione è nel mobile (ovviamente)A differenza del tomtom, un cellulare dipende in tutto da servizi esterni, dal gps alle mappe a servizi come il nostro geoserverMa una volta che si va in rete, ci si può sbizzarrire nei modi in cui si può arricchire il dato della localizzazione: dal traffico real time ai ristoranti sulla strada programmata ecceteraLa localizzazione è probabilmente il sottosistema di internet in stato più avanzato verso la sua definizione in termini di API
12
Activity Stream
La versione virtuale della localizzazione è l’attenzione. Cosa si sta facendo in un determinato tempo?In un certo modo, le due informazioni si possono integrare e si assisterà ad una convergenza fra localizzazione e social media. Il primo che riuscirà a intersecare i due concetti sarà in posizione avvantaggiata
13
Time
I calendar sono l’applicazione più ovvia
Activity stream sono però concetti organizzati in timeline e il tempo può essere, così come la localizzazione, un criterio di filtraggio
Gli aggiornamenti, sia per le aziende (es: stock di magazzino), sia per gli utenti (es: dove sono ora?), saranno sempre di più real time e la velocità sarà sempre pù importante
14
Image & speach recognition
I servizi di ricerca saranno sempre più pilotati da “sensori”. Un esempio: google goggles per android
Toolkit per il trattamento e ricerca di immagini o audio (query by humming), avranno un ruolo importante per gli sviluppatori
Il riconoscimento sarà sempre serverside e siti come picasa o flickr forniranno una base dati enorme di risorse taggate utilizzabili per il training degli algoritmi
15
Gov 2.0
Investimenti e dati pubblici sono sempre stati alla base di molte applicazioni di successo: gps, mappe, meteo, immagini satellitari
Le istituzioni non solo forniscono dati digitali, ma cominciano a riceverne dai cittadini: Open311 – set di API per la connessione ai servizi 311. Naturale evoluzione delle segnalazioni telefoniche o via mail
Le istituzioni stanno cominciando a pensarsi come “piattaforme” e una grande quantità di Api e di dati pubblici sarà presto disponibile per gli sviluppatori
Giocheranno un ruolo quindi sia come fornitori che come consumatori di dati
16
Il browser
Pensare al browser come al nuovo sistema operativo è miope: il “nuovo” sistema operativo tratta informazioni ed è per natura di tipo “cloud”
E’ però ovviamente un’applicazione critica, ecco perchè tutti se ne occupano e tutti contribuiscono (ad esempio), alle specifiche dell’HTML5
Sia che si abbia una visione di sistemi verticali fortemente integrati (Apple e Microsoft), oppure open source sul frontend (così sembra google), la tendenza di tutti è di sviluppare frontend che favoriscano i propri backend
17
C’è altro?
In un contesto di questo tipo, molto spazio si apre nella gestione dei dati (soprattutto personali), fra applicazioni
Il “sistema operativo”, dovrebbe forse gestire questi dati decidendone il tipo di accesso, la storia, la conversione di formato fra un’applicazione e l’altra?
Le possibilità, sono infinite.
Privacy e sicurezza, sono aspetti centrali
“The question is whether a single company will put together a single, vertically-integrated platform that is sufficiently compelling to developers to enable the kind of lock-in we saw during the personal computer era, or whether, Internet-style, we will instead see services from multiple providers horizontally integrated via open
standards.” [Tim O’Reilly]
18
Motivazioni
Web Performance Optimization
La velocità è una delle chiavi per il successo di un sito/applicazioneFirefox: velocizzare la landing page di 2 secondi ha significato aumentare del 15% i download (milioni in più)
Yahoo: un rallentamento di 400ms ha causato 5-9% di calo del traffico
Shopzilla: 16 mesi (!) di re-engineering hanno velocizzato il sito di 5 secondi ha aumentato il convertion rate del 7-12% e ridotto i costi di servizio
Dal 2009, la velocità è uno dei parametri che google usa per il page ranking, anche se (ancora?) di poco peso (1%)
Prove sperimentiali hanno mostrato come il tasso di abbandono di un sito (distinct queries, query refinements, click ecc), sia lineare rispetto al ritardo introdotto
Nonostante tutto, il tema è ancora "giovane" e il lavoro complesso, ma dopo il periodo d'oro del SEO, è arrivato il tempo del WPO
Prima conferenza a tema: Velocity 2009 (San Josè, CA)
Piccolo inciso: in Matrix, i requisiti marketing sono sempre stati focalizzati solo sul peso pagina, che è solo uno degli aspetti del problema
19
20
Previsioni per il futuro: 10) fast by default
Pattern e best practices saranno sempre più nativi nei linguaggi e nei framework
jquery 1.4 ha lavorato sulle performance riducendo la complessità interna e usando Google Closure Compiler per ridurre del 13% il peso del js
Nel 2009 anche su rails hanno lavorato sulle performance (slogan al velocity2009: making rails even faster by default)
21
Previsioni per il futuro: 10) fast by default
22
Previsioni per il futuro: 9) visibilità nei browser
Oltre a tool come Yslow, nasceranno nuovi tool per profilare tutte le fasi, compreso il rendering e l'esecuzione di js. Per anticipare il tema rispetto alla fase di test, saranno sempre più integrati con IDE e framework
Google speedtracer
Dynatrace
Entrambi profilano una pagina in modo completo: rendering del dom+css, esecuzione javascript e altro
23
Google Speed Tracer
\
Nativo nella Google Chrome Developer Channel
24
Dynatrace
Internet Explorer Plugin
25
Previsioni per il futuro: 8) consolidamento
Al momento, gli sforzi e i progetti riguardo le performance, sono sempre stati frammentari. In futuro, si vedranno comparire tool che combinano
Js debugging
Js profiling
Dom inspection
Analisi di rete
Nasceranno nuove metriche e metodologie e il tutto sarà integrato in tool sempre più ricchi
A livello di mercato, il consolidamento si avrà con l'assorbimento delle piccole aziende molto focalizzate sul tema da parte di grandi aziende di consulenza
26
Previsioni per il futuro: 7) TCP, HTTP
I protocolli di rete hanno bisogno di una svecchiata, soprattutto l'http:
Una connessione per richiesta
Comunicazione monodirezionale
Header ridondanti e non compressi (problema soprattutto per applicazioni ajax con comunicazione spinta, es: chat)
Due esempi di soluzione: SPDY, HTML5 WebSocket
27
SPDY
Esperimento pilota di Google, parte dei progetti Chromium
Layer aggiuntivo su cui si appoggia l'HTTP
Hanno creatoNuovo server SPDY enabled
Versione di modificata di Chrome
Benchmark sui 100 topsites fatti girare in laboratorioTempi di download delle risorse di un sito mediamente dimezzati
28
HTML5 Web Socket
Un nuovo protocollo (ws://), che i web/application server devono supportare (es: Jetty)
Un canale di comunicazione bidirezionale, molto simile alle tradizionali socket tcp
Un set di API javascript nei browser che supportano HTML5
Importanti per applicazioni fortemente ajax (giochi, Chat, flussi di borsa eccetera), che fanno moltissime request molto piccole per le quali gli header rappresentano la maggior parte del traffico. Con WebSocket si può tagliare tutto questo overhead
29
HTML5 Web Socket
Codice client var ws = new
WebSocket("ws://game.example.com:12010/updates");
ws.onopen = function () {
alert("Connection open ...");
}
ws.onclose = function () {
alert("Connection closed.");
}
ws.onmessage = function () {
alert("Received Message: " + evt.data);
}
30
HTML5 Web Socket
Codice server (java) public class WebSocketChatServlet extends WebSocketServlet{
protected void doGet(HttpServletRequest request, HttpServletResponse
response){
// gestione get standard
}
protected WebSocket
doWebSocketConnect(HttpServletRequest request,
String protocol){
return new ChatWebSocket();
}
}
31
Previsioni per il futuro: 6) Standard
Si definiranno nuovi standard per la misura delle performance
W3C: Web Timing Working (Draft giugno 2010)http://dev.w3.org/2006/webapi/WebTiming/
This specification defines an interface for web applications to access timing information related to navigation and elements.
Es: tipico codice attualevar start = new Date().getTime();
function onLoad() {
var now = new Date().getTime(); var latency = now - start; alert("page loading time: " + latency);
}
32
interface NavigationTiming { .... // timing generale sulla navigazione
readonly attribute unsigned longlong navigationStart;
readonly attribute unsigned longlong lastUnload;
…}
interface ResourceTiming { .... // timing relativo ad ogni risorsa caricata
readonly attribute unsigned longlong fetchStart;
readonly attribute unsigned longlong fetchEnd;
…}
function onLoad() {
var now = new Date().getTime();
var latency = now - performance.timing.navigationStart;
alert("User-perceived page loading time: " + latency);
}
Codice js che sfrutta le interfacce proposte
33
Previsioni per il futuro: 5) Organizzazione aziendale
Assisteremo alla nascita di nuove aziende o gruppi che forniranno certificazioni, training e proporranno nuovi standard e modelli di cooperazione.
Ad esempio, sta nascendo l'esigenza di condividere informazioni sul problema degli adv, colpevoli di gran parte della lentezza dei siti (questo in modo assolutamente informale e attraverso Souders stesso - via mail)
34
Previsioni per il futuro: 4) Disponibilità di dati
Il tema, richiede monitoring e analisi di molti esempi, per poter trovare nuovi pattern e soluzioni
IPA Internet Performance Archive?Così come http://www.archive.org mantiene lo storico di siti web e quant’altro, IPA dovrebbe mantenere anche informazioni relative al timing, in modo da avere dati ed esempi reali da analizzare
35
Previsioni per il futuro: 3) (go) green
Da non molto tempo si sta calcolando l'impronta ecologica del web e delle infrastrutture tecnologiche in generale
Il passo successivo sarà dato un proliferare di studi sulla correlazione tra performance e riduzione del consumo di energia e risorse, quindi dell'impronta complessiva
36
Previsioni per il futuro: 2) mobile
E’ un campo ancora inesplorato. Mancano completamente best practice, metriche eccetera. Ci sarà grande fermento
37
Previsioni per il futuro: 1) “mercato”
le performance saranno sempre più importanti sia per gli utenti che per i vendor – sia su web , che per i nuovi device
Scelta dei device da acquistare
Scelta di vendor/provider
Review di siti
Fedeltà degli utenti
38
P3PC: Performance of Third Party Content
Anche se gli addetti ai lavori spergiurano sul contrario, “Ads, widgets, and analytics are a major cause for slow web sites” (Steve Souders, Google)
Virgilio trabocca di codici di tracciamento e ads
Negli ultimi 5 anni, le pagine sono diventate mediamente più veloci, ma il peso medio di 3PC è passato da ¼ a quasi ½
39
main page
3rd party content
2005 2010
40
In generale, possono aiutare tecniche di loading “lazy” degli script e wrapping di widget e snippet in iframe
Cosa non sempre possibile per la presenza di document.write o del floating del widget - es: virgilio bottomtoolbar
Tag <FRAG> Proposto di recente (gennaio 2010, Velocity Summit: http://www.stevesouders.com/blog/2010/02/17/performance-of-3rd-party-content/)
I browser valuteranno il codice senza bloccare il rendering
A differenza dei nuovi iframe dell'HTML 5, questo tag “will degrade gracefully for older browsers”
41
Progetti vari
P3PC http://stevesouders.com/p3pc/index.php Is a project focused on analyzing the performance of 3rd party content. The goal Is to find the key wins to evangelize to make 3rd party content faster
Il sito permette di calcolare i tempi di download dei principali widget sul proprio browser
Browserscope http://www.browserscope.org/ Is a community-driven project for profiling web browsers
Esegue una serie di test standar sul browser con il quale si accede e assegna un punteggio. Pare che il top sia Chrome... a me, con chrome su linux, il sito è crashato :-D
Google Webmaster ToolsIl lab ha una funzionalità (sperimentale), di analisi delle prestazioni – plugin di firefox (nulla per chrome!) che però a me, sotto linux, non funziona :-)
http://www.webpagetest.org/ Test delle pagine e confronto con portali famosi – sarò sfortunato o troppo di nicchia, ma a me non funziona :-)
42
Web Performance avoids SPOF
Fino a 5 anni fa si pensava solamente ad ottimizzazioni server side
Da allora, si è scoperto che l'80% del tempo utente è “consumato” da elaborazioni client side e dal rendering delle risorse e spesso l’esperienza è degradata da single point of failure
Un esempio importante: tutti i browser (applicazioni single threaded), bloccano il rendering e il downloading (i browser moderni, almeno non il downloading), di quanto viene dopo un js esterno, mentre questo viene caricato. Diventa quindi un single point of failure (un esempio sul canale viaggi – widget esterno caricato in HP)
Per questo motivo il pattern più importante è probabilmente: “caricare tutti i js esterni in modo asincrono”
Nota: per anni abbiamo lottato con il peso pagina come unica specifica sulle performance
43
Caricamento asincrono di javascript
There are six main techniques for downloading scripts without blocking:
XHR Eval – Download the script via XHR and eval() the responseText.
XHR Injection – Download the script via XHR and inject it into the page by creating a script element and setting its text property to the responseText.
Script in Iframe – Wrap your script in an HTML page and download it as an iframe.
Script DOM Element – Create a script element and set its src property to the script’s URL.
Script Defer – Add the script tag’s defer attribute. This used to only work in IE, but is now in Firefox 3.1.
document.write Script Tag – Write the <script src=""> HTML into the page using document.write. This only loads script without blocking in IE
44
45
Link & credits
Tim O’Reilly
The State of the Internet Operating Systemhttp://radar.oreilly.com/2010/03/state-of-internet-operating-system.html
Web 2.0 Expo SF 2010: Tim O'Reilly, "State of the Internet Operating System”http://www.youtube.com/watch?v=hAau6W--iMo
Steve Souders, Google
http://www.stevesoudersstevesouders.com/blog/2010/05/07/wpo-web-performance-optimization/
High performance Web Sites (O’Reilly)
Even faster Web Sites (O’Reilly)
Peter Lubbers, Brian Albers (Kaazing)http://www.web2expo.com/webexsf2010/public/schedule/detail/12021