Christian heilmann wie javascript die welt eroberte

67
asdasd Wie JavaScript die Welt eroberte Christian Heilmann, Mozilla, 5/5/11, Mainz
  • date post

    12-Sep-2014
  • Category

    Documents

  • view

    6.138
  • download

    0

description

Die Geschichte von JavaScript auf der Jax.de

Transcript of Christian heilmann wie javascript die welt eroberte

Page 1: Christian heilmann   wie javascript die welt eroberte

asdasd

Wie JavaScript die Welt eroberte

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

Page 2: Christian heilmann   wie javascript die welt eroberte

JavaScript hatte es von Anfang an nicht leicht...

Page 3: Christian heilmann   wie javascript die welt eroberte

Da war schonmal der dämliche Name...

Page 4: Christian heilmann   wie javascript die welt eroberte

Java ist zu JavaScript...

Page 5: Christian heilmann   wie javascript die welt eroberte

Warum JavaScript?

Page 6: Christian heilmann   wie javascript die welt eroberte

Langsames Internet!

Page 7: Christian heilmann   wie javascript die welt eroberte

Java im Browser war, nunja...

Page 8: Christian heilmann   wie javascript die welt eroberte

Also brauchten wir was Neues...

Page 9: Christian heilmann   wie javascript die welt eroberte

...eine Sprache die im Browser läuft

Page 10: Christian heilmann   wie javascript die welt eroberte

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

Page 11: Christian heilmann   wie javascript die welt eroberte

Eine Sprache die IDE unabhängig ist.

Page 12: Christian heilmann   wie javascript die welt eroberte

Zu Anfangs war JavaScript nur eine Verbesserung.

Page 13: Christian heilmann   wie javascript die welt eroberte

Formulare - als Rechner oder zur Validierung.

Page 14: Christian heilmann   wie javascript die welt eroberte

Fenstersteuerung

window.open();

Page 15: Christian heilmann   wie javascript die welt eroberte

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

document.write();

Page 16: Christian heilmann   wie javascript die welt eroberte

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

Page 17: Christian heilmann   wie javascript die welt eroberte

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

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

Page 19: Christian heilmann   wie javascript die welt eroberte

DHTML - der Wahnsinn beginnt!

Page 20: Christian heilmann   wie javascript die welt eroberte

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

DHTML basierte auf keinen Standard, sondern war ein Marketingzauberwort.

DHTML!

Page 22: Christian heilmann   wie javascript die welt eroberte

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

Page 23: Christian heilmann   wie javascript die welt eroberte

Dann kamen Browser, die auch dem Standard folgten.

Page 24: Christian heilmann   wie javascript die welt eroberte

Bis dahin hatte JavaScript aber schon einen verdammt schlechten Ruf.

Page 25: Christian heilmann   wie javascript die welt eroberte

Missbrauch von JS für aggressive Werbung.

Page 26: Christian heilmann   wie javascript die welt eroberte

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

Page 27: Christian heilmann   wie javascript die welt eroberte

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

Page 28: Christian heilmann   wie javascript die welt eroberte

Webentwicklung laut Zeldman

HTML

CSS

JS

Struktur

Darstellung

Funktionalität

Page 29: Christian heilmann   wie javascript die welt eroberte

Unobtrusive JavaScript

Page 30: Christian heilmann   wie javascript die welt eroberte

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

Ein paar Bücher...

Page 32: Christian heilmann   wie javascript die welt eroberte

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

Page 33: Christian heilmann   wie javascript die welt eroberte

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

Page 34: Christian heilmann   wie javascript die welt eroberte

JavaScript Entwicklung ist anders...

10%

90%

Code schreibenWarum macht der Browser was anderes?

Page 35: Christian heilmann   wie javascript die welt eroberte

Ein grosser Schritt war eine Debugging Umgebung: Firebug.

Page 36: Christian heilmann   wie javascript die welt eroberte

Der nächste Hype!

Page 37: Christian heilmann   wie javascript die welt eroberte

XML und JS = Sad Panda!

Page 38: Christian heilmann   wie javascript die welt eroberte

Crossdomain AJAX = is ned.

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

Page 39: Christian heilmann   wie javascript die welt eroberte

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 41: Christian heilmann   wie javascript die welt eroberte

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

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

Lazy loading und andere Tricks...

Page 44: Christian heilmann   wie javascript die welt eroberte

Der echte Durchbruch kam dann mit Bibliotheken.

...

Page 45: Christian heilmann   wie javascript die welt eroberte

“Write less, achieve more!”

Page 46: Christian heilmann   wie javascript die welt eroberte

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

Page 47: Christian heilmann   wie javascript die welt eroberte

Wir fingen an JavaScript Architektur Ideen und Patterns anzuwenden.

Page 48: Christian heilmann   wie javascript die welt eroberte

Test-Driven-Development kam auch zum Zuge.

Page 49: Christian heilmann   wie javascript die welt eroberte

Browser = schnelle Platformen, die Standards befolgen.

Page 50: Christian heilmann   wie javascript die welt eroberte

Was macht die JavaScript Welt?

Page 51: Christian heilmann   wie javascript die welt eroberte

Andere Probleme lösen!

Page 52: Christian heilmann   wie javascript die welt eroberte

Polyfills

Page 53: Christian heilmann   wie javascript die welt eroberte

HTML5 und Konsorten sind genial um Web Applikationen zu erstellen.

Page 54: Christian heilmann   wie javascript die welt eroberte

Dummerweise muss man auch an die alten Browser denken.

Page 55: Christian heilmann   wie javascript die welt eroberte

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

Page 56: Christian heilmann   wie javascript die welt eroberte

JavaScript löst Probleme mit den Web!

Page 57: Christian heilmann   wie javascript die welt eroberte

Der Hype der nie ankam?

Page 58: Christian heilmann   wie javascript die welt eroberte

Websockets für long-polling

Page 59: Christian heilmann   wie javascript die welt eroberte

Das nächste Ziel - der Server!

Page 60: Christian heilmann   wie javascript die welt eroberte

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

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
Page 63: Christian heilmann   wie javascript die welt eroberte

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

Page 64: Christian heilmann   wie javascript die welt eroberte

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

Page 65: Christian heilmann   wie javascript die welt eroberte
Page 66: Christian heilmann   wie javascript die welt eroberte

Also, viel Spass heute!

Page 67: Christian heilmann   wie javascript die welt eroberte

DANKE!

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