Die Geschichte von JavaScript auf der Jax.de

1. asdasd
Wie JavaScript die Welt eroberte
Christian Heilmann, Mozilla, 5/5/11, Mainz

2. JavaScript hatte es von
Anfang an nicht leicht...

3. Da war schonmal der
dämliche Name...

4. Java ist zu JavaScript...

5. Warum JavaScript?

6. Langsames Internet!

7. Java im Browser war,
nunja...

8. Also brauchten wir was
Neues...

9. ...eine Sprache die im
Browser läuft

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

11. Eine Sprache die IDE
unabhängig ist.

12. Zu Anfangs war JavaScript
nur eine Verbesserung.

13. Formulare - als Rechner
oder zur Validierung.

14. Fenstersteuerung
window.open();

15. Erstellung von Inhalten die
nur Sinn machen wenn JS
vorhanden ist.
document.write();

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

17. Um das zu erledigen,
hatten wir das BOM
(Browser Object Model)
window.frames;
document.forms;
document.links;
document.images;
document.location;
document.history;

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

19. DHTML - der Wahnsinn
beginnt!

20. Browser
forking!
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function check() {
if (ns4) {
// Netscape Navigator 4.0
}
if (ie4) {
// Internet Explorer 4.0
}
}

21. DHTML basierte auf keinen
Standard, sondern war ein
Marketingzauberwort.
DHTML!

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

23. Dann kamen Browser, die
auch dem Standard
folgten.

24. Bis dahin hatte JavaScript
aber schon einen
verdammt schlechten Ruf.

25. Missbrauch von JS für
aggressive Werbung.

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

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

28. Webentwicklung laut Zeldman
Funktionalität JS
Darstellung CSS
Struktur HTML

29. Unobtrusive JavaScript

30. DOM Scripting Task Force
Peter-Paul Koch
Chris Kaminski
Jeremy Keith
Dean Edwards
Stuart Langridge
Meinereiner
Derek Featherstone

31. Ein paar Bücher...

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

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

34. JavaScript Entwicklung ist
anders...
10%
90%
Code schreiben
Warum macht der Browser was anderes?

35. Ein grosser Schritt war eine
Debugging Umgebung:
Firebug.

36. Der nächste Hype!

37. XML und JS = Sad Panda!

38. Crossdomain AJAX = is ned.
http://www.flickr.com/photos/givingkittensaway/55777042

39. 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"
}];

40. 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">

41. 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"
}
// ...
])

42. 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
}
}

43. Lazy loading und andere
Tricks...

44. Der echte Durchbruch kam
dann mit Bibliotheken.
...

45. “Write less, achieve more!”

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

47. Wir fingen an JavaScript
Architektur Ideen und
Patterns anzuwenden.

48. Test-Driven-Development
kam auch zum Zuge.

49. Browser = schnelle
Platformen, die Standards
befolgen.

50. Was macht die JavaScript
Welt?

51. Andere Probleme lösen!

52. Polyfills

53. HTML5 und Konsorten sind
genial um Web
Applikationen zu erstellen.

54. Dummerweise muss man
auch an die alten Browser
denken.

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

56. JavaScript löst Probleme
mit den Web!

57. Der Hype der nie ankam?

58. Websockets für long-polling

59. Das nächste Ziel - der Server!

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

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

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

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

66. Also, viel Spass heute!

67. DANKE!
Chris Heilmann
@codepo8
http://wait-till-i.com