Web 2.0 Expo SF 2010
Upcoming SlideShare
Loading in...5
×
 

Web 2.0 Expo SF 2010

on

  • 662 views

Presentazione interna al gruppo di lavoro.

Presentazione interna al gruppo di lavoro.
Argomenti:
- State of the Internet Operating System
- Web performance optimization

Statistics

Views

Total Views
662
Views on SlideShare
660
Embed Views
2

Actions

Likes
0
Downloads
2
Comments
0

1 Embed 2

http://www.slideshare.net 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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

Web 2.0 Expo SF 2010 Web 2.0 Expo SF 2010 Presentation Transcript

  • Web 2.0 Expo 2010 The power of platforms Stefano Chiari
  • Sommario
    • Lo stato del Sistema Operativo Internet
      • perchè non avere delle API al giorno d’oggi è come non avere un sito nel 2000
    • Web Performance Optimization
      • Motivazioni
      • 10 previsioni sul futuro
      • Websocket
      • Terze parti (p3pc)
  • 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”
  • I sottosistemi disponibili
    • Search
    • Media
    • Comunicazione
    • Identità e social network
    • Pagamenti
    • Pubblicità
    • Localizzazione
    • Activity Stream
    • Time
    • Image & speech recognition
    • Gov2.0
  • Search
    • Le websearch sono molto complesse e praticamente solo Google e MS hanno avuto successo
    • Esiste 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.
  • 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 tecnologie
    • Autorizzazione 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
  • Comunicazione
    • Con l’avvento del VoIP e del mondo mobile, si sta avvicinando la guerra fra internet e le telecomunicaizioni tradizionali
    • La 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?
  • Identità e social network
    • Facebook connect permette ad un applicazione di usare facebook come un proprio sottosistema
    • Fb sta espandendo la quantità di dati esposti tramite connect: hanno capito la potenzialità di Fb come piattaforma oltre che come applicazione
    • Oltre 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
  • 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 attuale
      • 190 nazioni
      • 24 valute
      • 210M di account (81M attivi)
      • Comunità di sviluppatori molto viva: l’ultima “developer conference” ha avuto 2000 partecipanti.
  • Advertising
    • La pubblicità è stato il principale modello di business fino ad oggi
    • L’ecommerce è destinato a crescere, soprattutto su mobile
    • Ad continuerà comunque giocare un ruolo importante
    • L’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)?
  • 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 geoserver
    • Ma 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 eccetera
    • La localizzazione è probabilmente il sottosistema di internet in stato più avanzato verso la sua definizione in termini di API
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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]
  • Motivazioni
    • La velocità è una delle chiavi per il successo di un sito/applicazione
      • Firefox: 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
    Web Performance Optimization
  •  
  • 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 )
  • Previsioni per il futuro: 10) fast by default
  • 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
  • Google Speed Tracer Nativo nella Google Chrome Developer Channel
  • Dynatrace Internet Explorer Plugin
  • 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
  • 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
  • SPDY
    • Esperimento pilota di Google, parte dei progetti Chromium
    • Layer aggiuntivo su cui si appoggia l'HTTP
    • Hanno creato
      • Nuovo server SPDY enabled
      • Versione di modificata di Chrome
    • Benchmark sui 100 topsites fatti girare in laboratorio
      • Tempi di download delle risorse di un sito mediamente dimezzati
  • 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
  • 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);
    • }
  • 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();
    • }
    • }
  • 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 attuale
      • var start = new Date().getTime();
      • function onLoad() {
      • var now = new Date().getTime(); var latency = now - start; alert("page loading time: " + latency);
      • }
    • 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
  • 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)
  • 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
  • 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
  • Previsioni per il futuro: 2) mobile
    • E’ un campo ancora inesplorato. Mancano completamente best practice, metriche eccetera. Ci sarà grande fermento
  • 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
  • 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 ½
  • main page 3rd party content 2005 2010
    • 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”
  • 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 Tools
      • Il 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 :-)
  • 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
  • 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=&quot;&quot;> HTML into the page using document.write. This only loads script without blocking in IE
  •  
  • Link & credits
    • Tim O’Reilly
      • The State of the Internet Operating System http://radar.oreilly.com/2010/03/state-of-internet-operating-system.html
      • Web 2.0 Expo SF 2010: Tim O'Reilly, &quot;State of the Internet Operating System” http://www.youtube.com/watch?v=hAau6W--iMo
    • Steve Souders, Google
      • http://www. stevesouders .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