events/2006-03-21-mix06-microformats

From Microformats Wiki
Jump to navigation Jump to search

Microformats discussions at Mix06

March 21st, 2006

Lessons from the Trenches

"Lessons from the Trenches: Engineering Great AJAX Experiences"

11am-12:15pm

Presenter: Scott Isaacs

Slides: PowerPoint Document

Notes/Quotes:

  • taken by Tantek Çelik live at the event into #mix06 on irc.freenode.net
  • cleaned up and archived here by Dimitri Glazkov

Modern Development Patterns

  • Apply OO principles to web development
  • Shared methodology with Atlas
  • Namespaces, Encapsulation, Inheritance, Object Lifecycle
  • Separate semantics, presentation, and behavior

Live Clipboard Demo

  • "microformats are another key aspect of Web 2.0"*
  • hCard for contacts, start with class="vcard"
  • similarly use hCalendar for events
  • what Live Clipboard is a use of microformats for integrating your data
  • (starts demo)
  • starting with just the microformat -- "key part of the ecosystem for remixing the Web"
  • "I can basically say anything on the page that has class name vcard, I'm going to bind one of those Live Clipboard container objects to it"
  • "then I'm going to specify the resources to bind to it, ex: clipControl.js and .css"
  • dynamic recognition of microformats on the page
  • "any microformat on the page, I want to make copyable"
    • "I wanted to copy the hCalendar"
    • "I copied it from IE"
    • "I went to Firefox"
    • "and I pasted"
    • "and the event item shows up on a page viewed in Firefox"
    • "I can copy and paste this whereever I want"
    • "I can copy and paste from Eventful"
    • "I can do the same thing with other microformats on the page"
    • "I can copy a contact from the IE page ?and paste into that same page that I pasted the event"
  • "all the contacts in Hotmail will be hCard automatically remixable into the rest of the Web"
  • if you start building gadgets with microformats, we'll make them automatically remixable with other gadgets
  • start exploring using microformats in your web pages
  • we can start establishing an ecosystem of relevant data

XML Proxying And Scalability

Web Service Integration

  • Do not want to continually parse XML
  • we don't want to deal with SOAP envelopes on the client
  • instead, we build javascript proxies
  • Desire a more natural and efficient approach
  • Web Services generate JavaScript proxies: WeatherService.requestWeatherReport(strLocation,onReceipt)
  • Use generic format for transport (e.g., JSON)
  • Incoming requests marshaled to native server format and outgoing responses to client format
  • Use xmlHttpRequest to access the network, but the wire format is transparent to the application
  • Use raw XML for "documents" (e.g. RSS)
  • but parsing a several 100k document will take upwards of 400ms
  • and that is too long
  • user thinks browser has locked up
  • explore other approaches such as JSON to gain the most efficiences

efficiency

Optimizing the Network

  • AJAX-style applications can become very chatty

...

Be Wary Of Security

  • "could probably spend an hour on this one slide, but will try not to"
  • XSS is an industry challenge we all need to address more
  • as you start exposing services at the edge, XSS becomes a much bigger deal
  • e.g. Gmail, within 3 days, coders developed an API to use Gmail as a disk store
  • Define a standard UI feedback metaphor and stick to it
  • (missed slide)

Prioritizing Network Requests

  • AJAX Scenario
  • Your page is preloading images
  • User clicks "Buy It" from ...

Code/Resource Deveployment

  • More Interactivity = More Code = Slower Site (script are executed synchronously serially)
  • How do you build sites with lots of componenets
  • How do you build a "portal" where the user controls the scope of the application
  • How do you efficiently deploy the necessary code and resources?
  • Understand how the browser works
  • Scripts included on the page block and load one at a time
  • Large number of script blocks can greatly stall loading
  • System for deploying code
  • Patterns allow component resources to load in any order
  • Deployed code asynchronously leveraging all available connections
  • Prioritize the loading of components
  • Never expire static content (change the URL to break the cache)

X-Browser Development

  • Minimize browser specific code in the business logic
  • Abstract and centralize API differences
  • We extend Firefox and Opera DOM to be compatible with IE
  • CSS Differences - Avoid Hacks
  • We classify and override via standard selectors
  • HTML class="Mozilla M1 D5 Windows"
  • Body {margin:10px}
  • .Mozilla Body {margin:5px} /* Override Mozilla */
  • (hmm... this is quite clever and much more readable)
  • ... missed slide ...
  • demo of Scott's blog

Back Button And Addressability

  • Users expect the web to work (I love that line)
  • Demo: MSN Spaces, Windows Live
  • Travelog (History stack) is hard
  • Windows Live beta
  • back button works
  • you can change the hash of the URL [fragment identifier] without reloading the URL
  • and thus keep back button working

Accessibiliy

  • Web Accessibility is challenging
  • "Use HTML semantics appropriately"
  • (wow how far semantic HTML awareness has come in the past four years)
  • HTML Accessibility
  • Always use structural semantics to establish "role"
  • E.g., Hn, Label, TH (table headers), lists, etc.
  • (rather than nested DIVs)

Building Web Applications

...

Q&A

  • Q: What kills JavaScript perf is memory leaks in the browser
  • IE6 has some leaks
  • if you create a circular reference between a document object and a javascript object then it won't go away
  • Q: mashups with SSL
  • A: interesting challenge. the real question is how do we securely integrate in a way that is trusted by partners and customers? you have to go entirely HTTPS across the board
  • Q: are you familiar with the DOJO toolkit? it solves a lot of the problems memory leaks, back button
  • A: haven't looked too deeply at DOJO. we have a system where objects get created and destroyed all the time. not sure if they do document level garbage collection or what.
  • Q: about Atlas
  • A: ...
  • Q: about using AJAX to build a 24fps videogame
  • A: (heh)
  • Q: is there someway we could have a simple lean AJAX request?
  • A: ...
  • Q: what is wrong with using iframes?
  • A: 1. themes won't work with the iframe this is ASP.NET-specific reference --DimitriGlazkov
  • A: 2. iframes consume a lot of memory (read: Trident instance) on the order of 20 megabytes of memory (YIKES!)
  • A: 3. security