AJAX mit Ruby on Rails und :remote => true

Mit :remote => true bietet das das Ruby Webframework Rails eine sehr einfache Methode um mit Hilfe von AJAX eine Webseite zu aktualisieren. Dieses kann z.B. einfach zu HTML-Elementen wie Formulare, Buttons, Links und Checkboxen hinzugefügt werden. Dadurch werden z.B. gefüllte Formulare nicht mehr wie gewohnt an den Webserver gesendet, sondern mit AJAX. Man erspart dem Benutzer dadurch einen lästigen ggf. langwierigen Seitenaufbau. Im Gegenzug muss man sich aber selber um eine Aktualisierung der Webseite mit Hilfe von jQuery oder JavaScript kümmern.

Folgender Code in einem View erstellt eine Checkbox welche bei einem Klick mit Hilfe von AJAX einen HTTP Post an die angeben URL sendet:

check_box_tag( 
  "my_checkbox", "i_am_checked", false, 
  data: { 
    remote: true, 
    url: "my_checkbox/click", 
    method: "POST" 
  }
)

Der Request muss in diesem Fall vom my_checkbox Controller angenommen und verarbeitet werden. Um die Ansicht des Benutzers zu ändern schickt man mit den bekannten Rails Methoden Javascript an den Browser zurück. Im my_checkbox_controller.rb erweitert man z.B. die respond_to einfach um ein format.js:

def click
  respond_to do |format|
    format.js {}
  end
end

Der dazugehörigen View (click.js.erb) wird somit an den Browser zurück gesendet und man kann per JavaScript die Webseite aktualisieren:

console.log('I am the response!')
alert('You clicked the checkbox!')

Rails bietet mit :remote=>true somit eine wirklich einfach Methode um AJAX für seine Webseite einzusetzen!

Achim Ledermüller
Achim Ledermüller
Lead Senior Systems Engineer

Der Exil Regensburger kam 2012 zu NETWAYS, nachdem er dort sein Wirtschaftsinformatik Studium beendet hatte. In der Managed Services Abteilung ist unter anderem für die Automatisierung des RZ-Betriebs und der Evaluierung und Einführung neuer Technologien zuständig.

How css-tricks improved my work life

My relationship with CSS is some kind of a love-hate one and I think that is a sentiment a lot of web-devs share with me.
My biggest issue with it is, that it is really counterintuitive and most of the time it feels a bit like solving puzzles to make things align the way you want it to.

and oftentimes it feels a lot like


Properties that mean the same thing being worded inconsistently – I’m looking at you…

vertical-align: middle;
text-align: center;

And there is also some questionable naming with ‘grey’ (#808080) being darker than ‘darkgrey’ (#a9a9a9)…
In general there are too many quirks you need to just know. Unless you work with it every day, you need to google every second line in order to write your stylesheets.
There you can find all sorts of guidelines, help, blogposts with a nice mix of bad-practices and outdated information.
What helped me a lot is the website css-tricks.
(mehr …)

Jennifer Mourek
Jennifer Mourek
Junior Developer

Jennifer (von eigentlich jedem nur "Feu" genannt) verbrachte ihre Kindheit im schönen Steigerwald und kämpfte sich bis zum Abitur durch die Schule. Seit September 2016 unterstützt sie nun im Rahmen ihrer Ausbildung zum Fachinformatiker die Development Abteilung bei Netways und widmet sich dort dem Web Development. Ihre Freizeit verbringt sie hauptsächlich in den virtuellen Welten von 'Dota 2' und diversen anderen Games, an der Kletterwand in der Boulderhalle oder damit ihren Freunden und Kollegen auf...

NodeJS HA mit PM2…

ich hatte in Vergangenheit bereits einen Blog Post über NodeJS in Verbindung mit dem NodeJS ‘Cluster’ Modul geschrieben ( siehe hier ), nun möchte ich euch zeigen wie Ihr eure NodeJS Anwendung auch ohne Programmierarbeit (also als reine Ops Tätigkeit) zum Cluster umfunktioniert und wie ihr diese anschließend verwalten könnt.
nodejs-logo-2015
Legen wir los, wir benötigen hierzu NodeJS, am besten 4.4 LTS und 4 zusätzliche Module/Helper, fangen wir also mit der Installation an…

$ npm install -g pm2
$ npm install -g express-generator
$ mkdir ~/project && cd project
$ npm install --save express
$ npm install --save sleep

…nun generieren wir das Express Anwendungsgerüst…

$ express -f .
   create : .
   create : ./package.json
   create : ./app.js
   create : ./public
   create : ./public/javascripts
   create : ./public/images
   create : ./public/stylesheets
   create : ./public/stylesheets/style.css
   create : ./routes
   create : ./routes/index.js
   create : ./routes/users.js
   create : ./views
   create : ./views/index.jade
   create : ./views/layout.jade
   create : ./views/error.jade
   create : ./bin
   create : ./bin/www
   install dependencies:
     $ cd . && npm install
   run the app:
     $ DEBUG=project:* npm start
$

… danach löschen wir in der Datei app.js alles von Zeile 13 bis 58, wir benötigen nur das Gerüst selbst und ein paar Zeile selbst geschriebenen Code, um diesen kommen wir leider nicht herum, da wir ja auch was sehen wollen.
Fügt nun ab Zeile 14 folgenden Code hinzu…

var crypto = require( 'crypto' );
var util = require( 'util' );
var sleep = require( 'sleep' ).sleep;
function getRandHash() {
    var current_date = (new Date()).valueOf().toString();
    var random = Math.random().toString();
    return crypto.createHash('sha1').update(current_date + random).digest('hex');
}
var myID = getRandHash();
app.get( '/', function( req, res ) {
    sleep( Math.floor( (Math.random() * 3) + 1 ) );
    res.send({
        "ID": myID,
        "PID": process.pid,
        "ENV": process.env
    });
});

…nun starten wir die App über PM2 im Cluster Mode, hier bitte dem Parameter ‘-i’ nur einen Wert gleich der Anzahl der CPU Cores mitgeben. Dann testen wir das Ganze doch gleich mal…

$ cd project
$ pm2 start bin/www -i 4

…ihr solltet nun folgende Ausgabe zu sehen bekommen…
pm2-start-www-cluster
…ihr könnt eure Anwendung auch auf Fehler überprüfen, dafür gibt euch PM2 einen Parameter ‘logs’ mit, der wiederum einige Flags kennt. Wenn ihr nur ‘pm2 logs’ eingebt dann bekommt ihr die Standardausgabe unserer Anwendung zu sehen, wenn ihr zusätzlich das Flag ‘–err’ mit angebt, bekommt ihr die Standard Fehlerausgabe, was für das Debugging recht hilfreich ist.
pm2-logs-examine
So, nun könnt ihr in eurem Browser mal die Anwendung aufrufen. Der Listener der Anwendung horcht auf dem Port 3000. Ein Aufruf auf http://127.0.0.1:3000 sollte ein JSON liefern, ähnlich zu dieser Ausgabe hier…
pm2-cluster-test1
Da wir in unserem Code eine künstliche Verzögerung eingebaut haben, könnt ihr nun mit 2 direkt Aufeinander folgenden Browser Reload sehen das sich die ID u. PID Werte gelegentlich ändern, dies bedeutet, dass unsere Cluster Anwendung funktioniert.
pm2-logo
Ich hoffe ich konnte euch nun zum Spielen und Experimentieren animieren. PM2 wird von der Firma Kissmetrics als OpenSource Project stetig weiter entwickelt und hat noch so viel mehr zu bieten, ganz findige unter euch werden die Monitoring API zu schätzen wissen und diese vmtl. in Icinga2, Graphite, Kibana und anderen Lösungen integrieren wollen.
Dann bis demnächst 🙂

impress.js – Really impressed, I am

Im Alltag ist es immer wieder interessant zu sehen, dass alle sich über Powerpoint™ Präsentationen lustig machen, am Ende des Tages aber doch wieder auf das alte Hausmittel zurückgreifen. Es ist ja auch so schön einfach und eine echte Alternative schwer zu finden.
Aber mal Hand aufs Herz. Mal was anderes ausprobieren tut nicht weh und eventuell ist das neue Tool ja sogar besser.
So einen Vetreter seiner Zunft habe ich letzte Woche durch Zufall gefunden. Es heißt impress.js und basiert auf einem javascript Framework. Inspieriert wurde das ganze durch die bekannte online Lösung Prezi, die im Gegensatz zu impress.js jedoch kommerzielle Zwecke verfolgt und dabei sogar bei ein Paar features im Hintertreffen ist. Bei impress.js beherrscht man nämlich alle drei Dimensionen.
Wie so eine Präsentation aussehen kann, kann man im sich hier anschauen:

impress.js tutorial

impress.js tutorial


impress.js benötigt Serverseitig nicht viel da es sich um javascript handelt und clientseitig ausgeführt wird.
Auch bei der Erstellung wird dem Benutzer freie Hand gelassen. Die Präsentation wird durch eine einzige html Datei definiert und kann mit einem einfachen Texteditor erstellt werden.
Weitaus komfortabler geschiet dies allerding mit dem online Editor strut. Hier kann man sich seine Präsentation zusammenklicken, die Folien anordnen (stauchen, strecken, drehen usw.). Wenn man die Demo benutzt kann man die Präsentation mit Hilfe des Browsers (STRG+S) auf der Festplatte speichern und mitnehmen oder alternativ auf einen Webserver laden und online anschauen. Besonders die Overview und Preview am oberen rechten Rand sind zwar praktisch, werden aber auch leicht übersehen.
 

Christoph Niemann
Christoph Niemann
Senior Consultant

Christoph hat bei uns im Bereich Managed Service begonnen und sich dort intensiv mit dem internen Monitoring auseinandergesetzt. Seit 2011 ist er nun im Consulting aktiv und unterstützt unsere Kunden vor Ort bei größeren Monitoring-Projekten und PERL-Developer-Hells.

Einfache asynchrone Aufrufe in JavaScript mit Async.js

JavaScript ist eine Programmiersprache die als Non-Blocking bezeichnet wird: Wenn ein Funktionsaufruf längere Zeit in Anspruch nimmt, wie das z.B. bei AJAX oder Timeouts der Fall ist, wird der Thread des Codes nicht schlafen gelegt bis der Funktionsaufruf beendet ist, sondern läuft sofort weiter. Es ist nicht möglich auf die Auswirkungen des Aufrufs zu warten, außer man benutzt eine weitere Funktion die dann als Callback aufgerufen wird.
In den Anfangstagen von JavaScript hatte dieses Vorgehen durchaus seinen Sinn: Da die Sprache nur für einfache Animationen gedacht war und kein Multithreading unterstützt hat (was sie übrigens auch heute nur mithilfe von WebWorkern beherrscht), wären sonst bei jedem Timeout die Animationen der Website stehen geblieben. Heute wird JavaScript sehr oft verwendet um per AJAX Inhalte nachzuladen. Komplexere Funktionalität erfordern dann aber immer öfter mehrfach ineinander verschachtelte Callbacks, was den Code schnell schwer durschaubar werden lässt.
Als Beispiel verwende ich nur setTimeout(), man kann sich an dieser Stelle aber auch beispielsweise einen HTTP-GET per AJAX oder eine beliebige andere asynchrone Funktion vorstellen. Je mehr Funktionen dazu kommen, desto verwirrender wird der Code:

setTimeout(function(){
   alert("Du bist jetzt seit einer Sekunde auf dieser Seite");
   setTimeout(function(){
       alert("Seit der letzten Meldung sind 10 Sekunden vergangen");
       setTimeout(function(){
           alert("Eingeschlafen?");
       }, 3600*1000);
   }, 10000);
}, 1000)

Natürlich könnte man stattdessen auch einfach eine Funktion schreiben, die eine Liste an Funktionen als Argumente annimmt, und diese dann alle in Serie aufruft. Einfacher geht es allerdings mit Async.js:

async.series([
    function(callback) {
        setTimeout(function() {
           alert("Du bist seit einer Sekunde auf dieser Seite");
           callback();
        }, 1000);
    },
    function(callback) {
        setTimeout(function() {
            alert("Seit der letzten Meldung sind 10 Sekunden vergangen.");
            callback();
        }, 10000);
    },
    function(callback) {
        setTimeout(function(callback) {
            alert("Eingeschlafen?");
            callback();
        }, 1000*3600)
    }
]);

Die Funktion series führt alle Funktionen der Reihe nach aus. Mithilfe des Callbacks wird Async.js mitgeteilt wenn die Funktion beendet ist. Dieser Code ist zwar länger, aber dafür wesentlich lesbarer: Es ist auf einen Blick zu erkennen, wie lange die einzelnen Schritte dauern und welcher Code dann ausgeführt wird. Auch bei sehr vielen voneinander abhängigen Aufrufen bleibt die Zahl der Einrückungen übersichtlich.
Dieses Beispiel zeigt nur den einfachsten Anwendungsfall von Async.js. Es gibt neben series noch viele andere Strategien um Aufrufe zu synchronisieren. Mit parallel werden die Funktionen nicht seriell, sondern parallel gestartet. Ein Callback wird aufgerufen sobald alle Funktionen fertig abgearbeitet wurden. Außerdem gibt es noch viele funktionale Strategien wie map, reduce und filter, die benutzt werden können um eine Collection aus Daten einfach mit asynchronen Funktionen zu verändern.

Web Notifications – bald für (fast) alle

Screen Shot 2013-06-13 at 10.18.20 AM
Zugegeben, Web Notifications sind an sich ein etwas alter Hut – Google Chrome kann das schon lange und wer das Webinterface von GMail nutzt, kennt sicher auch die ‘Notify me about incoming mails’ Funktion. Dennoch habe ich mich bisher immer zurückgehalten einen Blogpost darüber zu schreiben, denn lange Zeit war das eine WebKit (und z.T. Chrome) Insellösung mit dem ‘webkit’ Prefix und ohne w3c Standard.
Web Notifications sind an sich nichts besonderes: Man erlaubt einer Webanwendung einfach, eine Notification am Desktop anzuzeigen, auch wenn der Browser gerade nicht aktiv ist. Google Mail ist da wohl auch gleich eines der logischen Beispiele: Wenn eine neue Mail kommt, will man darüber informiert werden, aber nicht andauernd auf das Fenster schauen.
(mehr …)

Aspektorientierte Programmierung mit jQuery-AOP

Schon mal was von Aspektorientierung gehört? Nein? Kein Wunder, denn die aspektorientierte Programmierung führt ein ziemliches Schattendasein, obwohl sie in vielen Fällen äußerst praktisch sein kann. Besonders Aufgaben wie Profiling, Logging und Berechtigungen, die in rein objektorientiertem Code viel Aufwand machen würden, lassen sich aspektorientiert sehr elegant umsetzen.

Objektorientierung++

Glücklicherweise versucht die Aspektorientierung nicht das Rad komplett neu zu erfinden, sondern versteht sich eher als Erweiterung zur normalen Objektorientierung. Es gibt einige Probleme die mit der herkömmlichen Objektorientierung nicht trivial (ohne große Mengen an redundanten Code) lösbar sind, da es beispielsweise keine Möglichkeit gibt von außen in das Verhalten von Objekten einzugreifen. An dieser Stelle führt die aspektorientierte Programmierung das Konzept der Aspekte ein, die bestimmtes Verhalten in den gesamten Programmcode “einweben” können. Die Probleme die damit gelöst werden nennen sich Cross-Cutting Concerns, da sie sich über die gesamte Programmlogik erstrecken und nicht gekapselt werden können. Musterbeispiele für solche Cross-Cutting Concerns sind, wie bereits oben genannt Profiling, Logging oder Berechtigungen.
In der Aspektorientierung benutzt man Point-Cuts um alle Stellen im Programm zu definieren an denen bestimmte Aspekte umgesetzt werden müssen. Ein Aspekt wird in der Regel durch einen Funktionsaufruf realisiert, der an ganz bestimmten Point-Cuts aufgerufen wird. Diese Funktionen nennt man Advice. Um ein Advice aufzurufen, wird der Programmfluss an dem Point-Cut unterbrochen und alle Advices werden ausgeführt. Abschließend lässt man die Advices von einer Hilfsmethode (oder je nach Sprache von einem Compiler) an den von den Point-Cuts definierten Punkten einbinden. Dieser Vorgang nennt sich “Weaving”.

Profiler

Am besten lassen sich die Vorteile der aspektorientierten Programmierung an einem praktischen Beispiel zeigen. Unser Ziel ist es einen Profiler zu schreiben, der bei einem gegebenen Objekt die Laufzeiten aller Funktionsaufrufe misst und auf der Console ausgibt. Diesen Profiler wollen wir dann benutzen um das HTML5-Canvas zu profilen. Als Werkzeug verwende ich jQuery-AOP, eine Bibliothek die Hilfsfunktionen für die aspektorientierte Programmierung bietet.
Nach dem Einbinden von jQuery und jQuery-AOP, definieren wir zuerst einen Point-Cut und einen passenden Advice. Der Point-Cut “zeigt” auf alle Methoden des Objekts das wir überwachen wollen. Der Advice wird bei jedem Funktionsaufruf ausgeführt und führt die eigentliche Zeitmessung durch. Beim Weaving benutzen wir die Funktion around(), um festzulegen dass alle Funktionen in den Advice eingebettet werden sollen.

var ctx = document.getElementById("some-canvas").getContext("2d");
// Point-Cut definieren.
var pointCut = { target: ctx, method: /.*/ };
// Advice definieren.
var advice = function(invocation) { 
    var t1 = Date.now();
    var ret = invocation.proceed();
    console.log(invocation.method + ": "  + (Date.now() - t1) + " ms");
    return ret;
}
// Weave
jQuery.aop.around(pointCut,advice);
// Laufzeiten messen
ctx.fillStyle = "rgb(200,0,0)";             // fillRect: 1 ms
ctx.fillRect (10, 10, 55, 50);              // fillRect: 1 ms
ctx.beginPath();                            // beginPath: 1 ms
ctx.moveTo(30, 30);                         // moveTo: 2 ms
ctx.lineTo(150, 150);                       // lineTo: 0 ms
ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // bezierCurveTo: 1 ms
ctx.lineTo(30, 30);                         // lineTo: 0 ms
ctx.fill();                                 // fill: 0 ms

Qooxdoo her!

Pünktlich zu Weihnachten habe ich für alle unter euch die das JavaScript Framework Qooxdoo verwenden, eine nette Überraschung: ein neues Widget!
Im Moment arbeite ich intern an einem Projekt, das auf den vielsagenden Namen “NETRP” hört. Es handelt sich dabei um einen in Qooxdoo umgesetzten, web-basierten Ressourcenplaner. Trotz der sehr großen Auswahl an vorgefertigten Widgets, mangelte es meiner Anwendung aber am Ende noch an einer komfortablen Möglichkeit um einen bestimmten Zeitraum für eine Ansicht auszuwählen. Nach einigem herumprobieren und basteln ist dabei der TimeSlider herausgekommen:
timeSlider1
Der TimeSlider ermöglicht es, aus einem größeren Zeitraum mittels eines verschiebbaren Reglers einen kleineren Zeitraum auszuwählen.  Außerdem ist auch die Größe des ausgewählten Bereichs vom Nutzer verstellbar. Nützlich ist das vor allem um Detailansichten bestimmter Zeiträume oder die Anzeige von Statistiken komfortabel zu realisieren, vor allem da die Verhältnisse des ausgewählten Zeitraums jederzeit klar sichtbar sind.
Zusätzlich gibt es noch die Möglichkeit bestimmte Zeiträume im Slider als wichtig zu markieren (gelb). Typische Use-Cases dafür wären zum Beispiel die Markierung von besonderen Zeiträumen oder die Anzeige von Suchtreffern.
Wer den TimeSlider in einem eigenen Projekt verwenden möchte kann sich die aktuelle Version einfach aus folgendem Git-Repository klonen:
https://github.com/majentsch/qx-timeslider

JavaScript OO Features: Warum in die Ferne schweifen, das Gute liegt so nahe!

Stellen wir uns vor, Webentwickler würden anstatt Programmiersprachen Fremdsprachen sprechen: Englisch könnten wir, aber Französisch brauchen wir jetzt leider für unser neues Projekt.
Ganz logisch: Das mit den lateinischen Buchstaben kennen wir ja bereits, syntaktische Schnörksel wie Gravis sind unnötiger Codesmell und allgemein ist die Grammatik ja ziemlich komisch (bestes Beispiel “Grand Prix Eurovision de la Chanson Européenne” – das ist doch viel mehr Tipparbeit als Eurovision Song Contest und sagt das gleiche). Also nimmt man doch lieber alles was man nicht kennt aus der Sprache raus und erfindet seine eigenes, smarteres Französisch, das halt französische Wörter nimmt, aber vom Aufbau an Englisch angelehnt ist. Englisch ist ziemlich bekannt und ausserdem genauso feature complete, das macht die Sache für andere auch einfacher. Und für die Franzosen (die nicht in der Lage sind, unser besseres Französisch zu sprechen) schreibt man dann bei der eigentlichen Kommunikation einfach das schnieke Französisch 2.0 in das bloated Französisch 1.0 um, damit die auch was verstehen.
Klingt komisch? Willkommen in der Welt von JavaScript. Nach CoffeeScript hat jetzt Microsoft seinen Entwurf für ein ‘besseres’ JavaScript herausgebracht. Hauptargument: Vererbung und Objekte in JavaScript sind ja schwer zu handeln. Leider stimmt das seit ECMAScript 5 dank Object.create nicht mehr ganz (und das wird mittlerweile von einer ganzen Reihe Browser unterstützt), nur ist es da anders als man es gewohnt ist. Daher ein kleiner Exkurs in ECMAScripts ‘neue’ Objektmethoden:
Die Methode:

Object.create(parent,properties)

Erstellt in ECMAScript 5 ein neues Objekt,d das von parent erbt und die Eigenschaften aus properties besitzt. Z.b. würde:

 var Hund = Object.create(Animal,{ name: { value: 'Hund', writable: false } }) 

Ein Objekt Hund erstellen, das von Animal erbt und “Hund.name” würde einfach “Hund” zurückgeben. Was jetzt wirklich neu ist: Durch das writable: false werden sämtliche Versuche, Hund.name zu überschreiben ignoriert. Es gibt neben value und writable aber noch weitere praktische Attribute, nämlich:

  • enumerable: Gibt an ob die Eigenschaft bei einer for..in Schleife über das Objekt erscheint
  • get: Sehr praktisch: Ruft eine Funktion beim lesenden Zugriff auf die Eigenschaft auf, anstatt einfach nur einen wert zurückzugeben.
  • set: Ebenfalls praktisch: Ruft beim schreibenden Zugriff auf die Eigenschaft eine Funktion auf, anstatt einfach den Wert in die Eigenschaft zu schreiben
  • configurable: Definiert, dass die Konfiguration der Eigenschaft nicht verändert werden darf
Mit Object.defineProperty(objekt,name,properties) kann man auch nachträglich Eigenschaften an ein Objekt hinzufügen (z.B. für komplexere Methoden).

Man sieht also gleich, dass es hier ganz neue Sprachfeatures und nicht nur syntaktische Neuanordnungen gibt. Die sind zwar nicht ganz das sind, was man von der Objektorientierung her kennt (wo ist das ‘class’ Schlüsselwort?), aber JavaScript ist halt auch kein Java.
Zusätzlich dazu gibt es noch zwei praktische Methoden um Änderungen an Objekten zu verhindern:

  • Object.preventExtensions(Hund): Verhindert, dass man mit defineProperty Eigenschaften nachträglich an Hund hinzufügt
  • Object.seal(Hund) : Hier könnte man die Objektstruktur von Hund nicht mehr verändern
  • Object.freeze(Hund) : Hier kann man auch vorhandene (und auf writable gesetzte) Eigenschaften des Objektes nicht mehr ändern

Die Features werden von allen neueren Browsern (IE9+,FF4+, Chrome 5+, Opera 11.60+) unterstützt, für ältere gibt es bei Modernizr einen Polyfill.
Ich finde zwar z.B. Typescript eine ganz nette Sache und wirklich gut gemacht (gerade für JS Neulinge aus der Java/C# Welt). Allerdings würde ich persönlich mir wünschen dass mehr Energie in die bessere Unterstützung von ‘echtem’ JavaScript in IDEs gesteckt wird, anstatt andauernd das Rad neu zu erfinden. Am Ende interpretieren die Browser dann doch JavaScript – und das ist jetzt nicht so komplex oder aufwändig als dass man auf Zwischeninterpreter angewiesen ist um ein Projekt In-Time durchzubekommen. Immerhin gibt es auch gute (und kleine!) Bibliotheken, die einem das Leben erleichtern, wenn die Sprache einem doch Probleme bereitet.
Wer mehr zu den Objekt.* Methoden lesen will:

TypeScript: Statisch typisiertes Javascript

TypeScript ist eine auf JavaScript basierende neue Sprache, die von Microsoft entwickelt wurde. Neben der vollständigen Kompatibilität zu JavaScript bietet sie bereits jetzt einige interessante Features, die zukünftig im Rahmen des ECMAScript 6-Standards in JavaScript einfließen sollen: z.B. Klassen, Interfaces und Module:

class Greeter {
  greeting;
  constructor (message) {
    this.greeting = message;
  }
  greet() {
    return "Hello, " + this.greeting;
  }
}

(Beispiel leicht angepasst von www.typescriptlang.org.)
Außerdem sind Variablen in TypeScript optional typisierbar:

function greet(message : string) {
  alert(message);
}

Dies macht es IDEs einfacher, für Scripts Auto-Completion zu ermöglichen. Momentan wird dies nur von Visual Studio unterstützt, aber mit der Zeit sollten auch andere IDEs Unterstützung für TypeScript bieten.
TypeScript kann in allen Browsern verwendet werden, die JavaScript unterstützen. Dazu kann es entweder manuell mit dem TypeScript-Compiler (“tsc”) zu JavaScript kompiliert werden oder zur Laufzeit per Einbindung einer JavaScript-Library, die dann clientseitig im Browser den TypeScript-Code kompiliert.
Eine Möglichkeit, TypeScript auszuprobieren gibt es auf der offiziellen Webseite unter http://www.typescriptlang.org/Playground.