events/2006-03-21-mix06-microformats

2008-12-20T00:39:10Z

ChideLchit: liboeroud

bocgetdron
= Microformats discussions at Mix06 =

March 21st, 2006

== Lessons from the Trenches ==

"Lessons from the Trenches: Engineering Great AJAX Experiences"

11am-12:15pm

Presenter: [http://spaces.msn.com/siteexperts/ Scott Isaacs]

Slides: [http://www.weblogging.com/decks/lessons.ppt 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

Microformats Wiki - User contributions [en]

events/2006-03-21-mix06-microformats