AJAX WEB 2.0

Document Sample
AJAX WEB 2.0 Powered By Docstoc
					AJAX & WEB 2.0
… and some fun with web services

    Kevin Henrikson
     KevinH@zimbra.com
Quick Introduction

Who am I?
   Director at Zimbra
    - OSS AJAX UI, email, contacts, calendar, and more
   Zimbra Community Ring Leader
    - Zimbra Forums, Developer Support, OSS outreach


What is a large AJAX app?
 Lines of code? Total size?
 Number of users?
 Does it really matter?
                               AJAX Optimization         2
The Plan

   3 C’s of AJAX optimization

   Tools of the trade

   Real World Examples

   Questions
                  AJAX Optimization   3
3 C’s of optimization

   Combine
     - merge images, JavaScript, and CSS
   Compress
     - strip comments, white space,
     - text compress using deflate or gzip
   Cache
     - browser cache (set proper headers)
     - application caching for reuse
                     AJAX Optimization       4
Combine – WHY?

   Reduces number of HTTP requests
    - connection limits per domain

   Critical for VSAT
     - high latency, decent bandwidth

   Easier to cache
     - multiuse images can be cached once
                      AJAX Optimization     5
Combine - Tools

   VSAT Simulator
     - for new problems
   Web Page Anaylzer
    www.websiteoptimization.com/services/analyze
   Good `ol command line
    - cat, pipe, sort, etc


                      AJAX Optimization            6
Combine – HOW?

   Concatenate Javascript and CSS
    - Order matters!
    - Jammer ANT task

   Merge images
    - java.awt
    - ImageMerge ANT task

                  AJAX Optimization   7
Combine - Images
         . ImgEnvelopeGray,. ImgEnvelopeGrayDis{
             background-image:url("/zimbra/img/loRes/mail.gif");
             background-position:0px 0px;
             background-repeat:no-repeat;
             width:16px; height:16px;
             overflow:hidden;
         }
         . ImgEnvelopeGrayDis{opacity:.3;filter:alpha(opacity=30);}

         . ImgMsgStatus,. ImgMsgStatusDis{
             background-image:url("/zimbra/img/loRes/mail.gif");
             background-position:0px 16px;
             background-repeat:no-repeat;
             width:16px; height:16px;
             overflow:hidden;
         }
         . ImgMsgStatusDis{ opacity:.3;filter:alpha(opacity=30);}


           AJAX Optimization                                8
Compress – WHY?

   Reduce the size on the wire
     - quicker download
     - better perceived performance

   Saves bandwidth
     - server bandwidth
     - remote user bandwidth

                   AJAX Optimization   9
Compress - HOW?

   JSMin - The JavaScript Minifier
     http://crockford.com/javascript/jsmin
   ShrinkSafe (Mozilla Rhino based)
     http://alex.dojotoolkit.org/shrinksafe
   mod_gzip or mod_deflate
     on-the-fly compression
     pay CPU cost on each request
   Commercial JavaScript Tools
     most not suited for today’s apps
                     AJAX Optimization        10
Compress - Example




          AJAX Optimization   11
Compress - ShrinkSafe
java -jar ../custom_rhino.jar -c MyClass.js > MyClass.rhino




                       AJAX Optimization             12
Compress - JSMin
jsmin < MyClass.js > MyClass.jsmin




                      AJAX Optimization   13
Optimize - netvibes.com

               Total Size ~350k
               ~45 images
               23 CSS includes
               85% JavaScript




          AJAX Optimization        14
Optimize - netvibes.com

   combine JavaScript files
   apply ShrinkSafe (25% reduction)
   gzip to compress (77% reduction)
   TOTAL: ~83% reduction




                     AJAX Optimization   15
Caching - WHY?

   Reduce requests for static content
     - fastest requests are never served


   Saves even more bandwidth
     - request may never see the network


                    AJAX Optimization      16
Caching - HOW?

   Tools
     - LiveHTTPHeaders Tamper Data
          http://tamperdata.mozdev.org/
   Add headers to HTTP responses
     - mod_rewrite
     - apache config
   Use caching proxies like squid

                    AJAX Optimization     17
Caching - digg.com




          AJAX Optimization   18
Where it all began…




          AJAX Optimization   19
digg.com - 9mo later…
   digg.com/
   + Expired, private, no-cache, gzipped
      things look ok so far




                   AJAX Optimization        20
digg.com - CSS & images


   +/- gzip for CSS, short cache (1hr)
   - images short cache (1hr)




                    AJAX Optimization     21
digg.com - JavaScript


   -- no gzip, short cache (1hr)
   + some files have been jsmin’d
   w/gzip
     37k -> 8k
   Overall
    199k -> 70k
                   AJAX Optimization   22
lala.com - Caching…




          AJAX Optimization   23
lala.com - Cache images

   ++ Unique URI’s, cached (~forever )




                  AJAX Optimization       24
lala.com - Cache JS

   ++ JS code gzipped and cached




                  AJAX Optimization   25
lala.com - Load time

   -- Too many files, starves HTTP conns




                   AJAX Optimization        26
What else?

   DOMContentLoaded (and friends)
    http://dean.edwards.name/weblog/2006/06/again/
   FireBug - web debugging evolved
    http://www.joehewitt.com/software/firebug/
   HTTPS (SSL) won’t cache anything
   Hidden <div> image pre-cache
    position:absolute;width:1px;height:1px;visibility:hidden;overflow:hidden;




                                  AJAX Optimization                         27
AJAX Optimization


    Questions?
Kevin Henrikson
 KevinH AT zimbra.com
                  AJAX Optimization   28