Community News

Ubuntu: Akustische Signale für länger laufende Befehle
So manche Aktion auf der Kommandozeile braucht ihre Zeit. Um zügig voran zu kommen kann man entweder immer wieder nachschauen ob das Programm seine Arbeit erledigt hat oder man bleibt gleich vor dem Computer und wartet. Da man meist besseres zu tun hat sind beide Optionen nicht ideal. Seit langer Zeit gibt es unter Linux […] mehr
NPM and ReactJS with Rob Ashton

.NET User Group Bern Event

Mittwoch, 7. Januar 2014 (18:00 bis 21:00 Uhr)

NPM and ReactJS with Rob Ashton

Das neue Jahr ist nicht mehr soweit entfernt und den Vorsatz "Horizont erweitern" hast Du auch schon gemacht, gut dann hast Du am Jahresanfang gleich die Möglichkeit diesen in die Tat umzusetzen.

Gemeinsam mit der .NET User Group Zentralschweiz veranstalten wir das Event "NPM and ReactJS". Falls Du am Mittwoch nicht dabei sein kannst, hast du hier eine weitere Teilnahmemöglichkeit für den Donnerstag. Du bist herzlich dazu eingeladen!


Frameworkless development with NPM is great - but patching together odd templating libraries and managing the DOM can end up causing performance issues if the team is not careful to batch updates across components. That's where React comes in - utilizing React as a view engine within a typical framework-free set-up can result in cheap performance gains and a sensible data management strategy throughout the app without any of that horrific two-way data binding found in other systems.

See now as Rob covers how he uses React within a typical application set-up, build tools, common patterns, common modules and patterns for easy wins for the entire team.

About Rob

Rob is an Erlang slinging hipster from the UK who spends most of his time either drinking coffee or talking about JS, Haskell and Clojure. He lives in Glasgow and works wherever he pleases - which might be a coffee shop or a cocktail bar depending on the time of day, although to balance that out sometimes his office is just the local climbing centre. Code punctuated by Coffee and Climbing - the three Cs that he can’t do without.


Die Anmeldung erfolgt unter Xing Events ohne Xing-Account ist eine Anmeldung über unser Kontaktformular möglich.

Das Hashtag auf Twitter: #dnugbenpm

Wir freuen uns auf Deine Teilnahme!

Martin Affolter, Kay Herzam und René Leupold

My Year 2014

My year 2014 was interesting and brought many changes from a professional and personal perspective.

From the personal perspective …

I had two great vacations: I was literally beginning the year under water on a great dive trip in Raja Ampat. Diving with oceanic mantas was something I will never forget:

And my mountainbiking vacation in Colorado/Utah was another extraordinary experience:

However the probably much more profound event in my personal life came in October with the birth of our first child:

From the professional perspective …

I started to do much more teaching in 2014. My engagement at the Berner Fachhochschule was expanded and I am teaching a mayor part in the new CAS (Course of Advanced Studies) “Multiplatform Development with HTML5” and a smaller part in the CAS Mobile Application Development.

During the year I was giving quite a lot of inhouse courses for JavaScript development and AngularJS. These courses range from 1 day bootcamps to 4 day workshops. I held courses for UBS, BIT, Puzzle ITC, Glue, IMS AG, ESGroup and I could again give my JavaScript Bootcamp twice at the ch/open Workshoptage.

I enjoy working in the emerging space of “JavaScript as a serious application platform” so much, that I quit my job as a architect at my former employer. I am now working as a freelance developer and trainer with my own company.
The adoption of JavaScript in enterprise application development is the area I am currently focusing on.

In the typical educational institutions JavaScript is still pinned to the space of “Web-Design”. Apart from that there are almost no public courses to learn professional JavaScript development. Thats where I try to offer my inhouse courses: I specifically target typical enterprise environments and enterprise developers (Java or .NET) and I try to show the similarities between the modern JavaScript ecosystem and the traditional enterprise plaforms and also the pitfalls of JavaScript. I am offering courses for professional JavaScript development, for AngularJS, for React and for architecting modern html5 based frontends for enterprise systems. But I always tailor my courses to the specific needs of the individual team.

For the coming months I have already engagements for courses at Postfinance and at Mobiliar and I am looking forward to work with more teams. If you are interested in setting up a JavaScript/AngularJS/React course or coaching for a development team, please contact me.

There are also public courses scheduled, where I will be teaching:

Starting from April I will also be looking for opportunities to work hands-on in interesting projects. Of course my preference would be to work in projects where JavaScript and enterprise systems intersect.

Rückblick 2014
Die letzten Stunden dieses Jahres sind eine gute Gelegenheit um das Jahr 2014 noch einmal Revue passieren zu lassen. Ich konnte dieses Jahr viel erreichen und noch viel mehr reisen. Grund genug also um nach einer längeren Pause mal wieder einen Jahresrückblick zu schreiben.   Ein Jahr des Lernens Durchs ganze Jahr hinweg zeigte sich […] mehr
Gulp is the Wild West

TL;DR This post described how I implemented asset processing with Gulp in a .NET project.

enter image description here

I am working on a .NET web application using Nancy in the backend and AngularJS in the frontend.
I decided to use a frontend-build based on Gulp. Frontend builds based on Grunt or Gulp have a lot of momentum right now, and this seems a better option for me than some .NET based tools like Cassette or SquishIt

By the way: if you have a node based frontend build you can run it on each Azure deployment like described here.

My requirements were the following:

  • For development the project should be runnable from VisualStudio without having to trigger a frontend build. That means that all the frontend assets have to be present at development time and referenced from my .cshtml files.
  • For release the frontend assets should be processed (concatenated, minified, revisioned …) by a frontend build. This build also needed to manipulate the .cshtml files, since they must reference the processed assets.

I started with gulp-usemin:

gulp.task("usemin", function() {
    return gulp.src("./Views/*.cshtml")
            js: [ngAnnotate(), uglify(), rev()]


This was nice and easy and worked well … until I had some more requirements …

The problem:
With gulp-usemin you have not access to the stream in a pipeline. So you are limited to list some tasks that should be performed. If you want to do something more fancy, you are out of luck. In my case I wanted to add the output of angular template cache to my main js file after it has been concatenated and minified…
In my case I wanted to append another JavaScript file that contains my angular templates (generated with gulp-angular-templatecache)

So I started looking for another solution… thats where I discovered that I am in the Wild Wild West: gulp-usemin2, gulp-spa, gulp-asset-transform, gulp-inject, gulp-rev-replace, gulp-useref, gulp-rev-all, gulp-rev-collector … all seem somehow to do something similar, documentation is minimalistic and you can waste a big amount of time to find the right plugin combination that works for you.

I ended up with the following combination of plugins:

var gulp = require("gulp");
var ngAnnotate = require("gulp-ng-annotate");
var templateCache = require("gulp-angular-templatecache");
var uglify = require("gulp-uglify");
var addsrc = require("gulp-add-src");
var concat = require("gulp-concat");
var rev = require("gulp-rev");
var minifyCSS = require("gulp-minify-css");
var useref = require("gulp-useref");
var filter = require("gulp-filter");
var revReplace = require("gulp-rev-replace");
var order = require("gulp-order");

gulp.task("angular-templates", function(){
    return gulp.src(TEMPLATES_SOURCES)
        .pipe(templateCache(TEMPLATES_JS, {module: "moonwalk", root: TEMPLATES_ROOT}))

gulp.task("release-assets", ["angular-templates"], function() {
    var assets = useref.assets();
    var jsFilter = filter("**/*.js");
    var moonwalkFilter = filter("**/" + MOONWALK_JS);
    var cssFilter = filter("**/*.css");

    return gulp.src("./Content/**/*.cshtml")
        .pipe(assets)               // Concatenate with gulp-useref
        .pipe(ngAnnotate())         // Process javascript sources to add dependency injection annotations
        .pipe(uglify())             // Minify javascript sources
        .pipe(minifyCSS())          // Minify CSS sources
        .pipe(moonwalkFilter)       // Filter the moonwalk.js source file, which is generated above by useref
        .pipe(addsrc("Temp/" + TEMPLATES_JS))// Add the templates.js to the stream, which is generated by a seperate task
        .pipe(order(["**/" + MOONWALK_JS, "*.js"]))// Order stream, so that templates.js is appended to moonwalk.js (needed, since templates depend on the angular module)
        .pipe(concat(MOONWALK_JS))// Concat the existing moonwalk.js and the templates.js into moonwalk.js
        .pipe(rev())                // Rename the concatenated files
        .pipe(useref())             // Replace the original references in the cshtml with the concatenated and processed resources by usemin
        .pipe(revReplace({replaceInExtensions:[".cshtml"]}))         // Replace the usemin generated resources with the reved resources

And by the way: This thread about running tasks synchronously is representative for Gulp (final verdict: “This will be fixed in gulp 4”) … welcome in the wild wild west!


Für die Forumaktivitäten und Termine werden wir vorläufig die Xing-Plattform nutzen. Nähere Informationen findest Du unter dnug-bern.

Veranstaltungshinweis SQL Performance Tuning