events/2006-03-21-mix06-microformats

Microformats discussions at Mix06

March 21st, 2006

Lessons from the Trenches

11am-12:15pm

[Isaa]

Notes/Quotes:

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*

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)