senäh

17senäh und so…

JSConf.eu

HTML/CSS/JS
06. Okt 2012
Kommentare: 0

Live von der JSConf.eu 2012 – Tag 1

Kategorien: HTML/CSS/JS | 06. Okt 2012 | Kommentare: 0

Hallo Freunde des gepflegten Internetstandards! Heute und morgen gibt es ein besonderes Leckerli von mir. Es ist 8:58 Uhr und ich sitze im Zug nach Berlin. Ziel meiner Reise ist nichts anderes als die JSConf.eu 2012. Die Fahrt ermöglicht mir mein Arbeitgeber. Vielen Dank an Mercateo an dieser Stelle 🙂

Ich werde im Folgenden während/nach jedem Talk den ich besuche ein kleines Update in diesem Artikel fahren. Das live blogging des armen Mannes, also. Meine Auswahl an Talks habe ich bereits getroffen. Vom allerersten und dem letzten abgesehen finden immer zwei Vorträge gleichzeitig statt. Den ersten einmal ausgeklammert (er beschäftigt sich nicht mit JS) geht es heute um 11:15 in der Alten Münze los. Sehr humane Zeiten also, weswegen ich ziemlich fit in den Tag gestartet bin. Die Messe kann von mir aus kommen! Auf der Agenda stehen u.a. einige Exoten wie Node.js+Arduinos=Roboter und es gibt Vorstellung von brandneuen Technologien wie TypeScript, welches erst diese Woche der Öffentlichkeit präsentiert wurde.

Seid ihr auch so gespannt? Na dann los!

Anreise

Berlin 11 Uhr. Es regnet. Die Frisur sitzt. Ich hatte am Bahnhof echt kurz die Orientierung verloren, aber dann doch schnell die S-Bahn meiner Wünsche gefunden. Vier Stationen gefahren, dann ein kleiner Fußweg. Natürlich laufe ich das erste Mal direkt am Eingang vorbei. Jetzt bin ich endlich drin und finde mich immer noch nicht zurecht! ~.~ Ich bin echt verwirrt. In drei Minuten gehen die Talks los und ich finde die Räume nicht. Es sieht auch nicht so aus als würden andere die Räume suchen. Alle sitzen verteilt in den verschiedenen Lounges. Alles ist pink! Hier stehen Fernseher rum. Werden die Vorträge vielleicht einfach nur übertragen…? Gleich erfahre ich es…

Eingang zur JSConf - Sollte man "eigentlich" nicht übersehen.

Eingang zur JSConf – Sollte man „eigentlich“ nicht übersehen.

Rebuilding Facebook Chat

Ah, es geht los. Anscheinend sind die Veranstaltungen doch nicht parallel? Oder doch… egal. Ich bin auf jeden Fall in dem Talk, den ich mir ausgesucht habe. Bin gespannt. Adam Wollf spricht über den Neubau des Facebook Chats.

Konferenzräume

Konferenzräume

„Sind hier ein paar Leute, die Facebook nutzen?“ Unwahrscheinlich 😉

Ich glaube, ich brauche ein iPhone um bessere Fotos machen zu können… Auch gut für den nächsten Einkauf: MacBook Air 11’’… Der Rucksack ist schon ganz schön schwer…

6 Monate dauerte der Neubau. Dabei ist ein Command Line Test Framework für JS entstanden – soll bald open sourced werden. Das Beste am Neubau: Module! Ursprünglich haben sie einen globalen namespace genutzt. War zu unübersichtlich. Jetzt setzen sie auf CommonJS. Nice. Internationalisierung findet serverseitig statt. Komplizierte dependency chain zwischen Client und Server. Eigenentwicklung um Servertemplates zu ziehen: eine Art define in PHP, wenn ich das richtig sehe.
Alte Unit Tests waren zu langsam. (Ein Lolcat-Bild. Jetzt hat er mich.) Neue Testumgebung für unit testing: node.js, jsdom + Centextify.
Jetzt wird es noch einmal interessant: Facebook Chat nutzt einen functional style anstatt OOP/MVC. OOP/MVC ist kompliziert in asynchronen Umgebungen. OOP überbewertet: Prototypes > Abstraction, Delegation > Inheritance, Polymorphism > Callbacks, Externalize state > Encapsulation. Hmm… Anscheinend nutzen sie Singletons als eine Art Manager für bestimmte Logiken, anstatt verteilte Instanzen von Objekten. Gut: weniger Fehler. Schlecht: unübersichtlich.

Das war’s. Von mir aus hätte er gerne nur über den letzten Part sprechen können.

Keine Zeit für Raumwechsel außer bei der Mittagspause. Ich werfe meinen alten Plan über den Haufen und bleiben den ganzen Tag hier im Production Raum. Ich gehe davon aus, dass die anderen Talks wieder als Screencast im Netz landen.

WebRTC

Dieses Mal Max Krohn zum Thema WebRTC. Sehr wichtige Spezifikation für Web Apps. Bedeutende Entwicklungen im Web: HTTP < AJAX < WebSocket < WebRTC.

WebRTC: Offene Standards für Echtzeit-Streaming von Video, Audio und Daten ohne Browser. (Skype als Webseite? Kein Problem.) Plattform- und Geräteunabhängige Kommunikation. Webcam und Mikrofon-Zugriff. Kleine Demonstration einer EyeToy-artigen Anwendung. Weitere Demo um die Höhe einer Stimme zu bestimmen. (Singstar im Browser?)

Neue APIs: MediaStream, RTCPeerConnection, DataChannel. Peer discovery: Kommunikationsverbindung bspw. über eine einzigartige URL. „Peer to peer, but we need servers.“ 🙁 Nennt sich JSEP architecture.

Mein Akku sieht noch gut aus. Aber wo sind Steckdosen für den Notfall? ~.~ Kleine Ergänzung zur Einkaufsliste: anstatt einem MacBook Air würde ich auch ein iPad mit Tastatur nehmen.

Effectively building language tools

In diesem Talk von Lennart Kats geht’s um die richtigen Werkzeuge für eine Sprache. „Tooling matters especially for JavaScript.“ JavaScript ist eigentlich nicht für komplexe Aufgaben gebaut. Umso wichtiger ist das Tooling drumherum. JSHint und Co. als Qualitätssicherung. Code completion (mit Dokumentation) in modernen IDEs…

TypeScript! Yeah. Kleine Preview auf den Talk morgen. TypeScript ist ein superset zu JavaScript, so wie Sass zu CSS. (Im Gegensatz zu CoffeeScript.) Es trifft dadurch viel eher meinen Geschmack. superset bedeutet, dass TypeScript genau die gleiche Syntax wie JavaScript verwendet – nur mit Erweiterungen. Zu diesen Erweiterungen gehört wie der Name schon sagt Typensupport. Außerdem: Klassen und Module wie sie bei ECMAScript.next spezifiziert sind.

treehugger.js: Framework zur Manipulation von ASTs (abstract syntax trees). Falls man einen eigenen TypeScript-Compiler oder so schreiben möchte 🙂

Cloud9 sollte man sich vielleicht auch noch einmal anschauen. Cloud-IDE. Plugin-Support wie bei Sublime, aber anscheinend in JS anstatt Python.

Mittagspause

Habe ich eigentlich schon gesagt, dass ich ein schickes JavaScript T-Shirt bekommen habe? Mittagspause fängt jetzt an. Mal schauen, ob ich eine Steckdose finde. Rufe mal meine Freundin an, die ich an dieser Stelle herzlich Grüße, weil ich ihr morgen ganz viel über JavaScript erzählen darf, obwohl es sie nicht interessiert 😉 Und jetzt etwas essen!

Warum hat mir noch keiner gesagt, dass Essen und Trinken frei sind? Kuchenbaser und Club Mate Flatrate! #LebeDasKlischee

Kleine Showeinlage: Jemand steuert einen Helikopter mit seinem Smartphone (vermutlich) über Node.js. Da kommt wohl noch ein Talk zu.

Was habe ich in der Pause gelernt? Ich sollte mein Business Englisch gehörig auffrischen. Ich verstehe zwar alles, aber sprechen bin ich einfach nicht gewohnt. (Und merke, dass Londoner touch wie dutch aussprechen. Wer kennt ihn nicht, den multi-dutch-screen!) Interessant auch, dass ich unwissentlich mit einer der Vortragenden geschwatzt habe („why functional is the new black“ – kommt aber erst morgen dran).

JavaScript as a compilation target

Florian Loitsch über Dart. Viele Details über die interne Vorgehensweise von Dart um Dart-Code in JavaScript-Code zu verwandeln. Ziemlich interessant, aber zu viele Infos um alle niederzuschreiben. Mal schauen, ob es die Slides im Web gibt. Ich frag mich, ob ich irgendein Projekt kenne, wo es mal Sinn machen würde Dart einzusetzen. Hmm… gerade jetzt wo TypeScript noch in der Tür steht.

To hell with jQuery

Nein, hier geht es nicht darum, welche Bibliotheken besser sind als jQuery oder ob plain JavaScript besser ist als jQuery. Karolina Szczur versucht jQuery durch CSS zu ersetzen! (UX Designerin bei Nodejitsu. Cool. Und alle Slides in pink 😉 )

Benutzer vs. Ingenieure. Read the fucking manual vs. read the fucking code. Ich weiß noch nicht genau worauf sie hinaus möchte… Jetzt geht’s zum Kern: Sollten Frameworks groß und umfangreich sein oder klein und spezialisiert? Sollten Frameworks guten allgemeinen patterns folgen oder speziellen Optimierungen?
Hmm… eigentlich geht es um den altbekannten Satz: „Chosse the right tool, for the right job.“ Nur auf 30 Minuten verlängert.

Aber: Hier wusste mal jemand wirklich, dass Slides nur den Talk unterstützen sollen und nicht selbst den Talk darstellen!

Akku hält noch 2,5 h.

(W00t! Paul Irish ist hier irgendwo?)

Faster JavaScript with category theory

Mathematische Erklärungen für diverse gängige JS Funktionen von John Bender. Sehr empfehlenswert, aber ohne Slides kann ich nicht wirklich wiedergeben worum es ging. Die sind hier echt wichtig. (Ich habe die Slides gefunden. Aber ob man ohne Erklärung viel mit denen anfangen kann?) Für mich bisher der beste Vortrag! Er verschafft einem einfach mal einen anderen Blick auf bestimmte Dinge. Im Wesentlich hatte er auf Basis mathematischer Beschreibungen (z.B. Komposition zweier Funktionen) versucht jQuery zu refactoren.

Steckdose gefunden. Hurra!

Improvisational JavaScript

Von und mit Garann Means. Was kann man alles durch JavaScript im Web verbessern? Eine Inspiration.
Beispiel: Formulare
Angaben speichern, falls der Browser abstürzt. Autovervollständigung. Falls vorhanden Profildaten anzeigen. Und und und…

Was kann man bei JavaScript verbessern? Chaining, Callbacks, keine Informationen verstecken, Applikationsstatus verdeutlichen, smart defaults, keine pseudo-privaten Eigenschaften, opt-in error handling, etc.
„Errors are the result of a developer failing to realize a use case.“ Gewagte These würde ich mal sagen. Kern des Talks: Lasse keine Fehler zu, weil jeder Fehler andere Entwickler abschreckt. Finde ich persönlich sehr schwer umzusetzen.
„Forcing others to conform to your expectations is bad.“ Dem kann ich auch nicht unbedingt zustimmen. Je mehr Einsatzzwecke ich mit einer Funktion abdecken möchte, umso komplexer und unübersichtlicher wird im Regelfall der Code. Dann finde ich einen übersichtlichen Code passender, als eine sehr umfangreiche Funktion. Meine Meinung.

JS Inheritance

Vererbung als Thema geht immer. Dieses Mal von Axel Rauschmeyer.

Vererbung über prototype chain. Soweit, so bekannt. Objekte können über new Class() oder Object.create(Class.prototype) erstellt werden (function exemplar und object exemplar).

  • constructor: instantiation
  • prototype: everything else

Er empfiehlt ein Framework (proto.js) für die Vererbung. Stellt jetzt das Klassensystem von ECMAScript 6 vor.

Ich persönliche ziehe derzeit ja Komponenten-basierte Systeme der Vererbung vor. Passt mMn auch besser zu JavaScript. Oder andere Patterns wie decoration um Funktionalitäten zu erweitern.

__proto__ wird Standard in ES6? Das wusste ich noch nicht!

Fazit: Ich bleibe dabei, dass man Vererbung in JS vermeiden sollte, wenn es geht. (Was nicht heißt, dass man prototype nicht nutzen soll!) Wenn man nicht in ES6 Umgebungen arbeitet, dann wird Vererbung schnell unübersichtlich. Und durch Komponenten oder andere Wege ist Vererbung häufig nicht nötig.

Break all the rules

By Angus Croll. Spannendes Thema für mich. Angus untersucht, wann best practices umgangen werden sollten. (Und von mir persönlich viel Respekt an einen stotternden Redner. Würde er nicht sprechen, gäbe es hier ein spannendes Thema weniger.)

„I like the bad parts of JavaScript, too.“ Wer entscheidet, was richtig ist? Damit setze ich mich auch gerade auf der Arbeit auseinander, da ich ein paar best practices für JavaScript einführen möchte. Bin ich dann derjenige, der entscheidet was richtig ist…? „Correctness is Subjective.“ Alles hat Vor- und Nachteile. (Ja, dieses Thema ist durchaus sehr philosophisch.) Regeln sind gut für Anfänger, die noch nicht das ganze Bild erfassen können. Regeln beschränken die Freiheit. Java hat mehr Regeln als JavaScript, also sind JavaScript Programmierer freier. (Natürlich nur bildlich gesprochen 🙂 )

with wird generell als bad practice angesehen und wurde im strict mode von ES5 komplett entfernt. Aber: Mit with kann block scope simuliert werden, welches erst in ES6 eingeführt wird. Wieder was gelernt.

Spitzen Beispiel, warum bad practices nicht immer bad sind: Er zeigt StackOverflow Kommentare, die davon abraten eval zu nutzen, wenn JSON.prase nicht vorhanden ist. Stattdessen wird die Verwendung der JSON2.js Bibliothek empfohlen, da eval eine bad practice ist. Jetzt der Witz: *JSON2.js“ nutzt intern als eval, wenn JSON.parse nicht vorhanden ist! 🙂

Toller Vortrag! Danke!

Firefox for Android

Margaret Leibovic stellt Firefox für Android vor. Mal gucken, ob ich etwas daraus mitnehmen kann. Habe ja eher mit WebViews bei mobile apps zu tun als anderen Browsern.

Sieht nicht so aus, als könnte ich hier viel mitnehmen. Es geht um Kommunikation zwischen Java und JavaScript in Android Apps.
Jetzt doch noch was anderes: Plugins für Firefox Android in JS schreiben. Als Beispiel wird ein Plugin gezeigt, um den Quellcode einer Seite anzuzeigen.

JavaScript is the new Punk Rock

Wieder eines der heißeren Themen für mich. Als Game Development Interessierter habe ich schon ein oder zwei Spieleprototypen gebaut. Was dabei immer von mir ignoriert wurde, war die Musik, weil ich einfach nicht wusste „wie man Musik macht“ und ich keine fremde Musik einbinden wollte. Stuart Memo zeigt uns nun, wie man mit JS Musik macht.

I ♥ JS!

I ♥ JS!

Alles dreht sich um die Web Audio API. Live Demo direkt in die JS Konsole eingetippt 🙂 Danach wird doch gleich mal das Theme von Star Trek gespielt. Nerdy! Etwas Musiktheorie… kommt man nicht drumherum. Final Countdown auf einer Keyboard-Webapp. Noch ein Zitat von Gottfried Wilhelm Leibniz. Da freut sich der Leipziger.

Wow. Beeindruckender kleiner Codeschnipsel der einen tollen Sound erzeugt. Und noch mehr coole Beispiele. Mal schauen, ob ich die Slides finden kann…
Sieht im Augenblick nicht so aus. Schade 🙁
Web Audio API mit getUserMedia() kombiniert. Gitarre am Laptop + JavaScript = Musikstudio. Cool, cool.

Langam neigt sich der Tag dem Ende zu.

Code Collage

Zum Schluss noch einmal Module und Codeorganziation von James Halliday. (Ach, das ist der browserify Entwickler!)

“Do one thing and do it good.“ Die alte UNIX Philosophie 🙂 Und wenn man dieses one thing hat, dann soll man es in ein Modul auslagern. Bis zu ~100 Codezeilen für ein Modul sind okay.
„The best thing that can be said of software is that it is too small.“ Gefällt mir! Ein paar Node-Beispiele, die ich zu dieser späten Stunde nur noch halb verstehe… Ah, PNG Generierung und Analyse über Streams. Sehr cool, er streamt die Videodaten einer Drone zu einer Webseite. Wenn man ein rotes Tuch in die Kamera hält, dann wird ein Pfadenkreuz eingeblendet. Sehr cooles Beispiel. Das wäre mal was zum Nachbauen!

Das war’s für heute. Der Kopf raucht und ich muss erst einmal abschalten. Good night 😉

Autor: Pipo

...kommt ursprünglich aus der Designerecke, ist aber im Laufe seines Studiums in die Webentwicklung gestolpert. Kann sich seit dem nicht so richtig entscheiden wo er hingehört und wagt deswegen vielleicht die Flucht nach vorne in ein komplett neues Gebiet. Vielleicht Management? Niemand weiß es. Auch er nicht.