This post was originally published on Coding Glamour.

Allereerst een kleine update, op 1 oktober ben ik overgestapt van de de gevestigde ordenaar de wondere wereld van een startup. Niet alleen cultureel een verschil, maar ook een shift van .NET naar javascript, van Solr naar Redis, van SVN naar Git en van een Xeon workstation naar een Macbook Air. En nog belangrijker, van tafeltennis naar tafelvoetbal. Voor de mensen die niet 74 feeds in Google Reader hebben zitten: Cloud9 is een IDE, vergelijkbaar met Eclipse of Visual Studio, maar volledig draaiend in de browser; het is 'c9.io' intikken en gaan. Debugging, stack exploration, versiebeheer, you name it.

Cloud9 is helemaal gebouwd in javascript, de client is gebouwd op APF, een open source framework voor web applicaties dat intern is ontwikkeld (heeft wel wat weg van Webforms). De backend draait op node.js, een event-based framework voor het schrijven van server side applicaties in javascript. Doordat node vanaf design geschreven is met het idee dat alle code event-driven moet werken heb je bijna geen blocking calls, en kunnen je threads sneller vrijgegeven worden: ergo: je kan meer requests handlen in je web server (gesimplificeerde weergave :)).

Direct spelen met alle code
Het leuke van werken aan een IDE is dat je features die je zelf handig vind gewoon kan inbouwen, zoals het met een klik laten klonen van de GitHub repository waar alle code samples uit de blogpost zitten. Ergo, om alle code uit deze post in hun echte context te zien en meteen te runnen klik hieren druk hierna op 'Run'. Javascript, javascript, javascript
Werken met node.js heeft tot logisch gevolg dat je hele applicatie, van caching-layer tot menu, en van syntax highlighting tot routing draait op dezelfde code. En dat heeft tot gevolg dat het doel dat Microsoft ooit voor ogen had met Microsoft Volta:

Microsoft heeft een eerste community technology preview van het ASP.net-framework Volta uitgebracht. Met het pakket hoeven ontwikkelaars zich niet meer over de scheiding tussen server- en clientside code druk te maken.
Schizofrene modules
Tijd voor code! Hier een heel simpele javascript module die werkt met RequireJS: calc.js. 

define(function () {
    return {
        // takes in an array of numbers and sums them
        sum: function (numbers) {
            var total = 0;
            for (var ix = 0; ix < numbers.length; ix++) {
                total += parseInt(numbers[ix], 10);
            }
            console.log(total);
            return total;
        }
    };
});

An sich een normale module, alleen gewrapped in een functie 'define', waardoor deze on demand in te laden is.

Client side gebruiken
Client side usage is eenvoudig, je include RequireJS en vraagt daarna je modules op: 

<script src="/client/require.js"></script>
<script>
    // load the calc module, and bind it to the UI
    require(["require_modules/calc"], function (calc) {
        // callback that is fired when the module is loaded
        $('#numbers-btn').click(function () {
            alert(calc.sum($('#numbers').val().split('+')));
        });
    });
</script>


En nu server side!
Als je de app runt, vind je op /calc?1&2 de server side weergave van deze module: 

$ curl http://module.username.c9.io/calc?1&2&5
8

Als web framework bovenop node.js gebruik ik hier connect, deze heeft een routing module die werkt als: 

app.get("/my/url", function (req, res) {
    // tah dah, req is the incoming request
    // res is the outgoing response
    res.end("hello world!");
});

Om RequireJS modules te gebruiken in node.js hebben we een gemockte versie van de 'define' functie nodig, deze zie je op line 1: 

require("requirejsnode");

Hierna zijn RequireJS modules in te laden via de normale 'require' functie in node.js (die synchronous is, en zonder callback werkt). Je kunt nu de module opvragen en de beschikbare functies server side aanroepen. 

var calc = require("./require_modules/calc.js");
res.end(calc.sum(keys).toString());


En dit is handig omdat?
De code editor die onderdeel is van Cloud9, en inmiddels ook integraal onderdeel van GitHub is heet Ace, en wordt volledig opgebouwd in javascript. Toen ik een server side highlighter nodig had kon ik met 36 regels code de view-only versie van de editor aanbieden aan iedereen zonder dependencies op javascript!

jQuery en de DOM
Ook werken met de DOM is mogelijk. Zie bijvoorbeeld mijn zeer intelligente jQuery plugin. Standaard formaat en geen extra code geschreven. Op de client kan je hem gebruiken zoals je elke jQuery plugin gebruikt.

Om deze plugin zijn werk server side te laten doen hebben we een server side implementatie van de browser nodig: jsdom. Je kunt deze aanroepen via 'jsdom.env', en een aantal script dependencies meegeven die direct gebruik maken van de DOM: 

// load /client/index.html
// with dependencies on jQuery and the plugin
jsdom.env("./client/index.html", [ "http://code.jquery.com/jquery-latest.min.js", "require_modules/schizo.js" ], {}, function (err, window) {
    // when loaded, grab jQuery
    var $ = window.jQuery;
        
    // apply the plugin
    $('h1').jan();
    
    // write the output to the client
    res.end(window.document.documentElement.outerHTML);
});


Tah dah!
Hopelijk heeft dit jullie nieuwsgierigheid gewekt want het geeft een geweldig gevoel om (bijvoorbeeld) validatie code nog maar 1 keer te schrijven waarna je de echte validatie zowel client- als server side kan uitvoeren. Daarnaast is het ook gewoon heel cool om webapplicaties in een browser te schrijven. Have fun :)Nogmaals: om de samples direct live te zien: fork me! Klik op 'Run' en een web server met deze examples starten.