Andrew Dupont holder oplæg om, hvordan man skriver solid cross-browser kode ved hjælp af Prototype.

Debug tools er vigtige: De fleste af os koder i FireFox. Det virker og vi har Firebug. (Næsten alle i rummet bruger Firebug). Safari har Web Inspector og Drosera. (Næsten ingen i rummet bruger nogen af dem). Opera har Dragonfly, som er næsten ny.

Debug strategier i IE:

• “Formal” debugging
• Brug Javascript shell m/interaktiv prompt (jash)
• Stack traces via MS Script Debugger
• Alert debugging

Det viser sig, at IE er supersløv, når det kommer til store DOM operationer.

Selector/$$ er performancemæssig farlig ved store og/eller komplekse DOM-træer.

Skal man så ikke bruge Prototype?. Jo, men bryd ud af abstraktionen, når omkostningen bliver for høj.

Memory leaks: Frameworks kan hjælpe lidt, men det er stadig udviklerens problem.

Muligt leak-pattern: Element.replace/update på indhold med tilknyttede listeners.

Joshua Fraser fra EventVue taler om, hvorfor man skal designe gode forms.

• Left aligned, left of field: 500 ms saccade
• Right aligned, left of field: 200 ms saccade
• Left aligned, above field: 50(!) ms saccade

Skræk-eksempel: LinkedIn søgningen. De spørger om postal code.

“Good forms show you what you need to see at the moment you need to see it”

“The conversion rate of a registration page is inversely correlated to the number of fields.” - Bill Flagg

Email-validation on-the-fly: Ikke alene regexp men ajax-request til MX lookup. Nice!

Automatisk creditcard detection via første ciffer (måske ikke så let i DK med Dankort etc)

Hjælp brugeren med at vælge profilbilleder ved at kigge efter brugeren på social network sites.

Point and click tag-clouds baseret på eksisterende tags (delicious)

CAPTCHAs. Grimt, introducerer enorm friktion og er nemt at bryde.

Google Toolbar auto-fill: ECML compliance

Brian Dilllard fra ReallySimpleHistory snakker om at imødekomme brugernes forventninger om, at browserens navigation virker som altid på en ajax-side.

Problemet: Asynkrone requests og DHTML-opdateringer af sider afspejles ikke i browserens navigation. Man kan heller ikke bookmarke en side på en fornuftig måde.

Dette problem opstår, fordi der ikke har været en fornuftig standard defineret for, hvordan man håndterer sidehistorik i browseren. Alle browsere følger en adhoc standard, der offentliggør window.history på client-side. Men Ajax knækker historikken ved, at URL’erne ikke ændrer sig ved dynamiske opdateringer.

Det kan man løse ved et hack, hvor man bruger side-hash’en til at indikere en sideændring.

Men selvfølgelig er der problemer med browser-bugs. Næsten alle browsere har bugs, der skal arbejdes omkring for at få hash-tricket til at virke.

IE8 implementerer HTML5 history specification og onHashChange event’en. Dette gør det noget lettere at implementere ajax-history. Nice!

En løsning på historik-problemet kan være at anvende ReallySimpleHistory.

Et problem kan være, at vi med teknikkerne i ReallySimpleHistory knækker en anden feature af HTML, nemlig anchor-tags. Dette vil desværre være tilfældet, indtil HTML5 history spec’en bliver udbredt.

John Resig demoer canvas-tagget, som er en del af HTML5-spec’en. Allerede nu er canvas dog implementeret i Firefox og Safari.

canvas har en mængde primitiver, som er netop det: Primitive. Ind kommer Processing, som er et sprog til at skabe grafiske fremstillinger med. Processing er Java-baseret. Men vi har ikke interesse i at køre applets på vores sider bare for at vise noget dynamisk grafik. Her kommer processing.js ind i billedet.

Cool trick: script-tags med custom-types:

<script type="application/processing">...javacode...</script>

Koden bliver herefter parset til javascript og udført i browseren

YUI software engineer Nicholas Zakas taler om TDD med YUI Test.

Han siger, at unit-tests bør ske på metode-niveau. Det er måske ikke helt det, han mener, da metode-niveau ikke er lavt nok til at opnå tilstrækkelig kodedækning.

God pointe: CLI-baserede Javascript test-frameworks overser bugs, der opstår p.gr.a browseren.

YUI Test har (simpel) event simulering! Nice.

Konklusion: YUI Test er en god kandidat til unit testing på client-side

Peter-Paul Koch snakker om browser-inkompatibiliteter.

Vi starter tilbage i 1996 med browser-krigen mellem Netscape og Explorer. Her var der tale om forsætlig inkompatibilitet. Browserne ville sparke hinanden ud af markedet.

“Users don’t care which browser they are using”

Uha: “Internet Explorer deserved to win the browser wars”. Pointen: IE5/Win var den første browser, der understøttede W3C.

• styleSheet.insertRule(…) ( IE: styleSheet.addRule(…) (+Opera og Webkit) )
• element.addEventListener(…) (IE: element.attachEvent(…) (+Opera) )
• range.startContainer, range.endContainer (IE: ikke muligt!)

“Minor browsers sometimes have to support major browsers’ proprietary stuff and copy their bugs“

“Sometimes browsers just don’t support stuff at all.”

“1% of Microsoft extensions is stunningly brilliant”

• IE tæller ikke tomme tekstnoder i markup’en
• mouseenter / mouseleave

Lang historie om browser detects og hvordan det i virkeligheden er “oldtidens” webudviklere, der er skyld i rodet.

Doing it right:

• Property meant for identification
• navigator.vendor (does not lie - yet)
• navigator.userAgent (detect minor browsers first)

PPK forudsigelse: “Chrome vil tage mest markedsandel fra FF”

Vi slutter med en god plenum-diskussion over emnet “Hvorfor har vi brug for mere end en browser?”

Her starter vi fra Adam og Evan med “Hvad er et objekt i Javascript”, “Hvad er en primitiv type” etc.

Lille ikke-så-kendt trick:
var boo = function bar(foo) {...};
>> boo.name = 'bar'

Nu begynder vi at kigge på objekter og constructors lidt mere i dybden. En god pointe er at bruge constructor literals som [] og {} i stedet for new Array() og new Object().

Prototype er et tomt objekt, der automatisk oprettes som property på nye objekter ved instantiering. Brug hasOwnProperty(..) for at opklare, om en given property tilhører objektet eller objektets prototype. Brug isPrototypeOf(..) for at finde sammenhæng mellem objekter.

Prototypen er delt mellem instanser. Derfor giver det god mening at deklarere funktioner i prototypen, da man så ikke bruger unødigt meget memory.

Nedarvning:
var Dad = function() { .... };
var Kid = function() { ... };
Kid.prototype = new Dad();

“There are no classes in Javascript!”

Nedarvning implementeres ved at modificere prototype-kæden.

Ingen block-scopes men function-scopes.

Alle variable er globale med mindre deklareret med var i en funktion.

“Lokal” variabel:

(function() {
    var a=1;
    var b=2;
    alert(a+b);
})();

Et noget jappet foredrag.

Microsoft viser den indbyggede developer toolbar i IE8. Den er ikke ligeså sej som Firebug, men det er et stort skridt fremad.

De viser også Microsoft Ajax Templates, som er et client-side templating library uafhængigt af ASP.NET. Det kan nogle ret søde tricks.

Stoyan Stephanov viser Smush.it, som er en image-optimizer fokuseret på performance. Kørt på Barrack Obamas kampagnesite spares der 335 KB!

Kevin Hoyt fra Adobe viser DreamWeaver 10 med effektiv JavaScript IntelliSense.

Greg Wilkins snakker om push af data fra serverside med Comet.

John Resig taler om Firebug. Hans introduktionsslide siger det hele: “Firebug is awesome!”. Work in progress: Unit test i Firebug.

Steve Sounders fra Google har tilfældigvis Smush.it på skærmen som det første. “The coolest thing so far”. Han viser “Episodes” - Timing Web Pages. URL

Bill Scott fra NetFlix viser deres nye API. Ikke så interessant for ikke-amerikanere.

Endnu en Googlelite Gavin Doughtie snakker om at identificere Javascript guruer ved interviews. Mange gode pointer omkring, hvor bredt en god Javascript-programmør skal favne.

Fransisco Tolmasky fra 280 Slides viser Objective J, et programmeringssprog baseret på Javascript. “Any valid line of Javascript is a valid line of Objective J”. Han viser også Cappuccino, som er det framework, 280 Slides er bygget på.

Næste tale på podiet er ShiftSpace.org, som er et browser-plugin til Firefox bygget på GreaseMonkey og MooTools. Interessant, men er det brugbart?

Joshua Harrison viser Milescript, der er (endnu) et programmeringssprog, der kompilerer til Javascript. Primære features: Static typing, inheritance og unit testable.

Phew…

Brendan Eich taler om udviklingen indenfor JavaScript-fortolkere og hvordan afviklingshastigheden nærmer sig kompileret, uoptimeret C-kode.

Apple fører med deres nye SquirrelFish Extreme (endnu ikke offentliggjort), tæt fulgt af Googles V8 og Firefox’s TraceMonkey. Microsoft glimrer ved deres fravær i det hurtige selskab.