Thursday, June 22, 2017

Conway’s Law–The original paper

In the context of software architecture, people sometimes talk about Conway’s Law:

Any organization that designs a system (defined broadly) will produce a design whose structure is a copy of the organization's communication structure.

Although we apply it on software architecture, this definition is originally created in a more broader sense. If you are interested in reading the original paper, go check it out here;


The original paper in PDF format can be found here;

Wednesday, June 21, 2017

NPM 5 - Hopes for the future

I’m not a big fan of NPM, it’s not persé the fault of the tool itself but you don’t get happy when you end up with 1000’s of packages and any package change has a ripple effect through your code base. It even gets better when package creators don’t follow the semantic versioning rules and breaking changes appear without a warning. Everything I have to open up a new codebased and NPM starts its magic behind the scenes, it is not without fear that I first start compiling my code.

Sidenote: You can say similar things about any other packaging tool I guess, e.g. NuGet

But hey, enough complaining, time for some good news. Last month, the NPM released version 5 and they promised a lot of improvements.

The announcement:

Starting today, typing `npm install npm@latest -g` will update you to npm version 5.0.1.
npm@5 is all new and packed with performance, reliability, and usability improvements we know you’ll love. These include a new approach to lockfiles, more robust caching, and incredible speed — for many common tasks, npm@5 is up to 5x faster than previous versions.
The update is available now and we recommend it for everyone.
You can learn more about npm@5

Did the update and it is certainly faster! Made my day…

Tuesday, June 20, 2017

Angular 4–Visual Studio 2017 - error TS2420: Class 'MdButton' incorrectly implements interface 'CanDisable'. Property 'disabled' is missing in type 'MdButton'.

After upgrading to Angular 4, my Visual Studio turned red from all the TypeScript errors.

Some samples:

/node_modules/@angular/material/typings/button/button.d.ts(40,22): error TS2420: Class 'MdButton' incorrectly implements interface 'CanDisable'.
  Property 'disabled' is missing in type 'MdButton'.

/node_modules/@angular/material/typings/button/button.d.ts(40,39): error TS2507: Type '(new (...args: any[]) => CanDisable) & typeof MdButtonBase' is not a constructor function type.
The strange thing was, that when I used the Angular CLI and ng build(or serve) no errors appeared and everything seemed to work. 
I first tried to remove my node_modules folder and do a clean install –> didn’t help Sad smile
Then I removed my globally installed node_modules and reinstalled them as well –> didn’t help Sad smile
Then I upgraded my TypeScript version and the related Visual Studio tooling –> didn’t help Sad smile
In the end I found a solution that worked for me here, I had to update to Visual Studio 2017 Update 15.2. I don’t understand why upgrading an Angular version will get Visual Studio into trouble. I hope this experience will improve as I will become hesitant to upgrade Angular in the future.
Remark: Afterwards I noticed that a colleague already sent me an email telling me to update my Visual Studio before upgrading. Better read my mails next time… Confused smile

Monday, June 19, 2017

Getting up to speed with QuickApp, an ASPNET Core / Angular4 startup project template

I’m always disappointed to see the amount of work to get your application setup done(you know the typical ‘Sprint 0’ work). Creating your frontend and backend projects, setting up your authentication and authorization, configure the webpack magic and so on… Before you know it you are 2 weeks in your project and you didn’t deliver a single bit of business functionality.

So every tool, framework or library that can help you get up to speed is a welcome addition to our toolbox. Recently I discovered QuickApp, an ASP.NET Core/AngularX Project Template.

QuickApp Demo

From the documentation:

This application consists of:

  • Template pages using Angular4 and TypeScript
  • RESTful API Backend using ASP.NET Core MVC Web API
  • Database using Entity Framework Core
  • Authentication based on OpenID Connect
  • API Documentation using Swagger
  • Webpack2 for managing client-side libraries
  • Theming using Bootstrap

You get the benefits of:

  • A complete backend and frontend project structure to build on, with login, user and permission-based role management already integrated
  • Data Access Layer built with the Repository and Unit of Work Pattern
  • Code First Database
  • A RESTful API Design
  • Angular Directives Quidance
  • Angular Pipes Quidance
  • Angular Animations Quidance
  • Angular Services
  • Dialog and Notification Services
  • Configuration Page and Configuration Service
  • Integrated Internationaliztion
  • Theming with SASS
  • Ready-to-use email API
  • Handling Access and Refresh Tokens with WebStorage (Bearer authentication) - No Cookies
  • Jquery Integration (Ability to use standard Jquery libraries)

Friday, June 16, 2017

What is the JavaScript variant of .Any() in LINQ(C#)?

Today during our ‘Bug Fix Friday’ we were discussing how to rewrite a rather complex loop construction using a more functional style syntax. As we were all C# developers, the equivalent of what we wanted to achieve in JavaScript was what C# offers through the .Any() LINQ operation.

So the discussion was if their was a similar approach possible in JavaScript?

And the answer is… of course! The Array.prototype.some() method did exactly what we needed.

From MDN:

some() executes the callback function once for each element present in the array until it finds one where callback returns a truthy value (a value that becomes true when converted to a Boolean). If such an element is found, some() immediately returns true. Otherwise, some() returns false. callback is invoked only for indexes of the array which have assigned values; it is not invoked for indexes which have been deleted or which have never been assigned values.

An example:

Thursday, June 15, 2017

.NET 4.6.2 OutputCache max-age is incorrect

After upgrading to .NET 4.6.2 we started noticing problems with our ASP.NET MVC applications. We intesively use caching to limit the load on our web servers. This is easy to implement thanks to the OutputCache attribute in MVC.

The problem we noticed after upgrading was that the max-age in the response headers was no longer correct after hitting the cache. An example:

  • We had the following OutputCache attribute on top of our MVC controller:
    [OutputCache(Duration = 86400 )]
  • When executing the first request, we see the following response heade
    Cache-Control: public, max-age=86400
  • On all subsequent requests, we see the following
    Cache-Control: public, max-age=63623538558

More information:

Remark: This problem is fixed in .NET 4.7 and a specific quality update.

Wednesday, June 14, 2017

Windows 10–Remove the Windows.old folder after upgrading

After upgrading my Windows 10 installation to the Anniversary Update, I noticed that I had two windows folders; windows & windows.old. Both were eating up a lot of disk space, but I had no clue if I could safely delete the windows.old folder.

The windows.old folder contains all information about your previous windows version. Idea is that if you want to roll back to the old version, it’s possible through the recovery option. Windows will automatically clean up the old folder after some time but if you can’t wait here is a (safe) alternative:

  • Open Windows Explorer.
  • Right click on the drive that contains your Windows installation. Choose Properties.
  • Click the Disk Cleanup button on the General tab.
  • After the Disk Cleanup tool is done calculating, click on the Cleanup System Files button.
  • Select the Previous Windows Installation(s) option to delete the Windows.old folder


Remark: I noticed that if you don’t run the Disk Cleanup tool as an administrator, the Previous Windows Installation(s) option is not available.

Friday, June 2, 2017

From developer to architect–A logical evolution…or not?

Most of the people I have the pleasure to work with are developers, all great, intelligent people with passion for technology and IT. When I talk with them about their career and how they think they should evolve, a lot of them aspire to become an architect. Now the job title architect can mean a lot of different things, but that is not the topic I want to rant about today Smile

*** START RANT ***

I’m a little bit puzzled why a lot of developers think that becoming an architect is the logical way forward. Why you ask me? Let me explain…

Developers are creative people, great thinkers and problem solvers. They like to tackle complex problems, that’s what they live for. Once they are no more problems to solve, they start to get bored and start looking at new frameworks and tools just to have new problems to tackle. Developers LOVE complexity.

“Developers are attracted to complexity like moths to a flame”

As an architect it is quite the opposite. You are not aiming for sprints but want to do marathons. Every decision you take has an impact that can haunt you forever(until the next rewrite arrives Winking smile). Therefore as an architect you should be risk averse, better safe than sorry. Architects HATE complexity. It makes every solution unmaintainable in the long run. Simpler IS better…

As an architect you strive for a clean architecture with only an essential level of complexity and try to avoid accidental complexity at all cost. Developers are proud on the clever solutions they create(and they should be!) but as an architect simplicity will always win over cleverness in the long run.

This made me wonder if becoming an architect is such a logical stepping stone in the career of a developer. It’s a complete mindswitch which is not easy to take(ask me…).

*** END RANT ***

Food for thought… (Now I have to go, I have to create a Functional Reactive DDD CQRS Microservice DevOps architecture to get some data out of the database and show it on a website Punk)

Thursday, June 1, 2017

Angular - Host your Angular CLI app in a virtual directory in IIS

I’m a big fan of the Angular CLI, it makes working with Angular a lot easier and guarantees a level of consistenty between all team members. But I noticed that some people get into trouble the moment they try to host their application in IIS.

Most of the time you don’t host your Angular app directly under the Default Website, instead you add a virtual application and host your files in it.



Problem is that if you just do an ‘ng build’ and copy the dist folder to your target directory, it will probably not work. When you browse to the URI, you only get a ‘loading…’ message and nothing seems to happen.


Inside the console, you see that the Angular application tries to load all your bundles from ‘http://localhost’ instead of ‘http://localhost/sampleapp’:


To fix this you have to specify some extra parameters when building your Angular app for distribution:

ng build --deploy-url "/sampleapp" --base-href="/sampleapp"

That should do the trick…