Nicholas Johnson

Faith, Fatherhood, Computer Science

Hi There, I'm Nicholas Johnson, I'm a software developer and a corporate trainer, specialising in: JavaScript / NodeJS / AngularJS / MongoDB. I've worked with companies all over the world, large and small. You can find my CV here. Do get in touch if you'd like to say hi.

First Up - React is a DOM Manipulation Tool

TL;DR: Browserify automatically works out what code depends on what. It will bundle our code into a single file, and make sure that everything is run only once and in the correct order. We specify an order of execution in Browserify using require statements. If A requires B, B will be executed first, and the result will be passed into A.

Organising JavaScript in a larger app becomes quite painful quite quickly. The issue is that order of inclusion matters. If I write a service that belongs to a module, I'd better make sure I have created my module before I try to append the service to it or my code will collapse in a messy heap. As we get more and more modules and more and more files, this becomes progressively harder.

In a mature app, we might have 5000 files. Manually ordering 5000 files is not a good option. It will hurt your feelings and make you cry inside.

Other languages get around this problem using a module system. We can require code from one module into another module....

TL;DR: Angular 1 had transclusion which allowed us to access the content inside a directive's tag. Angular 2 has contentChildren which does the same thing. contentChildren are bound to their own component, not to the component they are included in.

Transclusion in Angular 1

Angular 1 gaves us the concept of transclusion. Transclusion is made of 2 words:

trans- from cross

-clusion from inclusion

It is the ability to bring in content from somewhere else, specifically the parent template.

In Angular 1 we might write something like this:

<popup>

<h1>Popup content</h1>

<p>Hey there!</p>

</popup>

We might them write a popup directive to turn our box into a popup box:

Most of the information and tutorials on Angular 2 currently available focus on TypeScript, with perhaps a handwavy gesture towards ES5 somewhere at the start.

The few JavaScript tutorials that do exist, generally resort to such abominations as hand coded decorators or a manually populated parameters attribute, neither of which are needed any more.

DI can be done by passing an array of newables to the constructor.

Decorators can be inserted using the fluent API wrapper, without ever having to see them.

Developers still like JavaScript, and Angular lets us use it

A few sites have even begun suggesting that JavaScript is analogous to Assembler: A low-level language, suitable only as a compiler target. Those of us who eat and breathe JavaScript know this is not true.

Angular 2 comes with a brand new DI mechanism. The premier way to do DI in Angular 2 is using TypeScript "Magic". Most articles gloss over this magic. In this article, we dive through the magic and look at the mechanism.

Questions Answered:

How does Dependency Injection work in Angular 2 with TypeScript?

What is Reflect.metadata?

Where is Angular 2 injector metadata stored?

DI in Angular 1

DI is a pattern we all grew to love in Angular 1, so I'll assume, for the purposes of this article that you already know what DI is, and why it is so good.

Angular 1 used strings as tokens for DI. You registered your component with Angular using a string token. It became injectable into any other Angular component.

Projects

Higgidy is a Rails site built in 2010. I am currently rebuilding it using Mongo and Express.

Courses

I build products using interesting technologies, then when I have become an expert I build a course and teach other people.

I use no Power Point, the course consists of live coding and exercises. Everything is wildly practical and designed to get as many skills into your head as possible.

Because I know the material, rather than just reading from slides, we can go off piste and explore new ideas as they come up. I will encourage you to try out new things. I will sit with you and guide you through the tricky bits. I will review your code and show you where you can improve it.

I am really pleased that we choose Nick to present the course. He keeps everyone engaged with his enthusiasm. He is clearly very knowledgeable about the subject matter and this gives him credibility with developers.

Best bit: The presentations were live coding rather than Powerpoint slides.

I followed Nicholas' advance javascript and extended AngularJS courses. I learned a lot during this well distributed training. The mix of theory and practices make it really interesting, and well-articulated. Nicholas knows his subject perfectly and can answer any questions and debate about web development all day.

All you want to do after this course, is more Javascript and AngularJS. I can only recommend this training

I attended a AngularJs course run by Nick in April 2015. After finding his website looking for such a course, he appeared to have an expansive repertoire of knowledge and I was certainly not disappointed.

Nick is extremely knowledge, approachable, and posses an excellent set of rare teaching skills. He was able to explain complex ideas and theories with an application to a real life usable scenario, and could answer any question related to JavaScript even if it was off topic.

I wouldn't hesitate for a second to recommend Nick to anyone looking to get their head around AngularJS - it was an absolute pleasure, and a very motivating course