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