Christian heilmann wie javascript die welt eroberte

asdasdWie JavaScript die Welt eroberte Christian Heilmann, Mozilla, 5/5/11, Mainz

JavaScript hatte es vonAnfang an nicht leicht...

Da war schonmal derdämliche Name...

Java ist zu JavaScript...

Warum JavaScript?

Langsames Internet!

Java im Browser war,nunja...

Also brauchten wir wasNeues...

...eine Sprache die imBrowser läuft

...eine Sprache, die einfachzu lernen ist.

Eine Sprache die IDEunabhängig ist.

Zu Anfangs war JavaScriptnur eine Verbesserung.

Formulare - als Rechneroder zur Validierung.

Fenstersteuerungwindow.open();

Erstellung von Inhalten dienur Sinn machen wenn JSvorhanden ist.document.write();

Von Anfang an war JS dazuda, Probleme mit demInterface 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 Wahnsinnbeginnt!

Browserforking!ns4 = (document.layers)? true:falseie4 = (document.all)? true:falsefunction check() { if (ns4) { // Netscape Navigator 4.0 } if (ie4) { // Internet Explorer 4.0 }}

DHTML basierte auf keinenStandard, sondern war einMarketingzauberwort. DHTML!

Der Standard fürInteraktion mit demDokument wurde erst nocherstellt.

Dann kamen Browser, dieauch dem Standardfolgten.

Bis dahin hatte JavaScriptaber schon einenverdammt schlechten Ruf.

Missbrauch von JS füraggressive Werbung.

Seiten, die JavaScriptbenötigen und schwer zuverwalten sind.

Daher wurde es Zeit, daswir der Welt erklärten dases auch anders geht!

Webentwicklung laut ZeldmanFunktionalität JSDarstellung CSSStruktur HTML

Unobtrusive JavaScript

DOM Scripting Task Force Peter-Paul Koch Chris Kaminski Jeremy KeithDean Edwards Stuart Langridge Meinereiner Derek Featherstone

Ein paar Bücher...

Während die einen sich umdie Anwendung von JSkümmerten...

...definierten Andere wieman die Sprache selbstverwenden sollte.

JavaScript Entwicklung istanders... 10% 90% Code schreiben Warum macht der Browser was anderes?

Ein grosser Schritt war eineDebugging 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: Dont miss @rwaldrons 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 andereTricks...

Der echte Durchbruch kamdann mit Bibliotheken. ...

“Write less, achieve more!”

Der nächste grosse Schrittwar die Geschwindigkeitvon JavaScript zuverbessern.

Wir fingen an JavaScriptArchitektur Ideen undPatterns anzuwenden.

Test-Driven-Developmentkam auch zum Zuge.

Browser = schnellePlatformen, die Standardsbefolgen.

Was macht die JavaScriptWelt?

Andere Probleme lösen!

Polyfills

HTML5 und Konsorten sindgenial um WebApplikationen zu erstellen.

Dummerweise muss manauch an die alten Browserdenken.

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

JavaScript löst Problememit den Web!

Der Hype der nie ankam?

Websockets für long-polling

Das nächste Ziel - der Server!

Der Erfolg von JavaScriptbesteht darin, das LeuteProbleme finden, lösen undmit Anderen teilen.

Daher ist es wichtig, amBall zu bleiben und an denrichtigen Stellen nachinformationen zu suchen!

JavaScript ist und bleibt dieschnellste Sprache, die dasWeb als Medium vorantreibt.

Und es macht ne MengeSpass an der Evolutionteilzunehmen anstatt sieersetzen zu wollen!

Also, viel Spass heute!

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

Christian heilmann wie javascript die welt eroberte

by Christian Heilmann

Accessibility

Upload Details

Usage Rights

Statistics

Christian heilmann wie javascript die welt eroberte Presentation Transcript