Christian heilmann wie javascript die welt eroberte

asdasd

Wie JavaScript die Welt eroberte

Christian Heilmann, Mozilla, 5/5/11, Mainz

JavaScript hatte es von Anfang an nicht leicht...

Da war schonmal der dämliche Name...

Java ist zu JavaScript...

Warum JavaScript?

Langsames Internet!

Java im Browser war, nunja...

Also brauchten wir was Neues...

...eine Sprache die im Browser läuft

...eine Sprache, die einfach zu lernen ist.

Eine Sprache die IDE unabhängig ist.

Zu Anfangs war JavaScript nur eine Verbesserung.

Formulare - als Rechner oder zur Validierung.

Fenstersteuerung

window.open();

Erstellung von Inhalten die nur Sinn machen wenn JS vorhanden ist.

document.write();

Von Anfang an war JS dazu da, Probleme mit dem Interface zu beheben.

Um das zu erledigen, hatten wir das BOM (Browser Object Model)

window.frames;document.forms;document.links;document.images;document.location;document.history;

Wir fingen auch schon an, unsere Interfaces per JS zu “verbessern”.

DHTML - der Wahnsinn beginnt!

Browser forking!

ns4 = (document.layers)? true:falseie4 = (document.all)? true:false

function check() { if (ns4) { // Netscape Navigator 4.0 } if (ie4) { // Internet Explorer 4.0 }}

DHTML basierte auf keinen Standard, sondern war ein Marketingzauberwort.

DHTML!

Der Standard für Interaktion mit dem Dokument wurde erst noch erstellt.

Dann kamen Browser, die auch dem Standard folgten.

Bis dahin hatte JavaScript aber schon einen verdammt schlechten Ruf.

Missbrauch von JS für aggressive Werbung.

Seiten, die JavaScript benötigen und schwer zu verwalten sind.

Daher wurde es Zeit, das wir der Welt erklärten das es auch anders geht!

Webentwicklung laut Zeldman

HTML

CSS

JS

Struktur

Darstellung

Funktionalität

Unobtrusive JavaScript

DOM Scripting Task Force

Dean Edwards

Chris Kaminski

Stuart Langridge

Jeremy Keith

Peter-Paul Koch

Derek Featherstone

Meinereiner

Ein paar Bücher...

Während die einen sich um die Anwendung von JS kümmerten...

...definierten Andere wie man die Sprache selbst verwenden sollte.

JavaScript Entwicklung ist anders...

10%

90%

Code schreibenWarum macht der Browser was anderes?

Ein grosser Schritt war eine Debugging Umgebung: Firebug.

Der nächste Hype!

XML und JS = Sad Panda!

Crossdomain AJAX = is ned.

http://www.flickr.com/photos/givingkittensaway/55777042

JSON anstatt XML! var inseln = [{ "berge":2, "lage":{ "meer":{ "dimensionen":{ "tief":true, "weit":true } } }, "tunnels":"viele", "geleise":"viele", "verkehr":"Eisenbahn", "border":"schöner Strand", "name":"Lummerland"}];

JSON-P erlaubt x-domain!

http://feeds.delicious.com/v2/ json/codepo8/javascript? callback=meineLinks

<script>function meineLinks(o){ // ...}</script><script src="http://feeds.delicious.com/v2/json/codepo8/javascript?callback=meineLinks">

meineLinks([ { "u":"http:\/\/www.meetup.com\/javascript-2\/events\/16773134\/", "d":"Advanced HTML5 Video with Popcorn.js - The Boston JavaScript Meetup Group (Cambridge, MA) - Meetup", "t":["JavaScript","Popcorn.js","via:packrati.us","Boston","HTML5"], "dt":"2011-03-15T15:04:53Z", "n":"RT @F1LT3R: RT @bocoup: Don't miss @rwaldron's talk on #HTML5 video and #Popcorn.js tonight at #Boston #JavaScript Meetup: http:\/\/gul.ly\/wd", "a":"codepo8" },{ "u":"http:\/\/addyosmani.com\/blog\/essentialjsdesignpatternsupdate1\/", "d":"Essential JavaScript Design Patterns 1.1 \u2013 A Free Updated Book For Beginners", "t":["javascript","via:packrati.us","jquery","free"], "dt":"2011-02-27T21:32:16Z", "n":"RT @addyosmani: Essential JavaScript Design Patterns 1.1 \u2013 A Free Updated Book For Beginners http:\/\/bit.ly\/hpbnMz #javascript #jquery #free", "a":"codepo8" } // ...])

Dynamische Scripterstellung.if(navigator.geolocation) { navigator.geolocation.getCurrentPosition( function(position) { var url = 'http://query.yahooapis.com/v1/public/yql?q='+ 'select%20*%20from%20flickr.places%20where%20lat%3D%22'+ position.coords.latitude + '%22%20and%20lon%3D%22'+ position.coords.longitude + '%22&format=json&callback=found'; var s = document.createElement('script'); s.setAttribute('src',url); document.getElementsByTagName('head')[0].appendChild(s) }, function(error){ alert(typeof msg === 'string' ? msg : "error"); } ); function found(o){ console.log(o.query.results.places.place.name); // Mayence, Rhineland-Palatinate, Germany }}

Lazy loading und andere Tricks...

Der echte Durchbruch kam dann mit Bibliotheken.

...

“Write less, achieve more!”

Der nächste grosse Schritt war die Geschwindigkeit von JavaScript zu verbessern.

Wir fingen an JavaScript Architektur Ideen und Patterns anzuwenden.

Test-Driven-Development kam auch zum Zuge.

Browser = schnelle Platformen, die Standards befolgen.

Was macht die JavaScript Welt?

Andere Probleme lösen!

Polyfills

HTML5 und Konsorten sind genial um Web Applikationen zu erstellen.

Dummerweise muss man auch an die alten Browser denken.

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

JavaScript löst Probleme mit den Web!

Der Hype der nie ankam?

Websockets für long-polling

Das nächste Ziel - der Server!

Der Erfolg von JavaScript besteht darin, das Leute Probleme finden, lösen und mit Anderen teilen.

Daher ist es wichtig, am Ball zu bleiben und an den richtigen Stellen nach informationen zu suchen!

JavaScript ist und bleibt die schnellste Sprache, die das Web als Medium voran treibt.

Und es macht ne Menge Spass an der Evolution teilzunehmen anstatt sie ersetzen zu wollen!

Also, viel Spass heute!

DANKE!

Chris Heilmann@codepo8http://wait-till-i.com