I recently had to implement a JavaScript single-page web application – after years of doing .NET and XAML development. From projects which I worked on some years in the past, my opinion about JavaScript was not very good: There was no good IDE support, refactorings are hard to perform and the code in bigger project always gets unmanageable due to the untyped nature of JavaScript.
Nonetheless, web applications are indispensable nowadays and each developer has to deal with it sooner or later. The first problem of the project I faced was that in the JavaScript world there are tons of libraries and frameworks and almost no commonly usable built-in framework functions like the .NET core framework in the C# world has.
Because I had no idea about recommended JavaScript libraries, I first asked some colleagues what libraries and frameworks I should look into. I came up with the following list:
- JQuery for DOM handling and other “low-level” stuff
- RequireJS for dependency resolution and module loading
- KnockoutJS as bindings engine which is used to implement the MVVM pattern
First, I started with JavaScript and implemented the core infrastructure which glues the mentioned frameworks together. The idea was to have a XAML/MVVM like programming model with bindings provided by KnockoutJS. Because the KnockoutJS library only provides bindings but no loading of subviews, view model instantiating, and so on, I built an own framework during the project. The result of this work is the Visto JavaScript Framework. It enforces the base structure of the application using conventions over code, manages dependency loading using RequireJS, manages the loading of views and view models and sets up the KnockoutJS bindings.
In the first half of the project I used JavaScript as programming language for implementing the application. Because the application code became more and more unmanageable due to the dynamic nature of the language and missing language features (e.g. there is no build-in concept of classes only prototypes), I started to look into TypeScript. TypeScript is a new language which adds optional static typing and other features like classes to JavaScript. In the build process, the TypeScript code will be compiled to JavaScript. To use existing JavaScript libraries in a typed manner, it is possible to write description files which adds static typing for existing framework APIs.
At the beginning, I only implemented some of the view models in this new language, but then I saw all the benefits and ported the whole application. Now that everything is typed, programming in this environment feels almost like C#: There is IntelliSense, everything is typed – except the bindings in HTML – and even generics exist.
After switching to TypeScript and implementing the core framework, development made really fun, even if I was implementing a web application with HTML and JavaScript. Using Visual Studio you get excellent IDE support for TypeScript – code completion, basic refactorings, debugging in Internet Explorer and more. Implementing views in HTML and KnockoutJS is nice, but you don’t have binding IntelliSense as in XAML and binding errors are sometimes tricky to understand. In contrast to XAML you don’t need converters, you can also write simple code fragments in your bindings. All in all, comparing KnockoutJS with XAML bindings is hard as each technology has its pros and cons, but in general I like XAML more because it is more strict in separating business logic and presentation. But the fact that we are talking about web development and some years ago every GUI has been manually made by editing the page DOM, KnockoutJS is a very powerful tool.
Because I had no experience in JavaScript, I choose libraries I thought were best and later I discovered that there are a lot more alternatives which are even more popular. One such option is AngularJS, a JavaScript framework which – I think – provides the functionality which I would have needed in this project and which has a big and growing community. In the next JavaScript project, I will evalute this framework too.
To sum up, it was a very interesting project and I saw, that the tools for building complex web applications have improved a lot in the last years. However, I still like the .NET framework and XAML more because it is a well established technology with a big community which is used and supported by a lot of companies. In the JavaScript world however, there is currently no framework you can safely use because it is not clear what framework is still available and maintained in a couple of years. In contract to the framework debate, I would always recommend to use TypeScript instead of JavaScript: It makes the life much more easy and all existing JavaScript code can be used without a problem. The only downside is, that TypeScript can only be used effectively with Visual Studio as it’s currently the only editor with good TypeScript support (e.g. IntelliSense, refactorings, build chain).
