Blog: JavaScript

Aurelia JS: Detect dirty checked properties during development

March 29, 2017, (updated on October 6, 2017), 2 comments, Software Development

I am currently working on new single-page web application based on the Aurelia framework. To avoid performance problems, we want to completely avoid dirty checked properties and method calls. Bindings are dirty checked whenever the framework cannot use another mechanismn than regularly polling for changes. It is important to detect dirty checked properties as early as possible so that they can direcly be avoided and not too many depenencies have to be changed. I found a simple solution: Just intercept the dirty check subscription method and print the name of the dirty checked property name to the console. In your […] Read more...

Tags: , ,

Aurelia JS: Implement a dialog service which renders Bootstrap UI dialogs

December 19, 2016, Software Development

I’m currently working on an SPA (single-page application) which uses the Aurelia JavaScript client framework and Bootstrap UI CSS framework. In the application I need to show various custom dialogs. This is why I implemented a reusable dialog service class which simplifies the creation of Bootstrap based dialogs. In this article I’d like to share and explain the code of this dialog service and the required helper classes. The sample code is written in TypeScript but it can easily be converted to ES6 JavaScript. Implement the dialog service and base classes First we need to implement the dialog service – […] Read more...

Tags: , , ,

SystemJS module loader: Enable JavaScript debugging with Visual Studio and Internet Explorer

June 26, 2016, Software Development

In a project, we switched from the JavaScript module loader RequireJS to SystemJS. After the migration, debugging JavaScript directly from Visual Studio in Internet Explorer stopped working. The problem is that Visual Studio cannot detect the loading of script files because SystemJS uses JavaScript HTTP calls instead of injected <script> tags to load modules. But there’s an option in SystemJS to use <script> tags. The option can easily be enabled as follows: <script> System.config({ meta: { "*": { scriptLoad: true } } }); </script> After enabling this setting, JavaScript debugging should work as expected. Read more...

Tags: , , , ,

OpenLayers 3: Add the Bing Maps Traffic layer to your map

April 7, 2016, Software Development

The following code shows how to add the Bing Maps Traffic layer to your OpenLayers 3 map. First, we have to implement the computeQuadKey function which takes the tile coordinates and calculates a quadkey identifier which is required for the Bing API request: var computeQuadKey = function(x, y, z) { var quadKeyDigits = []; for (var i = z; i > 0; i--) { var digit = 0; var mask = 1 << (i - 1); if ((x & mask) != 0) digit++; if ((y & mask) != 0) digit = digit + 2; quadKeyDigits.push(digit); } return quadKeyDigits.join(''); }; With […] Read more...

Tags: , , , ,

JavaScript decorator to add pre- and post-logic to a Promise

March 6, 2016, Software Development

In this blog post, I’ll describe the simple concepts of JavaScript Promise decorators. They are a simple way to add logic which is run before and after the exection of a Promise (a.k.a. aspect-oriented programming). As soon as you see my two samples, you’ll get the idea… The first sample shows a Promise decorator function which shows and hides a loading screen (I use TypeScript typings to show the types of function arguments): function showLoadingScreen<T>(action: () => Promise<T>) { ShowLoadingScreen(); return action().finally(function () { HideLoadingScreen(); }); } The decorator can be used in the following way: function longRunningAction() { return […] Read more...

Tags: , , ,

Asynchronously loaded Unit Tests with Jasmine and RequireJS

March 1, 2016, Software Development

The following check list shows how to write JavaScript Jasmine Unit Tests where the tests are asynchronously loaded from AMD modules with RequireJS. Download the Jasmine source files and extract the lib directory into an empty folder. Download RequireJS and copy the require.js file into the lib directory. In the lib/jasmine/boot.js file, remove the env.execute(); call from the window.onload callback. Create a SpecRunner.html file in the directory root with the HTML content shown below. As you can see, the embedded script loads the defined Unit Test modules and manually calls the previously removed execute() method: <!DOCTYPE html> <html> <head> <meta […] Read more...

Tags: , , , , ,

Angular 2: Convert input values to the correct type with a TypeScript property decorator

February 24, 2016, (updated on March 1, 2016), 8 comments, Software Development

I recently played with Angular 2 and found an uncomfortable problem: Declaring an input property with a TypeScript type does not guarantee that the input value will always be of this type. This is because the Angular framework may update an input with a wrongly typed value and thus is able to “circumvent” the TypeScript type system. As a result, you may end up with strange and unexpected runtime errors. Let’s have a look at this simple Angular component: @Component({ selector: "my-component" }) export class MyComponent { @Input() enabled = true; showValue() { alert(typeof this.enabled); } } As shown in […] Read more...

Tags: , , , ,

JavaScript Promises: Tips, tricks and best practices

January 15, 2016, (updated on April 11, 2017), Software Development

JavaScript Promises are a very powerful tool to avoid the callback nesting hell. The following article describes some tips and tricks when working with Promises. For developers with C# async/await knowledge, I will also show the async/await representations. With TypeScript, you can use this async/await syntax today. Most modern browsers only support JavaScript ES5 which does not provide a native Promise implementation. This is why you need one of the 3rd party Promises frameworks. When choosing a framework, you should check that it follows the Promises/A+ specification or a polyfill. The samples in this article are implemented using the Q […] Read more...

Tags: , , ,

Manually triggered computed observables in KnockoutJS

April 3, 2015, (updated on April 21, 2015), Software Development

In KnockoutJS I sometimes need to create a computed observable which does not automatically detect the dependencies and which has to be triggered manually. This may be required if the computation is very complex and should only run in certain situations. To implement this special type of computable, extend the ko object with a new manualComputed method: ko.manualComputed = function (func) { var changes = 0; var dummy = ko.observable(); function observable() { dummy(); var temp = ko.computed(func); var result = temp.peek(); temp.dispose(); return result; } ko.subscribable.call(observable); observable.update = function () { dummy(++changes); }; ko.utils.extend(observable, ko.observable["fn"]); return observable; }; After […] Read more...

Tags: ,

Taking fear from the .NET/XAML guy: Implement single-page web applications with TypeScript and MVVM

November 24, 2014, Software Development

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… Continue reading at my company’s blog… Read more...

Tags: , , , ,


  Page 1 of 1