Post on 12-Sep-2014
description
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!