40 technologies used on the 'Maturity Models' nodeJS application

I've been working on an Maturity Model application to help me manage a project where I'm doing an large BSIMM mapping exercise.

The tech stack is based on NodeJS + Angular, and it looks like this:

Working on major update of 'Practical Angular JS' book

(email I just sent to my Leanpub readers that chose to be contacted directly)

Thanks for being an reader of my Practical Angular JS book and allowing me to contact you directly with updates (you chose to share your email with me).

The first version of the book was mainly made of blog posts I published at blog.diniscruz.com, and it took me a while to figure out how to best complete the book. 

Recently I started working on an project (creating Maturity Models mappings and visualisations for BSIMM) which I was able to open source. This project is a clean implementation of my ideas of how to code and test AngularJS, and once I had the first version of the app working, I realised that this was a perfect first for this Practical Angular JS book.

My current plan is to split the book in to two parts, where 'Part I' is the new content, and 'Part II' is the existing (published content).

Mapping the attack surface for client side code (i.e. JS code)

Although at first it might look that on a browser the concept of attack surface doesn’t matter, unless you are building a pure html website with NO Javascript, you will also need to consider the attack surface of your code.

The attack surface is basically the ways the code execution can be affected/influenced by an attacker’s data/actions 

For Javascript code that is running on browser there are three main sources of malicious data

Some comments on jQuery security and our current development stack (based on Node, CoffeeScript, Jade and AngularJS)

Following from Why we are going to use AngularJs 1.3 on TM ...

On jQuery, my experience (in both developing and reviewing jQuery apps) is that it tends to promote an 'lets just hack it to make it work' kind of development workflow. In jQuert code, there are always tons of DOM manipulations, which will always include (browser specific and other) hacks, and create code with quite a lot of dependencies and lack-of-isolation between components. Basically you shown me an large jQuery app (like the one we developed) and It most likely be an app hard to refactor, hard to maintain and hard to understand what really is going on (ironically the power of jQuery tends to create this stuff, since it is always possible to 'fix something' by adding a bit of jQuery somewhere).

And of course jQuery is also a nightmare from a security point of view, since there are quite a lot of sinks that will transform strings into code.

In order to make TeamMentor secure and easy to code we are using the following stack/technologies:

Why we are going to use AngularJs 1.3 on TM (vs ReactJs)

(As posted on the  Angular JS vs React in Flare issue)

For reference I just had another look at ReactJS vs AngularJS and here are the reasons why I think we should keep on the current path and use Angular on TM 4.0

• Angular 1.3 is an MVC framework with really good support for: Controllers, Services and Views (React on its own admission is mainly focused on the 'View' component)
• Angular 2.0 seems to contain most of the big advantages currently mapped to React, so although the jump from Angular 1.3 to 2.0 seems to be quite steep, it will allow us to have access (if needed) to the current perceived React advantages
• It seems that one of the big advantages of React is it speed, and I don't think we will need that kind of DOM manipulation speed anytime soon (since we will be using the server-side graphdb for that)
• Most comparisons on Angular vs React seem to:
• a) conclude that React is better
• b) be written by users that did not had a lot of experience with AngularJS, and I would say with a lot of experience of jQuery (note that If I get my way we will NOT be using jQuery on TM 4.0 (i.e. it is a banned API :) ))
• c) focus on simple scenarios (where Angular might be overkill)
• d) complain about Angular 'complexity' (which again implies not very deep Angular knowledge)
• e) don't cover how to test Angular/React
• There are not a lot of published books about React (with the first ones coming out at the end of 2015). Compare this with the dozen books written about Angular
• The current TM dev team already has good knowledge of Angular (specially since we use it on TM 3.5)
• AngularJS security seems more mature than React (note for example the use of CSP) and documentation about it
• I quite like how AngularJS Javascript looks like (specially when written in CoffeeScript) vs ReactJS Javascript which does seem to contain a lot more DOM manipulation (ie. just like jQuery). Of course that on this one I'm bias for Angular because I know more Angular than React :)

Angular 1.4 with Jade with coffee (all in one file)

Simple example of using all these technologies together :)

E2E testing AngularJS links and routes using NCrunch, VisualStudio and FluentSharp.WatiN

In order to have real TDD while developing AngularJS inside VisualStudio, I needed a way to write C# Unit Tests that could be executed in the background by NCrunch (i.e. in real-time during coding).

Since I wanted to do E2E (End-to-End) testing of the AngularJS app, I needed either a good mocking environment (like the one provided by KarmaJS/AngularJS Mocks) or the real thing (i.e. actually running the app on a local IIS/Cassini server).

If I have the choice, I always prefer to run my tests without mocking (or with as least amount of Mocks as possible), since that allows for a much more realistic test environment, and promotes much better engineering and coding practices.

This post shows how I created such environment and provides a couple examples of C# tests written to check if links created by AngularJS directives and routes are being correctively set.

Problem with AngularJS ng-view, it doesn’t work when inside a directive

I hit an interesting problem yesterday with AngularJS views. They (the views) where working when clicking on a link, but not working when accessed directly, or when the back button was used (which broke the idea of AngularJS routing, since it is supposed to handle those to key scenarios).

After quite a bit of debugging, I was able to track the problem to the fact that if I placed the ng-view directive inside another directive, the refresh and back button would break (although it would work ok for links and direct browser url manipulation).

What is really nice, is that I was able to use the .NET C# based Unit Test infrastructure to confirm this problem and test for it :)

Published Beta version of "Practical AngularJS" Book (in both digital and print format)

I just released a book based on the 23 AngularJS posts currently published in this blog (as a public beta).

The article's Html was converted by LeanPub into Markdown, who also created the eBook versions linked below (pdf, mobi, epub and online). The printed version was created at lulu.

At the moment the book can be downloaded for free and the book has a small markup (you can also chose to pay for the digital version).

Please take a look and let me know what you think of the structure, font, layout, order, content, voice, idea, etc...

Here are the links to the multiple places you can get the book:

• eBook (PDF, EPub or MOBI) at Leanpub (I've set the minimum price to zero so you can download it for free)
• Printed book (Paperback, 163 pages) at Lulu.com 
• Online : LeanPub also publishes the entire book available in one long HTML page (note that there are LOTS of images to load in this page)

Programatically changing an AngularJS scope variable and adding Firebug Lite to an AngularJs app

In this post I'm going to show two really nice tricks that help when developing AngularJS applications:

• adding Firebug Lite to the current browser
• changing the scope value outside a normal AngularJS controller, service or module

Let's say that we are inside Eclipse and have this simple AngularJS app (gist here)

Eclipse Groovy script to remove the 'busy' image from the WebBrowser Editor

Now that I'm doing AngularJS and Firebase development inside Eclipse, there was a little 'thing' that was starting to drive me crazy: The animation icon on the top right of the Eclipse WebBrowser!

Apart from the mosaic 2000s look (which is kinda ok), there is a big problem with pages that keep running for a while: the animation doesn't stop!

This means that if you are developing inside Eclipse, there is this 'thing' (i.e. the top right icon) that keeps moving and demand my brain's attention:

Using AngularJS in Eclipse, Part 4) Create Components

This is the last of four posts on how to run (inside Eclipse) the examples provided in AngularJS's home page:

• Using AngularJS in Eclipse, Part 1) The Basics
• Using AngularJS in Eclipse, Part 2) Add Some Control
• Using AngularJS in Eclipse, Part 3) Wire up a Backend
• Using AngularJS in Eclipse, Part 4) Create Components

The example covered on this post is the Create Components:

Using AngularJS in Eclipse, Part 3) Wire up a Backend

This is the third of four posts on how to run (inside Eclipse) the examples provided in AngularJS's home page:

• Using AngularJS in Eclipse, Part 1) The Basics
• Using AngularJS in Eclipse, Part 2) Add Some Control 
• Using AngularJS in Eclipse, Part 3) Wire up a Backend
• Using AngularJS in Eclipse, Part 4) Create Components

The example covered on this post is the Wire up a Backend:

Using AngularJS in Eclipse, Part 2) Add Some Control

This is the second of four posts on how to run (inside Eclipse) the examples provided in AngularJS's home page:

• Using AngularJS in Eclipse, Part 1) The Basics
• Using AngularJS in Eclipse, Part 2) Add Some Control 
• Using AngularJS in Eclipse, Part 3) Wire up a Backend
• Using AngularJS in Eclipse, Part 4) Create Components

The example covered on this post is the Add Some Control:

Using AngularJS in Eclipse, Part 1) The Basics

This is the first of four posts on how to run (inside Eclipse) the examples provided in AngularJS's home page:

• Using AngularJS in Eclipse, Part 1) The Basics
• Using AngularJS in Eclipse, Part 2) Add Some Control 
• Using AngularJS in Eclipse, Part 3) Wire up a Backend
• Using AngularJS in Eclipse, Part 4) Create Components

The example covered on this post is the The Basics.

I'm doing this on an OSX laptop and the first step was to download and unzip (eclipse-standard-kepler-SR1-macosx-cocoa.tar.gz (32bit version of Eclipse's Kerpler) into the ~/_Dev/_AngularJS folder.

I fired up eclipse, chose the ~/_Dev/_AngularJS/workspace as the workspace root and installed the Eclipse Grovy REPL Scripting Environment 1.6.0 (update site) and Angular-JS Eclipse Tooling (update site) plugins.

A really SIMPLE and clean AngularJS+Firebase example

As seen on the First PoC of sending TeamMentor's server-side request URLS to Firebase (and seeing it in realtime in an AngularJS page) I created a Simple AngularJS website which I'm very happy with (and I mean Simple with a capital S).

The main reason I really like the solution shown below, is because it represents a number of really nice, clean and Simple solutions for common (complex) problems that exist while developing in Javascript.

The created application is an:

• AngularJS real-time viewer for HTTP requests, 
• ... made to an ASP.NET web application (TeamMentor),  
• ... captured by an custom C# HttpHandler filter, 
• ... submitted to Firebase using its REST API and 
• ... pushed back to the AngularJS app using open HTML 5 WebSockets.

Eclipse Groovy REPL script to sync a Browser with file changes (with recursive folder search via Java's WatchService)

Since I am using Eclipse to develop using AngularJS (see Creating an Eclipse UI to run AngularJS e2e tests using Karma), I needed a way to refresh the browser window every-time I made changes to any AngularJS related file (note that due to the nature of the AngularJS projects, I need the change to trigger on any change made inside the root folder and all its subfolders).

Since there didn't seem to be an easy way to do this ('auto browser refresh on file changes') in  Eclipse, I used the Eclipse Grovy REPL Scripting Environment to develop a script/macro that:

• Based on a title of an opened eclipse editor file:
• ... find the full path of that file, and:
• ... create a Java WatchService that monitors the file's folder and subfolders, and:
• ... when a StandardWatchEventKinds.ENTRY_MODIFY is received :
• Create/Open a new Eclipse view with a browser (called Synced Browser), and:
• ...refresh the index page 

First PoC of sending TeamMentor's server-side request URLS to Firebase (and seeing it in realtime in an AngularJS page)

After getting my head around how Firebase works (see Using Firebase to sync data with a webpage (via Javascript, REST and Firebase Admin panel) and Trying our Firebase (Beta) hosting solution and good example of Firebase Security rules), I really wanted to see how it could work on a key feature that I've been wanting to add to TeamMentor for ages: Realtime viewing  of traffic and logs

And it worked :)

This is really exciting!!! (can you tell :)  ), specially since I can see so many great uses of this type of technique and technology in TeamMentor (for example it will allow for much better understanding on how the content is used, and for better collaboration between its readers (and authors))

Trying out Firebase (Beta) hosting solution and good example of Firebase Security rules

Since Firebase now offers a Beta hosting service (and I was looking for a quick way to publish one of the firebase PoCs I'm working at the moment), I decided to take it for a spin.

I have to say that I'm really impressed with the end result, and as you will see below, there entire process (from install to published website) was really smooth.

Note 1: in the example below I already had created an Firebase app to hold the data (see Using Firebase to sync data with a webpage (via Javascript, REST and Firebase Admin panel) for details on how to create one) 

Note 2: at the time I wrote this post, the website created is/was (depending on when you are reading this) hosted at https://tm-admin-test.firebaseapp.com/

Starting with the instructions from Firebase hosting page:

Creating an Eclipse UI to run AngularJS e2e tests using Karma

This post shows how I created a nice set of views in Eclipse to quickly see the execution result of AngularJS e2e (end-to-end) tests, without leaving the Eclipse UI.

The image below shows this UI in action, where:

• The source code of the test is shown in the Eclipse Java editor
• Just below is the console out of the Karma runner (which is detecting files changes)
• On the top-right is the hooked browser (i.e. the one that will run the tests)
• On the middle-right is the simple AngularJS Hello World page
• On the bottom-right is the debug view of the hooked browser (which is what you get if you click on the Debug Button included on the top-right page)