senäh

17senäh und so…

JSConf.eu

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

Live von der JSConf.eu 2012 – Tag 2

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

Bacon und Spiegeleier! Whooohoo! Toller Start in den Tag. So langsam werden der Saal wieder voller. Vor ein paar Minuten sah das noch ganz anders aus. Der zweite Tag startet gleich mit einem für mich sehr heißen Thema: TypeScript. Könnte dies die erste compiles-to-JavaScript-Sprache sein, die für mich relevant ist? Ich bin gespannt. In ~30 Minuten geht’s los!

So sieht's aus, wenn man pünktlich ist...

So sieht’s aus, wenn man pünktlich ist…

Introducing TypeScript

Am 1.10. erst vorgestellt, heute schon hier: TypeScript. Von Microsoft. Ein feines Stück Technik. Eine Sprache, die nach JavaScript kompiliert, die aber nicht für Nicht-JavaScript-Entwickler ist, sondern für JavaScript-Entwickler. Hier wird keine komplett andere Syntax eingeführt wie bei CoffeeScript, keine komplett neue Technologie wie Dart, hier greift man nicht auf bestehende Technologien zurück wie bei GWT (Java-to-JS). TypeScript ist JavaScript – nur erweitert. Und nicht einfach nur irgendwie erweitert, sondern wenn möglich bereits nach ECMAScript 6 Spezifikation. Einen sehr guten Artikel als Übersicht findet ihr hier. Und wenn ihr in Zukunft TypeScript-Support in WebStorm haben möchtet, solltet ihr hier einen Kommentar hinterlassen 🙂 Hier gibt es noch ein ausführliches Video mit Erklärungen. Als letzter Link noch die offizielle Seite. Und jetzt geht der Talk los. Von Anders Hejlsberg und Luke Hoban.

Features:

  • “Superset of JavaScript which compiles to JavaScript.“
  • “TypeScript compiler is already written in TypeScript itself.“
  • optional static types
  • better code completion/refactoring possible
  • classes (as in ES6) and interfaces
  • reibungslos mit existierenden JavaScript Code verwendbar (jQuery, etc.)
  • existierender Code durch externe Typendeklaration optional typensicher – jedes Interface, welches in JS offen liegt, kann so typensicher gemacht werden (z.B. WinRT in Windows 8)
  • wieder eine coole Idee: Interfaces können gemerged werden, da Objekte in JS ja dynamisch erweitert werden können (Plugins für jQuery, etc.)
  • sehr cool und völlig neu für mich: structured data/structural types, eine Art light interface oder better ducktyping, wenn man es so formulieren möchte 😉
  • sehr cool!: interface Beschreibung gibt nicht nur Rückschlüsse auf Attribute, sondern auch, ob ein Objekt gleichzeitig eine Funktion ist und etwas zurück gibt und ob ein Objekt indexierbar ist (wie ein Array) und was durch ein Index zurückgegeben wird
  • modules nach CommonJS (oder AMD – kann anscheinend im Compiler festgelegt werden)
  • open-source
  • Versionsnummer: 0.8
  • Beispiel: TypeScript interfaces verwenden, um die Daten in einer MongoDB besser zu beschreiben

Ich bin ja etwas begeistert (Achtung: Untertreibung). Ob ich beim nächsten Mal nicht die JSConf, sonder TSConf besuche? Ich wünsche dem Projekt jedenfalls viel Erfolg.

OpenWebDevice

Von Francisco Jordano. Bericht über das erste Smartphone mit Firefox OS (ehemals Boot2Gecko). Startet in Brasilien, da Firefox OS Smartphones eine preiswertere Alternative zu bestehenden Smartphones darstellen sollen.

Bestandteile:

  • Gonk: Linux Kernel und Treiber (sehr Android ähnlich)
  • Gecko: magic engine für HTML/CSS/JavaScript, APIs
  • Gaia: HTML5 powered GUI

Firefox OS Apps sind ausschließlich Web Apps. Die Oberfläche ist nicht die schickste, soll aber einfach durch HTML/CSS veränderbar sein.
Eigentlich mag ich die Idee, die hinter Firefox OS steht. Aber ich kann mir noch keine rosige Zukunft für das Projekt vorstellen (zumindest nicht aus wirtschaftlicher Sicht, was ich echt schade finde). Vielleicht wird es in Schwellenlänger auf Grund des Preises recht verbreitet sein, aber ich befürchte, dass es hier nur ein Gerät für Frickler und Hacker sein wird (aka wie ein Raspberry Pi, nur als Smartphone).

Aber Gaia komplett zu überarbeiten, hätte schon seinen Reiz. Man könnte einfach seine eigene Oberfläche bauen… Schon spannend.

Kleines Update: Ich habe kurz mit Francisco getwittert, weil ich noch eine Frage hatte. Man kann sogar WebGL direkt(!!!) in Gaia nutzen. Heißt: In Icons, Buttons, Hintergrundbilder – überall kann man mit WebGL herumspielen. Mann, damit haben sie mich vielleicht doch mit an Bord. Es klingt einfach zu spannend. Im Netz habe ich schon gelesen, dass Firefox OS auf dem Google Nexus läuft. Vielleicht kann ich ja nächstes Jahr zu einem neuen Smartphone wechseln und auf dem Nexus Firefox OS installieren…?

The Web’s Black Magic

Matthew Delaney und Jing Jin. Was passiert im Inneren von Webkit? (Jetzt trinken sie erst einmal ein Bier^^ Rebellen! Ist ja alles kein Problem in good ol’ germany.)

Ein paar Details darüber wann Browser Reflows ausgelöst werden (z.B. wenn man innerText neu setzt). Schreibvorgänge batchen und nicht mit Lesevorgängen mixen. (Lieber eine Schleife zum Lesen und eine Schleife zum Schreiben von DOM Eigenschaften, anstatt eine große Schleife.) Der alte translateZ(o)-hack wird vorgestellt, um Hardwarebeschleunigung zu triggern. Details zu Compositing → Rendering. (Am Bier nippen.) Schon sehr ausführlich. Erinnert mich an dirty rectangles: nur Teile einer Webseite neu rendern, wenn sie sich wirklich ändert.

Das war’s schon.

Inspector Web and the Mistery of Shadow DOM

By Angelina Fabbro. Vorstellung von web components und shadow DOM. Schon oft gehört, aber noch nie angeschaut.

Jetziger Workflow für Widgets und Co: Markup erstellen, spezifisches CSS dafür erstellen, zum Schluss jQuery Plugin aufrufen.
Problem:

  • namespace/selector conflicts
  • unexpected DOM elements in markup

Lösung:

  • bisherige Lösung: encapsulation mit iframes
  • neue Lösung: encapsulation mit web components und shadow DOM

show shadow DOM Option in Chrome Canary Web Developer Tools zeigt shadow DOM. „Like a tiny document inside a host element (e.g. div).“ shadow DOM ersetzt andere child elements im host element (- „ersetzt“ bedeutet in diesem Fall, dass die orignalen child elements ausgeblendet, aber nicht gelöscht werden).

Neue Tags:

  • template: “parse, but don’t render“
  • element: “create custom elements“, so wie man stylesheets in eine HTML Seite einbinden kann, kann man componentseinbinden; kann bestehende Elemente (div, ul, etc.) erweitern
  • content: “puts original childs into custom component“
  • Gefällt dem Pipo, was er da hört! „Remixing existing content into new content.“

Was kann man damit anstellen?

  • rapid prototypes: library of components kann schnell mit Daten befüllt werden
  • alternative Navigationselemente für Mobile Browser ausgeben (gute Idee)
  • einfacheres mixen von Frameworks

Wäre ganz nett für Twitter Bootstrap. Man stelle sich ein eigenständiges Carousel Element vor, in welchem man wie bei einem div Container Elemente hinein setzt.

Kann man es verwenden?

  • für Experimente: ja!
  • aber sonst: nein!

Im Augenblick nur in Chrome Canary.

Sehr informativ, danke! 🙂

Web Components with ‚insert favourite bleeding edge CSS spec‘

Jetzt kommt Divya Manian. Der letzte Talk vor der Mittagspause.

Noch einmal eine kurze Erklärung zu shadow DOM und Web Components. Ah Divya zeigt jetzt auch noch einmal, dass die components mit JavaScript versehen werden können. (Bsp.: Ein eigenständiges Button Element, welches bei jedem Klick eine Funktion auslöst. Im Dokument selbst würde man nur diese component einbinden und im Markup den neuen Button festlegen.)

Jetzt CSS Regions: Einen Inhalt über mehrere Container verbreiten (z.B. ein Text über mehrere Spalten verteilen). Mit shadow DOM könnten dann bspw. das Markup mit den Spalten versteckt werden → übersichtlicher.

CSS Variables: Variablen jetzt auch direkt in CSS ohne Preprocessors. Eine Variable bekommt den var-Prefix. Manche werde bestimmt schon davon gehört haben.

Custom Filters/CSS Shaders: Kennt man vielleicht auch schon. Ermöglicht GLSL Shaders auf HTML Elemente. Schöne Sache. (Hier mal ein paar coole Demos als Beispiele von einem alten Adobe Blogeintrag.)

W00t? Doch keine Pause? Hab‘ mich wohl verschaut…

Node.js & Black Box Prototyping

Hurra! Wieder ein Node.js Thema. Und ARDUINOS!!! Der heutige Tag verläuft von der Themenwahl schon Mal 1A! Prototyping mit Emily Rose:

Ein paar Boxen werden ausgepackt: Hardware, Kabel, Sensoren… „Das wird eher eine Demonstration als ein Vortrag.“ Man sieht leider nicht viel 🙁 Sie bauen die Hardware zusammen. Entfernungssensoren… So richtig wird nicht erklärt was sie da vorne machen 🙁

(Noch etwas komplett anderes: Es gibt einen gratis Mail-to-Print-Service, wenn man noch seine Flugzug-Tickets ausdrucken muss! Spitzen Service.)

Vorne gibt es technische Probleme. Sie wollte zeigen wie Arduino-Sensoren Daten sammeln, an einen Node.js-Server senden und wie man die Daten anschließend im Browser ausgibt. Schade, dass es nicht so geklappt hat.

Jetzt aber Pause.

Diese Programmierer verstehen was von Catering!

Diese Programmierer verstehen was von Catering!

Lecker Konferenzessen.

Kurz After-Lunch-Demo: NodeCopters! Yeah. Quadrocopter powered mit Node. Sehen wir dieses Wochenende nicht zum ersten Mal, aber es ist einfach so cool. Der NodeCopter ist mit Bewegungssensoren ausgestattet, welche eine 3D-Repräsentation des NodeCopters (realisiert mit three.js) synchron dazu bewegen.

Attack of the NodeCoper!

Attack of the NodeCoper!

Fetzt.

JavaScript on the Raspberry Pi

Achja, das Raspberry Pi. Hätte ich etwas Zeit, dann hätte ich mir vielleicht schon eins zugelegt. Man könnte damit rein theoretisch seine eigenen Sonos Lautsprecher bauen, also an das RPi einen Musikstream über WiFi schicken und einfach über einen beliebigen Lautsprecher hängen. Steuern könnte man das ganze per Smartphone-App über eine REST-Api (auf dem RPi läuft dann Node.js), die Musik kommt von irgendwo aus dem Netzwerk. Klingt total cool, ist günstig, ist prinzipiell nicht schwer zu machen – aber dauert halt seine Zeit. Mal schauen was Thomas Kroeber so über das RPi zu sagen hat.

RPi is booting. Lernte Programmierung wegen Videospielen. Kenn ich. RPi soll lernen unterstützen (günstig, offen). Er nutzt QtQuick und JavaScript für die Entwicklung von Software auf dem RPi (- kommt auch von Nokia). Kleine QtQuick/QML/Shader Demo. Pins sind programmierbar – er schaltet jetzt eine Diode an und aus. Technische Probleme. Er kann sein Programm nicht durchziehen. Wieder sehr schade, dass nicht mehr geklappt hat.

Haha 😀 Der Moderator: “Live coding which doesn’t kill us, makes us stronger.“

Everyone loves robots

Jason Huggins. Wieder etwas ähnliches wie die letzten zwei Talks. Hoffentlich klappt dieses Mal alles. Ich stehe ja total auf diese Hardware+JavaScript Geschichten.

“Testing is not cool. Robots are cool. Robots can test.“ Er hat einen Roboter gebaut, der Angry Birds spielt. (Quasi ein beweglicher „Finger“, der ein iPhone bedient. Bilder sagen mehr als Tausend Worte.)

(Whooo, MrDoob sitzt ein paar Plätze weiter! 🙂 )

Robot playing Angry Birds.

Robot playing Angry Birds.

Echt spannend. Erste Prototypen mit Lego, dann Gridbeam. Roboter besteht am Ende aus Arduino, Bitbeam, JohnnyFive, Firmata. Live Demo. Roboter-Finger wird mit JavaScript gesteuert. Funktioniert mit inverse kinematics. Kenne ich noch von Animationen 😀 Man könnte mit dem Roboter physische unit tests für Angry Bird schreiben. Toller Talk. Roboter kostet ungefähr 100$ an reiner Hardware. Sein nächstes (nicht ganz ernst gemeintes)  Ziel: Einen Roboter bauen, der Roboter baut.

Prof. JavaScript and his incredible machines

Sebastian Golasch – und es geht weiter mit Hardware-Prototypes. 🙂 Es steht ein verrückter Professor auf der Bühne 🙂

Hat (oder will?) ein Framework entwickeln um wireless devices in der Umgebung zu finden. (Wenn ich es richtig verstanden unabhängig von Bluetooth, WiFi und ähnlichem. Hauptsache irgendeine wireless Technik ist vorhanden.)
Jetzt ein Kinect-Hack. Ein Dose (auf einer beweglichen Unterlage?) schmeißt er mit einem Wink aus zwei Metern Entfernung um 🙂 Mit Kinect kann man schon lustige Dinge anstellen. Er zeigt jetzt KinectJS. Eine JavaScript Bibliothek für Kinect.
Jetzt folgt noch ein Tanzspiel mit einer (selbstgebastelten?) Tanzmatte. Haha! 😀
Nun stellt er Makey Makey vor. Noch nie gehört… Damit kann man anscheinend Eingabegeräte aus leitenden Materialien bauen. Bsp.: Ein Keyboard bei dem die Tasten Bananen sind. o_O Auch ein spitzen Vortrag!

What does Chakra do with your JavaScript?

Zurück von der Hardware zur Software. Es geht wieder um Browser. Andrew Miadowicz erklärt die Funktionsweise der JavaScript Engine Chakra von IE10.

JIT-Compiler. Wichtiger Fokus auf Security. Schneller Start. Standardisiert. Pausen minimalisieren. Mehr Details zu JIT: optimistische Optimierungen, spezielle Integer Operationen. schnellerer Attributzugriff, function inlining. Er zeigt viele native Codebeispiele, die ich hier nicht wiedergeben kann.
Jetzt stellt er noch einmal kurz Windows 8 Web Apps vor. Die Arbeit an IE11 wird wohl bald richtig beginnen. (IE10 soll ja offiziell mit Windows 8 veröffentlicht werden, wenn ich mich nicht irre.) Windows Phone 8 nutzt auch Chakra.

Mein Akku macht bald schlapp, aber ich sehe jetzt ohnehin nur noch den vorletzten Talk. Den allerletzten Talk von MrDoob über three.js werde ich leider, leider verpassen. Aber umso mehr freue ich mich auf die Videos, wenn sie online kommen. Man darf ja auch nicht vergessen, dass parallel zu fast alle Vorträgen, die ich gesehen habe, noch ein zweiter Vortrag stattgefunden hat.

How to get rich (quick) with JS

Da wird man ja sentimental! Letzter Talk für mich. Markus Leutwyler philosophiert über open source Software. Warum es immer mehr freie Software gibt und wie sich das auf uns auswirkt. (Der Zeitplan sieht knapp aus. Vielleicht muss ich die letzten 5 Minuten des Talks schwänzen.)

Er zeigt uns, dass wir freie Software mittlerweile als selbstverständlich hinnehmen. Ah, cool – er selbst arbeitet an WebOS. Software war nicht immer so toll. Sie hat viel gekostet und war nicht standardisiert. Dann kam das Web. Jeder konnte Webseiten mit einem Texteditor erstellen, jeder konnte den Code einer fremden Seite frei betrachten. Code sharing/social coding wurde populär. Alle wichtige Bestandteile des Internets waren frei wie z.B. Browser. (Telefonkosten mal außen vor gelassen → keine Software^^). Web wird durch mobile devices immer wichtiger, da es überall zugänglich ist und von jedem Gerät unabhängig des Betriebssystems verstanden wird. Warum ist das Web nicht immer native (WebOS, ChromeOS, Firefox OS, Win 8)? “Apps should die.“ “Download app, install app, use app, forget app.“ Die ersten zwei Schritte sind unnötig. Man sollte eine App wie eine Internetseite nutzen können.
Das Web hat gute communities und ist für neue Programmierer leicht zu erlernen. Wie sollen Entwickler dann aber Geld verdienen? Services anstatt Software anbieten (Support, Consulting, Cloud Services, etc.)
Zum Schluss ein paar Erfolgsbeispiele mit Erklärungen: PhoneGap/Cordova, WebOS/EnyoOS, jQuery.

Und das war es für mich. Jetzt muss ich meinen Zug erwischen, wo ich noch ein kleines Fazit schreibe 🙂

Fazit

Sitze jetzt im Zug und mein Akku liegt in den letzten Zügen. (Irre komisch!) Möchte nur noch ein kurzes Fazit zur Konferenz geben:

Tolle Konferenz mit tollen Talks. Das Catering und Servicepersonal waren spitze. Genauso WLAN und Mail-to-Print. Schade, dass es bei zwei Talks technische Probleme gab, aber das war halb so wild. Bei manchen Themen waren 30 Minuten meiner Meinung nach zu kurz, für die meisten aber optimal. Die Themenwahl war auf jeden Fall schön abwechslungsreich.
Für mich die heißesten (relevanten) Themen waren functional programming und TypeScript. Ansonsten haben es mir persönlich die spielerisch Themen im Bereich Web Audio API und Hardware-Hacks sehr gefallen. Bester Exot war der mathematische Vortrag von John Bender. Natürlich kann ich nur für das Sprechen, was ich gesehen habe. Over and out! 🙂

Update vom 17.10.

Yeehaa! Die Videos trudeln langsam ein. Zum Glück auf YouTube anstatt blip.tv…

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.