• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
ajaxworld-yvyvy.ppt
 

ajaxworld-yvyvy.ppt

on

  • 634 views

 

Statistics

Views

Total Views
634
Views on SlideShare
634
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

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

    ajaxworld-yvyvy.ppt ajaxworld-yvyvy.ppt Presentation Transcript

    • Y! v. Y! v. Y! Three Yahoo! Case Studies Across the Page—Application Spectrum, One Size Does Not Fit All Nate Koechley – [email_address] | http://nate.koechley.com/blog AJAXWorld Conference & Expo, October 2 nd – 4 th , 2006
    • Nate Koechley
    • It’s Pronounced “Kek’lee”
    • Hello, World
      • Nate Koechley
        • At Yahoo! since 2001
        • Charter member of Web Development team
        • On Yahoo! User Interface Library (YUI) team
      • Three roles:
        • Senior Frontend Engineer
        • Technical Evangelist
        • Design Liaison
    • The DHTML Universe by Dojo’s Alex Russell (work in progress) http://alex.dojotoolkit.org/ DHTML _ universe .pdf
    • 1 2345678
    • 1 2 345678
    • 12 3 45678
    • 123 4 5678
    • 1234 5 678
    • 12345 6 78
    • 123456 7 8
    • 1234567 8
    • A Great Community at Yahoo!
    • Praise Them, Blame Me
    • You?
    • OK then, a quick history:
    • 1994 A bit of evolution over the years…
    • 1994 1995 A bit of evolution over the years…
    • 1994 1995 1997 A bit of evolution over the years…
    • 1994 1995 1997 2000 A bit of evolution over the years…
    • 1994 1995 1997 2000 2002 A bit of evolution over the years…
    • 1994 1995 1997 2000 2002 2004 A bit of evolution over the years…
    • 1994 1995 1997 2000 2002 2004 … into the page that today welcomes 188m users every month, 5.2 billion times A bit of evolution over the years… Source: Comscore, Feb. 2006
    • The New Yahoo! Home Page Video: http://nate.koechley.com/talks/20061003_ajaxworld/fp_2.avi
    • It is immensely telling that the new Yahoo! homepage is a DHTML homepage.
    • “ Getting It Right The Second Time”
    • Three Case Studies
    • Case Study 1:
      • History
        • From scratch
        • Freshest development effort to be released
      • Massive Scale
        • 5.2 billion views per month
        • 188 million unique users
      • Major DHMTL and Ajax Implementation
    • Case Study 1: Yahoo! Home Page Preview Video: http://nate.koechley.com/talks/ 20061003_ajaxworld /fp_2.avi
    • Case Study 2:
      • History
        • From scratch
        • Long development timeline
      • Massive Scale
        • 30 million unique users
        • 2 billion photos
      • Major DHTML and Ajax Implementation
    • Case Study 2: Yahoo! Photos Beta Video: http://nate.koechley.com/talks/ 20061003_ajaxworld /photos3_2.avi
    • Case Study 3:
      • History
        • Beta release about 1.25 years ago
        • Legacy-ish, was Oddpost.com
        • Oddpost development began in 1999
      • Massive Scale
        • World’s largest email provider
        • Available in 21 languages
      • Preeminent DHTML and Ajax Application
    • Case Study 3: Yahoo! Mail Beta Video: http://nate.koechley.com/talks/ 20061003_ajaxworld /mail_1.avi
    • do not worry – not a product pitch
    • Common Goals:
    • Common Goals: 1) Performance (x3)
    • Common Goals: 1) Performance 2) Interactivity
    • Common Goals: 1) Performance 2) Interactivity 3) Stay true to our beliefs
    • Common Approaches:
    • The Basics No No No Absolute Pos Yes Yes Yes Compression Yes No No Obfuscation Yes Yes Yes Minimization Yes Yes Yes Keyboard No Yes Yes Font-size Responsive Yes Yes Yes CSS Sprites Quirks Strict Strict Render Mode None XHTML 1.0 Strict HTML 4.01 Strict Doctype
    • From Documents to Applications
    • Page—Application Spectrum
      • Historically Web
      • Shallow Interaction
      • Simple Idioms
      • For Consumption
      • Markup + Skin
      • Sequential Nav
      • Passive
      • Historically Desktop
      • Deep Interaction
      • Powerful Idioms
      • For Productivity
      • JS, DHTML, Ajax, DOM
      • Self Contained
      • Active
      Application Page
    • Page—Application Spectrum Application Page
    • Looking Across the Spectrum
      • Tracking Events
      • Memory Management
      • Delivering JS and CSS
      • Data Format
      • Pagination
      • Browser Support
    • Looking Across the Spectrum: Tracking Events
      • Tracking Events
      • Memory Management
      • Delivering JS and CSS
      • Data Format
      • Pagination
      • Browser Support
    • From Page-Granular to Event-Granular Interfaces
    • Tracking Events: Event Utilities
      • Don’t piss off the DOM Scripting Task Force
        • No JS in attribute space / markup!
      • Watch out for memory leaks!!! (yes, three !’s)
      • Many great utilities
        • YUI Event Utility
        • Dojo
        • Scott Andrew
        • many more…
    • Tracking Events: Event Attachment Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts
    • Browsers die when there are too many (objects + listeners)
    • Tracking Events: Lots and lots
      • Objects can have many events:
        • Multiple keyboard listeners
        • Down+drag
        • Down+key
        • Down+doubleclick
        • Down+click+key
        • More…
      • Multiple by countless number of objects!
    • Tracking Events: Event Delegation Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts Obj +evnts
    • Tracking Events: Event Delegation Obj Obj Obj Obj Obj Obj Obj Obj Obj Obj Obj Obj
    • Tracking Events: Event Delegation Obj Obj Obj Obj Obj Obj Obj Obj Obj Obj Obj Obj Event
    • More on “Delegation”
      • Addressing Object Count
        • Listen to document.onmousedown (native)
        • Note which event.target (native)
      • Addressing Handler Count
        • Then delegate and attach the handlers you need, just in time.
    • Event Delegation Example:
      • Mousedown in vicinity of thumbnail
        • If on <img>
          • If MouseMove
            • Assign Drag and Drop
        • If on whitespace
          • If MouseMove
            • Assign Selection Rectangle
    • Event Delegation Example:
      • Is the click on a photo thumbnail?
      • If so, delegate to its related Javascript controller object eg: photoItems[this.index].mousedown();
      • Where &quot;this&quot; is the thumbnail <img> clicked, via event.target/srcElement etc.
    • Tracking Events: Event Delegation Obj Obj Obj Obj Obj Obj Obj Obj Obj Obj Obj Obj Event
    • Tracking Events: Details
      • Few Objects with Simple Handlers
      • Event Attachment
      • Many Objects w/ Multiple Handlers
      • Event Delegation
      • Many Objects w/ Multiple Handlers
      • Event Delegation
      Application Page
    • Looking Across the Spectrum: Memory Management
      • Tracking Events
      • Memory Management
      • Delivering JS and CSS
      • Data Format
      • Pagination
      • Browser Support
    • Memory Management
      • With extensive DOM and JS work, there’s the potential for things to get out of hand.
      • Goals:
        • Don’t leak memory
          • Also, keep overall memory footprint small
        • Offer a quickly-responsive interface
        • Stability
    • Memory Management: General Best Practices
      • For each constructor have a destructor
        • Create Objects
        • Unhook
        • Remove Handlers
        • Remove References
    • Memory Management: Three Approaches
      • Destruction (general best practice)
      • Conservation (niche)
      • Recycling (niche)
    • Memory Management: Details
      • Conservation
      • Destruction
      • Destruction, but…
        • Recycle iframes (about:blank)
      Application Page
    • Memory Management Tip:
      • Measure and Test
        • Drip is a great tool
        • Test extreme object counts
        • Test long interactions
        • Test extensive navigation
    • Looking Across the Spectrum: Delivering JS and CSS
      • Tracking Events
      • Memory Management
      • Delivering JS and CSS
      • Data Format
      • Pagination
      • Browser Support
    • Delivering JS and CSS: General Best Practices
      • A single large file loads fastest.
        • HTTP requests are the nemesis of a well-tuned site.
        • Build process is, therefore, very important.
      • CSS files as close to the top as possible.
      • JS files as close to </body> as possible.
    • Delivering JS and CSS: Three Other Approaches
      • 1) Many small files at once
        • Enables atomic/team development
        • Enables partial caching if parts change
    • Delivering JS and CSS: Three Other Approaches
      • 2) Many small files on demand
        • Some demanded functionality may be subtly slower
        • Allows tuning in response to use cases and task analysis
    • Delivering JS and CSS: Three Other Approaches
      • 3) Inline in the <head>
        • Caching is not as effective as we imagine, especially on pages set as browser’s default home page.
    • Delivering CSS and JS: Details
      • Many smaller files, on demand. Some inline.
      • Every feature not used every time. Content is key.
      • Uber file of interface JS/CSS. Pay once.
      • Objects/data on demand
      • Single File (anti-example)
      • Functionality is key. Highly interconnected.
      Application Page
    • Looking Across the Spectrum: Data Format
      • Tracking Events
      • Memory Management
      • Delivering JS and CSS
      • Data Format
      • Pagination
      • Browser Support
    • Data Format: General Best Practice
      • Use JSON for data interchange
        • Natively understood
        • “ The fat-free alternative to XML”
      • http://www.json.org
        • Tools in every known programming language
    • Data Format: Other Approaches
      • Somebody is going to have to pay the CPU price to render the View
        • Faster to pass a string that expresses a DOM state directly than trying to parse and create on the fly.
        • Consider client and server in tandem when making architectural choices
      • Parsing XML degrades performance greater-than-linearly as XML size increases.
    • Data Format: Details “ JSON rocks” “ We want to move to JSON” “ We’re using some JSON, and will be much more soon” Recognize strengths of client and server Application Page
    • Looking Across the Spectrum: Pagination
      • Tracking Events
      • Memory Management
      • Delivering JS and CSS
      • Data Format
      • Pagination
      • Browser Support
    • “ Ajax is awesome!! Hmmm, I know: we can do pagination without refreshing the page!! Sweet, we’re so totally Web 2.0 now!!”
    • c ould != should
    • Pagination: Details
      • Single page, so basically not applicable.
      • Some Ajax pagination in Personal Assistant module
      • Heavy Objects
      • Ajax Pagination; No refresh but new collection.
      • Light Objects
      • Endless-scrolling (and clever caching)
      Application Page
    • Looking Across the Spectrum: Browser Support
      • Tracking Events
      • Memory Management
      • Delivering JS and CSS
      • Data Format
      • Pagination
      • Browser Support
    • Which browser to support?
    • http://developer.yahoo.com/yui/articles/gbs/gbs.html
    • Graded Browser Support: Two Key Ideas
      • 1) Support does not mean “the same”
        • “ Expecting two users using different browser software to have an identical experience fails to embrace or acknowledge the heterogeneous essence of the Web.”
      • 2) Support must not be binary!
    • Graded Browser Support: General Best Practice
      • 3 Grades of Browser Support
          • C -grade support (core support, 2%)
          • A -grade support (advanced support, 97%)
          • X -grade support (the X-Factor, 1%)
    • http://developer.yahoo.com/yui/articles/gbs/gbs.html
    • A bit about browser stats…
    • A bit about browser stats…
      • More 5.0 than 5.5;
        • We consider 5.0 C-Grade
      • Note by-country skews
      • Note by-content skews
      • IE7 already moved the needle
        • Historically, SP2 rollout out very quickly
    • Browser as Development Environment?
    • Browser Support: Summary
      • Still a huge pain in the ass.
        • The Web is the most hostile software engineering environment imaginable.
        • (Douglas Crockford)
      • Same answer for everybody.
        • Develop to standards, then patch.
      • Maintain discipline in the face of heterogeneity.
    • The price is always higher to say “no” to Safari and Opera
    • Browser Support: Details
      • GBS A-grade
      • Developed in Gecko
      • GBS A-grade
      • Developed in Gecko
      • IE and FF
      • Developed in IE, then built IE-emulation layer.
      Application Page
    • We're in this for the long haul.
    • Quality is OUR job. Be belligerent.
    • Today’s bad decisions will be tomorrow’s constraints
    • Thank you. Questions?
      • Nate Koechley
        • [email_address]
          • http://developer.yahoo.com/yui
          • http:// yuiblog.com
        • [email_address]
          • http://nate.koechley.com/blog
      • This presentation is available at http://nate.koechley.com/talks/