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.
Here are my thoughts on things:
TL;DR: AngularJS is a complex, monolithic framework that makes lots of choices for you. React is a DOM manipulation library that fits into a dynamic evolving ecosystem. Both are actually rather good.
React is often compared to AngularJS. We commonly hear shouty, unpleasant arguments such as:
"React is better than AngularJS because it's faster and has one-way binding!"
And the answering call:
"No, you're comparing Apples with Oranges!"
We hear that React is a library and that AngularJS is a framework. We variously hear that two-way databinding is amazing, or worse than Hitler.
We learn how AngularJS doesn't scale, and then we see that, with a bit of work, it does.
The issue is that we are often talking from a position of ignorance. In this post I aim to show you the fundamentals of React so you can make your own decision based on data.
React is only a DOM manipulation tool, like jQuery, but rather more modern...
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: AngularJS had transclusion which allowed us to access the content inside a directive's tag. Angular has contentChildren which does the same thing. contentChildren are bound to their own component, not to the component they are included in.
AngularJS gaves us the concept of transclusion. Transclusion is made of 2 words:
It is the ability to bring in content from somewhere else, specifically the parent template.
In AngularJS 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:
angular.module('app', [])
.directive('popup', function() {
const directive = {
transclude:true;
template:
`
<div class="popup">
Additional popup matériel...
<ng-transclude></ng-transclude>
</div>
`
};
return directive;
})
The key thing here...
TL;DR: Using decorators and a Reflect.metadata polyfill.
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.
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.
We might declare pterodactyls in one place:
angular.module('app')
.service('PterodactylService', function(){
// PterodactylService Constructor
})
We could then inject our pterodactyls into the park controller...
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.
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.
JavaScript is uniquely beautiful. Angular 2 helps us to write beautiful JavaScript.
Having a decent JavaScript API is especially important given this survey.
Streetbank is a local social media site that helps neighbours to get to know one another. Built in Rails, it went live in 2009, and now has around 60,000 users.
Higgidy is a Rails site built in 2010. I am currently rebuilding it using Mongo and Express.
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'm in the top 1% on stack overflow. Here are some of my contributions. You may already have read some of them.
By far and away the best, most in depth, and broadest course I have been on. Nick is passionate and vastly knowledgeable about the subject and it really comes through in the lessons.
Best bit: I guess the nerdy part of me liked it when we hit a remote api and displayed data back. Also…Thundercats rock!!!
Comparison with other courses: Many courses I've been on have been dumbed down and a bit wishy washy, I'm so pleased this was challenging and full of meaty examples.
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.
Comparison with other courses: Better than most.
Thank you Nick for the AngularJS course. It was very insightful. Nick was very knowledgeable about the subject matter. Would definitely recommend this course.
Best bit: All of it! Learned a lot.
Comparison with other courses: Very in depth and flexible to the group. Course was very interactive.
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