christian heilmann wie javascript die welt eroberte
Post on 12-Sep-2014
6.141 views
DESCRIPTION
Die Geschichte von JavaScript auf der Jax.deTRANSCRIPT
![Page 1: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/1.jpg)
asdasd
Wie JavaScript die Welt eroberte
Christian Heilmann, Mozilla, 5/5/11, Mainz
![Page 2: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/2.jpg)
JavaScript hatte es von Anfang an nicht leicht...
![Page 3: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/3.jpg)
Da war schonmal der dämliche Name...
![Page 4: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/4.jpg)
Java ist zu JavaScript...
![Page 5: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/5.jpg)
Warum JavaScript?
![Page 6: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/6.jpg)
Langsames Internet!
![Page 7: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/7.jpg)
Java im Browser war, nunja...
![Page 8: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/8.jpg)
Also brauchten wir was Neues...
![Page 9: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/9.jpg)
...eine Sprache die im Browser läuft
![Page 10: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/10.jpg)
...eine Sprache, die einfach zu lernen ist.
![Page 11: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/11.jpg)
Eine Sprache die IDE unabhängig ist.
![Page 12: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/12.jpg)
Zu Anfangs war JavaScript nur eine Verbesserung.
![Page 13: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/13.jpg)
Formulare - als Rechner oder zur Validierung.
![Page 14: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/14.jpg)
Fenstersteuerung
window.open();
![Page 15: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/15.jpg)
Erstellung von Inhalten die nur Sinn machen wenn JS vorhanden ist.
document.write();
![Page 16: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/16.jpg)
Von Anfang an war JS dazu da, Probleme mit dem Interface zu beheben.
![Page 17: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/17.jpg)
Um das zu erledigen, hatten wir das BOM (Browser Object Model)
window.frames;document.forms;document.links;document.images;document.location;document.history;
![Page 18: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/18.jpg)
Wir fingen auch schon an, unsere Interfaces per JS zu “verbessern”.
![Page 19: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/19.jpg)
DHTML - der Wahnsinn beginnt!
![Page 20: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/20.jpg)
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 }}
![Page 21: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/21.jpg)
DHTML basierte auf keinen Standard, sondern war ein Marketingzauberwort.
DHTML!
![Page 22: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/22.jpg)
Der Standard für Interaktion mit dem Dokument wurde erst noch erstellt.
![Page 23: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/23.jpg)
Dann kamen Browser, die auch dem Standard folgten.
![Page 24: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/24.jpg)
Bis dahin hatte JavaScript aber schon einen verdammt schlechten Ruf.
![Page 25: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/25.jpg)
Missbrauch von JS für aggressive Werbung.
![Page 26: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/26.jpg)
Seiten, die JavaScript benötigen und schwer zu verwalten sind.
![Page 27: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/27.jpg)
Daher wurde es Zeit, das wir der Welt erklärten das es auch anders geht!
![Page 28: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/28.jpg)
Webentwicklung laut Zeldman
HTML
CSS
JS
Struktur
Darstellung
Funktionalität
![Page 29: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/29.jpg)
Unobtrusive JavaScript
![Page 30: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/30.jpg)
DOM Scripting Task Force
Dean Edwards
Chris Kaminski
Stuart Langridge
Jeremy Keith
Peter-Paul Koch
Derek Featherstone
Meinereiner
![Page 31: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/31.jpg)
Ein paar Bücher...
![Page 32: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/32.jpg)
Während die einen sich um die Anwendung von JS kümmerten...
![Page 33: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/33.jpg)
...definierten Andere wie man die Sprache selbst verwenden sollte.
![Page 34: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/34.jpg)
JavaScript Entwicklung ist anders...
10%
90%
Code schreibenWarum macht der Browser was anderes?
![Page 35: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/35.jpg)
Ein grosser Schritt war eine Debugging Umgebung: Firebug.
![Page 36: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/36.jpg)
Der nächste Hype!
![Page 37: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/37.jpg)
XML und JS = Sad Panda!
![Page 38: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/38.jpg)
Crossdomain AJAX = is ned.
http://www.flickr.com/photos/givingkittensaway/55777042
![Page 39: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/39.jpg)
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"}];
![Page 40: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/40.jpg)
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">
![Page 41: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/41.jpg)
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" } // ...])
![Page 42: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/42.jpg)
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 }}
![Page 43: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/43.jpg)
Lazy loading und andere Tricks...
![Page 44: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/44.jpg)
Der echte Durchbruch kam dann mit Bibliotheken.
...
![Page 45: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/45.jpg)
“Write less, achieve more!”
![Page 46: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/46.jpg)
Der nächste grosse Schritt war die Geschwindigkeit von JavaScript zu verbessern.
![Page 47: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/47.jpg)
Wir fingen an JavaScript Architektur Ideen und Patterns anzuwenden.
![Page 48: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/48.jpg)
Test-Driven-Development kam auch zum Zuge.
![Page 49: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/49.jpg)
Browser = schnelle Platformen, die Standards befolgen.
![Page 50: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/50.jpg)
Was macht die JavaScript Welt?
![Page 51: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/51.jpg)
Andere Probleme lösen!
![Page 52: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/52.jpg)
Polyfills
![Page 53: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/53.jpg)
HTML5 und Konsorten sind genial um Web Applikationen zu erstellen.
![Page 54: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/54.jpg)
Dummerweise muss man auch an die alten Browser denken.
![Page 55: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/55.jpg)
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
![Page 56: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/56.jpg)
JavaScript löst Probleme mit den Web!
![Page 57: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/57.jpg)
Der Hype der nie ankam?
![Page 58: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/58.jpg)
Websockets für long-polling
![Page 59: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/59.jpg)
Das nächste Ziel - der Server!
![Page 60: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/60.jpg)
Der Erfolg von JavaScript besteht darin, das Leute Probleme finden, lösen und mit Anderen teilen.
![Page 61: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/61.jpg)
Daher ist es wichtig, am Ball zu bleiben und an den richtigen Stellen nach informationen zu suchen!
![Page 62: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/62.jpg)
![Page 63: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/63.jpg)
JavaScript ist und bleibt die schnellste Sprache, die das Web als Medium voran treibt.
![Page 64: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/64.jpg)
Und es macht ne Menge Spass an der Evolution teilzunehmen anstatt sie ersetzen zu wollen!
![Page 65: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/65.jpg)
![Page 66: Christian heilmann wie javascript die welt eroberte](https://reader034.vdocuments.net/reader034/viewer/2022042613/5412ee1b8d7f72174e8b4626/html5/thumbnails/66.jpg)
Also, viel Spass heute!