Friday, April 24, 2015

Architect course on PluralSight

When I joined my current company, there was already a system in place. We're very likely going to rewrite big parts of the system because of changing requirements. 
I decided to write up the SAD of the existing system because: it forces me to evaluate whether I understand all the pieces of the existing architecture and why they exist, it will help me find weak- and strong spots in the current architecture, it will serve as a base for the v2 architecture and it will serve as a guide for the new developer coming in soon ( hopefully ).

In order to brush up my skills - I did the 'Developer to Architect' course on PluralSight. It doesn't just go into details about what documents to write and how, but also about which role an architect plays in an enterprise environment. 

Although HelloTrip is hardly an enterprise environment, I highly recommend the course :)

Installing Windows 10 Technical Preview Build 10061 on Mac with BootCamp as update

There's a new technical preview available of Windows 10 : build 10061. I decided to start running Windows 10 on my daily coding machine ( which is a MacBook Pro running BootCamp ) so I needed to upgrade the BootCamp partition to the latest windows version.

Here's what I did - and worked for me:

  1. Have BootCamp assistant in OS X prepare a USB stick with the latest ISO. That will put the Mac drivers on there as well.
  2. Reboot the machine - hold 'option' key and notice the following partitions: OS X partition, Windows partition and then there's two extra options ( some orange icon ): Windows Setup and EFI Boot. Pick the most right, the EFI boot.
  3. This will start the windows installer with all the drivers required to detect Mac hardware. From this point forward it's just a regular Windows installation.

... and you're done. Have fun!

Tuesday, April 21, 2015

Inspecting AngularJS page load performance using Chrome TimeLine / flame chart

I'm building a couple of prototypes for a page that needs to display around 2000 items in a grid of 3 items with 600+ rows. What we're looking to achieve is a quick page load time, but also no hassle while scrolling.
The case I'm investigating is a little out of the ordinary, in the sense that I assume that I already have the large object in memory. It's not like a more normal case where I send out paged AJAX calls to some REST server.

So, I've created a couple of AngularJS prototypes, which I've analysed with the Chrome Dev tools - the TimeLine tool to be exact. Here are some of my results.

1. Simplest form: load all data into a scope variable
OK, so I started out with the simplest form where I load the 2000 item array into a scope var, and display it using an ng-repeat. Let's see what that does in chrome dev tools:

You get this by opening up dev tools, going to TimeLine - hitting record and reloading the page. After clicking stop - you see this awesome graphical representation of the page load events + nested function calls ( flames ).

The DOMContentLoaded event fires and the AngularJS controller needs 200ms to render everything. Note the green line under the flame chart that shows the number of nodes in the DOM.

2. Infinite scroll.
Then I got an infinite scroll module for AngularJS which I applied. OnLoad I load 9 elements into the scope variable and every time the page event fires, I add another 9.

Page load time drops to 30ms (!) that's awesome. The little flames on the right are the scroll events. They take up about 3-5ms. each. This would be a lot more if I was making AJAX calls obviously,

However, I'm not sure this will give a nice scrolling experience to the user, especially on tablets. That's why I moved to option 3.

3. Seed loading + background loading of the rest
In this prototype, I load enough items to fill up the screen and return from the controller contstructor. Then after a timeout ( 100ms ), I append the rest of the data.

As you can see - a 30ms flame ( so as fast as the infinite scroll solution ) which loads 9 items into the viewmodel and handles the binding. Then after 100ms, I append the rest of the items ( approx 150 ms ). In the browser you see the DOM being built op very quickly and do not notice the rest of the items being loaded. The only thing you can see is the scrollbar jump up after 100ms, when the rest of the items are bound to the viewmodel and generated as HTML.

Right now - the last approach seems the most promising: very quick page load time and 'normal' scroll behavior.

Friday, April 17, 2015

Very interesting ( and long ) PluralSight course: Advanced JavaScript

I feel I still don't know as much about JavaScript as I would like. Honestly, the `new` and `this` keywords are still a bit wonky in my mind. Good thing Kyle Simpson has a great 6 hour video on Advanced Javascript and takes A LOT of time explaining function expressions, function keywords, this, new etc etc. 

Go check it out: or check out his FREE ebook series 'You don't know JavaScript'.