Wie für einen wahren Hackathon üblich findet das Coding Nachts statt. Wir starten am 15.Juni um 19.00 Uhr und wollen bis morgens um 07.00 Uhr durchmachen. Ziel ist es eine Windows 8 App zu schreiben, die Technologie hierfür bleibt vollkommen Euch überlassen. Ob C# und XAML, HTML5 und JavaScript oder DirectX mit C++, Ihr habt die Wahl wie die technische Umsetzung aussieht. Technische Unterstützung Vor-Ort ist vorhanden, ebenso Verpflegung in Form eines kostenfreien Grillbuffets samt Getränken.

Mein Kollege Tom Wendel und ich werden auch Vor-Ort sein. Wir freuen uns!

Um Dich für den Hackathon zu registrieren folge diesem Link.

WinRT als Grundlage

Die WinRT APIs sind die Basis und zentrale Schnittstelle zum Betriebssystem für die Entwicklung einer Metro Style App. Ob Dateizugriff, Zugriff auf XML Dokumente, Sensoren, Netzwerkzugriff, etc…, die WinRT bietet Anwendungsentwicklern die entsprechende Funktion in einer einheitlichen API. Einheitlich in der Form, das es die gleiche API für C++, C#, Visual Basic oder JavaScript ist.

Ein Beispiel soll hier den Zugriff auf die WinRT verdeutlichen. Die Webcam lässt sich über die WinRT Klasse Windows.Media.MediaCapture.CameraCaptureUI ansprechen. Der folgende C++ Code spricht die Kamera genauso an

using namespace Windows::Media::Capture;

...

auto cam = ref new CameraCaptureUI();

task<StorageFile^>( cam->CaptureFileAsync( CameraCaptureUIMode::Photo )).then([this](StorageFile^ file)
{
    task<IRandomAccessStream^>( file->OpenAsync(Windows::Storage::FileAccessMode::Read)).then([this](IRandomAccessStream^ stream)
    {
        BitmapImage^ image = ref new BitmapImage();
        image->SetSource(stream);
        photo->Source = image;
    });
});

wie der nachfolgende JavaScript Code

var capture = Windows.Media.Capture;

...

var dialog = new capture.CameraCaptureUI();
dialog.captureFileAsync( camera.CameraCaptureUIMode.photo ).then( function( file ) {
    imageElement.src = URL.createObjectUrl(file);
});

Bestehendes Know-How nutzen

Richtig! Es ist vollkommen egal ob man Windows 8 Metro Style Apps mit C++ oder mit JavaScript schreibt. Mit beiden Sprachen hat man die Möglichkeit eine Metro Style App zu schreiben die in Funktion der anderen in nichts nachsteht. Nun, ganz so ist es nicht, da man mit der Oberflächenvisualisierung die ein oder andere Möglichkeit mehr hat. Denn aufbauend auf der WinRT kommt nun die Visualisierungstechnologie zum Zuge. Das ist im Falle von C++ zum Beispiel DirectX oder auch XAML, das ebenso die verwendete Technologie für C# und Visual Basic ist. Nutzt man JavaScript hingegen kann man mit HTML5 und CSS3 bestehendes Webentwickler Know-how anwenden.

Metro Style Apps mit XAML

Hat man Beispielsweise C# und Silverlight oder WPF Know How so liegt es nahe eine Metro Style App mit XAML und C# zu bauen. Es sind die gleichen Techniken und Entwurfsmuster die hier zum Einsatz kommen.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>
    <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
    <TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Grid.Column="1" Style="{StaticResource PageHeaderTextStyle}"/>
</Grid>

Das ist die Defintion der Überschrift samt Back-Buttons aus dem Visual Studio Default Grid Projekt Template. Das ist XAML, das XAML das WPF und Silverlight Entwickler kennen und lieben. Und liebgewonnene Entwurfsmuster wie das populäre MVVM (Model-View-ViewModel) können auch weiter verwendet werden. Unter Umständen lassen sich auch bestehende View Modelle aus Projekten übernehmen.

Metro Style Apps mit HTML5

Webentwicklern steht eine neue Welt offen. Mit den bisherigen Kenntnissen zu HTML5, CSS3 und JavaScript lassen sich nun Windows 8 Metro Style Apps schreiben. Auch populäre Frameworks wie z.B. jQuery lassen sich nutzen und weiterverwenden. Ein weiterer Satz an Funktionalitäten kommt in Form der WinJS. Die WinJS ist eine JavaScript Bibliothek die hilfreiche Funktionalität anbietet und auch visuelle Animationen und Controls und weiteres beherbergt. Mit der WinJS verwandeln sich Standard div Elemente in Windows 8 konforme Steuerelemente.

<div id="template" data-win-control="WinJS.Binding.Template">
    <div class="item">
        <h2 data-win-bind="textContent: title"></h2>
    </div>
</div>

<div class="myList" data-win-control="WinJS.UI.ListView"></div>

Das obige HTML Fragment definiert zuerst ein Template und ein weiteres div Element das ein ListView Control gefüllt mit Daten wird wenn der folgende JavaScript Code ausgeführt wird

onready: function( element, options ) {

    var list = new WinJS.Binding.List([
        { title: "Artikel 1" },
        { title: "Artikel 2" },
        { title: "Artikel 3" }
    ]);

    var template = document.getElementById("template");
    var listView = document.querySelector(".myList").winControl;

    WinJS.UI.setOptions(listView, {
        itemDataSource: list.dataSource,
        itemTemplate: template
    });
}

Ein paar Zeilen HTML und JavaScript lassen eine Liste mit Daten auf dem Bildschirm erscheinen.

Am Horizont: Der Windows Store

Egal in welcher Sprache man seine eigene Metro Style App entwickelt aus Visual Studio heraus hat man direkt die Möglichkeit die Anwendung in den Windows Store zu publizieren. Man benötigt dazu einen Developer Account der für den Windows Store freigeschalten ist. Wie man an einen solchen Account in der momentanen pre-release Phase kommt ist hier im Detail beschrieben.

Eine Reise beginnt

Selbst wenn man noch nicht mit dem Gedanken gespielt hat Windows 8 Metro Style Apps zu entwickeln, mit den heutigen Know-how rund um Silverlight / WPF oder HTML5 / CSS3 besitzt Ihr bereits die Grundlage technisch für die Windows 8 Platform Metro Style Apps zu schreiben. Es fehlen nur noch die letzten 20%, das kennen lernen der Plattform, der Möglichkeiten, um diese in eine gute App Idee umzusetzen.

Ich möchte einfach nochmals klarstellen an wen sich die einzelnen Formate wirklich richten.

Windows 8 Camps (Einsteiger)

Ein Windows 8 Camp ist eine eintägige Veranstaltung die primär an Einsteiger in die Windows 8 Metro Style App Entwicklung gedacht ist. In 5 Sessions werden die wichtigsten Dinge bezüglich dem Einsteig in die App Entwicklung erläutert und die Grundkonzepte von Windows 8 erklärt. Das Format richtet sich primär an Entwickler und technische Entscheider die einen Überblick bekommen möchten. Wichtig: Wer bereits das CeBIT Entwicklerforum für Windows 8 besucht hat oder den TechTalk zu Windows 8 besucht hat, wird vermutlich nicht viel neues erfahren.

Windows 8 UX Camps (Einsteiger)

Ebenso eine eintägige Einführungsveranstaltung, allerdings mit kompletten Fokus auf UX. Dieser Workshop richtet sich primär an Designer und Entwickler die mehr über das Metro UX Konzept erfahren möchten.

Windows 8 Trainings (Fortgeschritten)

Die Windows 8 Trainings sind nun für fortgeschrittene Entwickler gedacht. Diese gibt es in zwei Ausprägungen: einmal für .NET Entwickler und zum anderen für Entwickler die mit HTML5 und JavaScript Windows 8 Metro Style Apps entwickeln möchten. Es handelt sich hierbei ebenfalls um ein eintägiges Format welches ziemlich Code-lastig in die speziellen Bereiche der Windows 8 Metro Style App abtaucht und viele Codebeispiele enthält. Die Teilnehmer erhalten am Ende des Events ein komplettes Hands-on Lab und können die gezeigten Beispiele zu Hause in aller Ruhe ausprobieren. Es ist allerdings kein wirkliches Hands-on Training Vor-Ort.

Windows 8 Hackathon (Einsteiger + Fortgeschritten)

Bei einem Hackathon geht es darum in einer vorgegebenen Zeit eine Anwendung zu entwickeln. Entweder nach freier Wahl oder vorbestimmt durch das Thema des Hackathon. Ein Hackathon setzt voraus das man einen eigenen Rechner mitbringt und die Windows 8 Consumer Preview samt Visual Studio 11 Express installiert hat. Gerne auch virtuell. Am Anfang gibt es eine kleine Zusammenfassung der wichtigsten Punkte von Windows 8 und danach steigt man in die Entwicklung ein. Es werden Vor-Ort Leute da sein die bei Fragen helfen können und am Ende werden fertige oder auch nicht fertige Projekt vorgestellt. Überlicherweise geht ein Hackathon über 12 Stunden und startet am späten Abend, so dass man eine ganze Nacht mit einem Haufen Geeks rumhängt und codet. Der Hackathon eigent sich auch für Einsteiger, da man sich in Gruppen zusammenschliessen kann und eine Aufgabe gemeinsam löst und entwickelt. Man profitiert dabei von Erfahrungen der anderen und selbst wenn man nicht selbst codet, die Kommunikation zwischen den einzelnen Leuten bringt schon einen großen Mehrwert.

 Windows 8 App Excellence Labs

Die Windows 8 App Excellence Labs sind ein besonderes Angebot unsererseits. Wenn Ihr eine fertige Windows 8 App habt so könnt Ihr von uns für das Windows 8 App Excellence Lab nominiert werden. In diesem Lab wird die Anwendung nach den Qualitätskriterien für den Windows Store vorab geprüft und Experten geben Euch noch die letzten Tipps für Eure App. Natürlich nur im Bereich technische Realisierung und UX Design Konformität. Ist der Ausgang im Windows 8 App Excellence Lab erfolgreich, so könnt Ihr Eure Windows 8 App für den Windows Store einreichen und das noch vor dem eigentlichen Release. Das bringt Euch den Vorteil das Eure App im Store ist wenn Windows 8 generell verfügbar sein wird und damit eine der ersten die von vielen Konsumenten installiert werden können.

Fragen?

Falls Ihr noch die ein oder andere Frage habt, kontaktiert mich doch einfach, entweder hier in den Comments oder über das Kontaktformular oder über Twitter an @writeline

Die Handhabung ist denkbar einfach. Möchte man in einem div Element einen Spinner anzeigen so übergibt man dieses der Methode spin()

var output = document.getElementById("output");
var spinner = new Spinner();
spinner.spin( output );

Damit erzeugt man die Spinning Animation zentriert in diesem DIV Element.

Einsatzszenario Grafiken laden

Typischerweise benötigt man einen Spinner wenn man Sachen asynchron nachlädt und die Zeitspanne des Nachladens länger dauert als die Gesamte Anzeige. Möchte man zum Beispiel eine große Grafik dynamisch nachladen ohne das ein leeres Grafikelement angezeigt wird so kann man hier Spin.js einsetzen.

function loadImage(url, element) {
    var spinner = new Spinner();
    var img = new Image();

    img.onload = function() {
        element.appendChild( this );
        spinner.stop();
    }

    spinner.spin( element );
    img.src = url;
}

Die Funktion loadImage erwartet die URL der Grafik-Ressource sowie ein Container Element, z.B. ein DIV um den Spinner zu setzen und danach die Grafik anzuzeigen.

Das schöne an Spin.js ist die Flexibilität der Spinner. Auf der Projektseite lassen sich verschiedene Einstellungen testen und die Optionen werden sogleich als JavaScript zur Verfügung gestellt

Ich selbst habe unterschiedliche Sprachen benutzt oder benutze diese noch. Ob C#, C++, Ruby oder JavaScript, jede Sprache hat Vor- und Nachteile. Doch was mir in den letzten Jahren immer mehr auffällt ist das es nicht auf die Sprache ankommt. Auch auf Frameworks und Tooling möchte ich nicht all zu sehr eingehen, da hat jede Sprache eine breite Basis und auch gute Unterstützung und je nach Einsatzszenario auch dedizierte Frameworks wie z.B. ASP.NET MVC oder Ruby on Rails.

Vielmehr möchte ich auf einen Paradigmenwechsel anhand meiner eigenen Erfahrung eingehen, welcher den Umgang mit API’s drastisch ändern wird.

Do you speak Asynchron?

Unabhängig von der Wahl einer Programmiersprache werden sich viele Teile verschiedener Technologien in Richtung Asynchrone Programmierung ändern. Teilweise hat man solche Dinge heute schon in einzelnen Frameworks drinnen um z.B. Berechnungen in seperaten Tasks zu verpacken und die Aufgaben so auf mehrere Prozessorkerne zu verteilen.

var task = Task.Factory.StartNew( () => { CallSomeFreakingAlgorithm(); }�
// work goes on, we can watch task

Hier wird Asynchronität (C# Code) genutzt um Performance zu steigern indem man die Maschinenressourcen ausnutzt und dem Framework das Verteilen der Aufgabe auf Rechnerkerne bzw. Threads überlässt. Doch asynchrone Programmierung wird auch genutzt um ein performantes oder sagen wir lieber reaktionsfreudiges UI zu erstellen. Das wird primär im Web Umfeld sehr stark genutzt, immmer dann wenn man mit JavaScript per AJAX Aufrufe dynamische Seiteninhalte aktualisiert oder Funktionen aufruft.

$.getJSON( 'http://xyz.de', function( data ) {
$.each( data, function( key, value ) {
// do something with the result });
}); // do something else

Dieser AJAX Aufruf (per jQuery) wird abgefeuert und weiterer Code kann abgearbeitet werden.

APIs werden Asynchron

Die Muster asynchroner Programmierung finden sich in immer mehr Bibliotheken und APIs wieder. Schreibt man heutzutage eine Anwendung für das Windows Phone in Silverlight so hat man mit asynchronen Aufrufen zu tun. Synchrone Aufrufe gehören der Vergangenheit an wenn es um ein schnelles, bedienbares UI geht. Da liegt es nahe das Funktionalität eines Devices über ein Betriebssystem zur Verfügung gestellt wird, eben auch asynchron angeboten wird.

Der Dateizugriff den man bisher vermutlich meist synchron benutzt hat, ist plötzlich nur noch asynchron anzusprechen.

Doch asynchrone Muster haben auch einen wichtigen Unterschied. Wo man bisher z.B. auf ein Dateisystem synchron zugegriffen hat

// Pseudo Code var file = fs.Open();� var content = file.ReadToEndAsString();
console.log( content );

und sicher sein konnte das der Inhalt zu dem Zeitpunkt des Zugriffs vorhanden ist, so muss man bei einer asynchronen API entsprechend mit Callbacks arbeiten

// Node.js Code var fs = require( 'fs' ); fs.readFile( "somefile.txt", function( data ) { // callback for input data }); 

Das sieht bei diesem einfachen Zugriff auf den Inhalt noch sehr einfach und übersichtlich aus, wird aber durchaus komplexer bei mehreren ineinander verschachtelten Aufrufen.

// Node.js multipart/form-data, taken from Felix Geisendörfer function upload_file(req, res) { req.setBodyEncoding('binary'); var stream = new multipart.Stream(req); stream.addListener('part', function(part) { part.addListener('body', function(chunk) { var progress = (stream.bytesReceived / stream.bytesTotal * 100).toFixed(2); var mb = (stream.bytesTotal / 1024 / 1024).toFixed(1); sys.print("Uploading "+mb+"mb ("+progress+"%)\015"); // chunk could be appended to a file if the uploaded file needs to be saved }); }); stream.addListener('complete', function() { res.sendHeader(200, {'Content-Type': 'text/plain'}); res.sendBody('Thanks for playing!'); res.finish(); sys.puts("\n=> Done"); }); } 

Asynchronität – Nicht Egal!

Ganz gleich mit welcher Programmiersprache man letztlich Anwendungen entwickelt, mit asynchronen Aufrufen umzugehen ist essentiell. Es stellt sich also nicht die Frage ob man zum Beispiel für Windows 8 mit C# / XAML oder JavaScript / HTML5 entwickelt, sondern es ist wichtig mit beiden Sprachen asynchron entwickeln zu können und damit ist nicht die Sprachmöglichkeit gemeint sondern der Umgang als Entwickler mit dieser Sprache.

Die Anwendung ist auf Windows Azure gehostet und hier ist der Link: Star Wars: The Old Republic Mobiler Klassenbrowser.

In der Demo nutze ich jQuery Mobile nur Rudimentär. Ich verwende lediglich CSS Klassen und jQuery Mobile Custom Attribute um das Look & Feel zu bekommen. Die Demo ist als ASP.NET MVC3 Anwendung erstellt, in der nächsten Version von MVC ist jQuery Mobile dann auch gleich Bestandteil des Standardprojekttemplates.

Wer anschauen möchte wie die Demo Anwendung von einer Stillosen weißen Webseite in eine Mobil-freundliche Variante angepasst wird kann sich dieses Video reinziehen.

Im übrigen, ich spiele auf Sith Triumvirate einen Söldner und ja, ich finde 2:30h in der Warteschlange auch ziemlich Blöde!

Sanity Check

Nach dem herunterladen vom SDK habe ich mir die Beispiele angeschaut. Es wird Schritt für Schritt erklärt wie man den Azure Service anlegt, eine Rolle hinzufügt, den Code anpasst und das ganze zuerst im Emulator und dann auch in der Cloud ausführt.

Die Beispiele zeigen wie man mit den Azure Diensten Storage, Tables und Queues arbeiten kann. Lediglich die Möglichkeit einen Diagnose Output zu machen habe ich in den Tutorials vermisst. Ich weiß auch nicht ob im Azure Node Package Module die Implementierung vorhanden ist. Der übliche Weg über console.out funktioniert im Emulator nicht und natürlich auch nicht in der Cloud. Das gilt es noch zu prüfen, ansonsten muss man sich wohl mit dem Azure Table Storage behelfen und selbst wegschreiben.

Socket.IO

Getestet habe ich nun mit Socket.IO, einer Bibliothek die bidirektionale TCP Kommunikation ermöglicht. Hier zu werden, je nach Browser Unterstützung, WebSockets, Long-Polling, Server Side Events oder auch Flash verwendet und der Entwickler hat eine transparente API. Zum installieren der verschiedenen Pakete unter Node.js benutzt man npm. Die aktuelle Node Version unterstützt npm auch auf Windows.

npm install socket.io

Nach der Installation kann man das Beispiel von der Socket.IO Webseite nehmen. Ich habe lediglich zwei Änderungen gemacht. In der server.js - welche einfach nur die app.js umbenannt ist - habe ich den Port angepasst. Da man die Anwendung sowohl im Emulator wie auch in der Cloud ohne Änderungen lauffähig haben will, überlässt man die Portwahl der Windows Azure Infrastruktur.

app.listen( process.env.port );

Die index.html enthält eine kleine Modifikation um die Ausgabe  direkt im Browser zu haben anstatt in der Debugging Console des Browsers.

<html>
<head>
  <script src='/socket.io/socket.io.js'></script>
</head>
<body>
<h1>socket.io demo</h1>
<div id="output"></div>
</body>
  <script>
    var output = document.getElementById( "output" );
    var socket = io.connect( 'http://localhost:81' );
    socket.on( 'news', function( data ) {
      output.innerHTML = JSON.stringify( data );
      socket.emit( 'my other event', { my: 'data' });
    });
  </script>
</html>

Node.js support – checked

Der direkte Node.js Support auf Windows Azure ist ein Riesenvorteil im Vergleich zu einem selbstgestrickten Deployment wie ich es oben schon erwähnt hatte. Das Windows Azure SDK für Node.js erlaubt es einfach Node.js Anwendungen in die Windows Azure Cloud zu deployen, die Commandlets lassen sich in beliebige Buildskripte integrieren und gegen Automatisierungen im Build Prozess hat wohl keiner was. Vor allem die Möglichkeit lokal wie gewohnt zu entwickeln, per npm neue Module zu installieren und im Azure Emulator gleich zu testen, vereinfacht die Entwicklung von Cloud-basierten Diensten ungemein. Ich habe Socket.IO hier getestet, ein weiteres Beispiel wäre Node.js im Zusammenspiel mit MongoDB auf Windows Azure.

Markdown Mode für Visual Studio

Github hat mich als erstes mit Markdown konfrontiert. Seit dem liebe ich es und schreibe auch meinen Blog in diesem Format. Obwohl die Extension schon länger existiert bin ich erst jetzt auf diese Aufmerksam geworden. 

This extension provides support for editing files that use the Markdown syntax. In the current version, it supports the following features:

• Syntax highlighting (for Markdown and HTML)
• A live preview window of the file you are editing
• A rudimentary margin with buttons for showing the preview window and copying the HTMLized version of the file you are editing to the clipboard.

Link: Markdown Mode Extension für Visual Studio

Freckle Time Tracking

Zeiterfassung ist ein wichtiges Thema für viele Entwickler. Vor allem wenn die Zeiterfassung so einfach von der Hand geht wie mit Freckle. Das schöne an Freckle, es lässt sich noch mit Github kombinieren und erstellt bei Bedarf seit kurzem auch Rechnungen, wobei letzteres noch in Beta ist. Freckle kostest Stand heute 12$ im Monat, ob es sich lohnt kann man in 30 Tagen Test herausfinden.

Tracking your time—for your clients, for yourself—doesn’t have to be a dreaded task. Dispense with the preparation, avoidance, and gnashing of teeth. Freckle eliminates all the nonsense between you and your work.

Link: Let’s freckle

Helicon Zoo

Helicon Zoo erlaubt es unterschiedliche Web Frameworks auf dem IIS in einer Shared Hosting Umgebung zu installieren. 

Helicon Zoo is a simple and powerful solution for setting up development and production environment with various web frameworks on Windows systems with IIS. It includes such popular frameworks as Ruby on Rails, Django, Node.js and more. Zoo can be used as a platform for Windows shared technology hosting, as well as a development platform for Windows based workstations. It supports IIS 7, IIS 7.5 and IIS Express and uses Web Platform Installer to provide you a simple tool to deploy applications and entire environments.

Inside: Python 2.7 + pip, Django 1.3, Ruby 1.9.2, Rails 3.0, Perl Strawberry 5.12 and Mojolicious 1.34 

Link: Helicon Zoo

Yahoo! Cocktails

Klingt süffig, verspricht viel. Ein Framework um Anwendungen nahtlos auf dem Desktop und im Web laufen zu lassen. Zusammenspiel von HTML5, Node.js, CSS3 und JavaScript.

Developers, time to geek out. Yahoo! has been working behind the scenes for the past several months on an exciting new technology that we think will deeply impact the web developer community. We call it “Cocktails” and it’s the technology powering Livestand, which we launched today at Product Runway.

“Cocktails” is a mix of HTML5, Node.JS, CSS3, JavaScript and a lot of ingenious, creative mind-bending tricks from Yahoo!’s engineers. Today, we are announcing two Cocktails: Yahoo!’s Mojito, an environment-agnostic JavaScript web application framework, and Yahoo! Manhattan, a hosted platform for Mojito-based applications.

Link: Weiterführende Infos zu Manhatten, Cocktails und Mojito

JavaScript ASCII Raytracer

Dieser hat es mir besonders angetan. Ein Raytracer der ASCII ausgibt. Zwar total Sinnlos, aber irgendwie Saucool!

Link: JavaScript ASCII Raytracer auf Github

Notifier.js

Eine JavaScript Bibliothek um Notifications im Browser anzuzeigen. Die Notifications werden gestackt und entsprechend ausgeblendet. Die Demo Seite zeigt die unterschiedlichen Möglichkeiten.

Link: Notifier.js auf Github

Nodeup – A Node.js Podcast

Node.js ist in aller Munde. Die meisten brauchen es eigentlich gar nicht, trotzdem frickeln viele damit rum. Ja, ich auch, bin halt irgendwie doch Geek. Jetzt gibt es eine Podcast Serie die sich Node.js verschrieben hat: Nodeup. Sechs folgend sind bisher raus.

Link: Nodeup

C++ Reference

Neben JavaScript ist auch  C++ wieder ein wichtiger Bestandteil meiner Arbeit. Da habe ich im Netz gleich eine nette Referenz gefunden die auch C++11 abdeckt.

Feature Auszug der Seite 

Link: C++ Reference

public class EntryData
{
  public string Project { get; set; }
  public string User { get; set; }
  public DateTime Date { get; set; }
}

wird zum Beispiel über diese Controller Action

[HttpPost]
public ActionResult Echo( EntryData newEntry )
{
  return Json( newEntry );
}

in die entsprechende JavaScript Notation umgewandelt

{
  "Project": "hi",
  "User": "kuck",
  "Date": "/Date(1320015600000)/"
}

Das sieht soweit ganz gut aus. Allerdings möchte ich in JavaScript mit der entsprechenden lowerCamelCase Notation arbeiten, des weiteren soll das Datum auch entsprechend in ISO UTC serialisiert werden, das lässt sich mit der Json Funktion standardmässig nicht realisieren.

Nach einiger Recherche habe ich auf Codeplex das Projekt JSON.NET gefunden. In JSON.NET kann die Serialisierung in vielen Bereichen parametrisiert werden. So kann man CamelCase sowie Datumsformattierungen anpassen. JSON.NET ist als Nuget Package verfügbar und lässt sich schnell mittels Install-Package Newtonsoft.Json installieren.

Für die Serialisierung habe ich auf Jason’s Blog (welch Wortspiel) eine eigene ActionResult Implementierung names JsonNetResult gefunden die man einfach in seine Controller Methoden einbinden kann.

Damit sieht die Methode im Controller folgendermaßen aus

[HttpPost]
public ActionResult Echo( EntryData newEntry )
{
  return new JsonNetResult
  {
    Data = newEntry,
    Formatting = Formatting.Indented,
    SerializerSettings = new JsonSerializerSettings
    {
      ContractResolver = new CamelCasePropertyNamesContractResolver(),
      Converters = { new IsoDateTimeConverter() }
    }
  };
}

und das Ergebnis ist mein gewünschtes JSON Format:

{
  "project": "hi",
  "user": "kuck",
  "date": "2011-10-31T00:00:00"
}