JavaScript

The most widely deployed programming language on the planet, by an order of magnitude.

JavaScript is everywhere, on your phone, in your browser, on your server, in your datastore. It drives mobile apps and desktop apps. It's the force behind front end tools like Grunt, Gulp, and Yeoman. It powers NodeJS, and MongoDB.

If you're a front end developer you need to know JavaScript.

JavaScript Courses

JavaScript Articles

React Fundamentals For AngularJS Developers

Posted Apr 5 2016

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 vs. AngularJS. Fight!

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...

read more...

Organising your AngularJS code with Browserify

Posted Apr 1 2016

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...

read more...

How to do transclusion in Angular (ES5)

Posted Mar 24 2016

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.

Transclusion in AngularJS

AngularJS 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...

read more...

How does the TypeScript Angular DI magic work?

Posted Feb 26 2016

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 in Angular 1

DI is a pattern we all grew to love...

read more...

How to do Everything in Angular 2 using vanilla ES5 or ES6

Posted Feb 26 2016

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...

read more...

What's the difference between annotations and decorators in Angular?

Posted Feb 21 2016

TL;DR: Annotations and decorators are two competing and incompatible ways to compile the @ symbols that we often see attached to Angular components. Annotations create an "annotations" array. Decorators are functions that receive the decorated object and can make any changes to it they like.

Traceur gives us annotations. TypeScript gives us decorators. Angular supports both.

One of the humps you'll likely run into when learning about Angular is this initially non-obvious distinction between...

read more...

What is Babel, and how will it help you write JavaScript?

Posted Feb 15 2016

Babel is a JavaScript transpiler that converts edge JavaScript into plain old ES5 JavaScript that can run in any browser (even the old ones).

It makes available all the syntactical sugar that was added to JavaScript with the new ES6 specification, including classes, fat arrows and multiline strings.

We can also optionally use it to transpile TypeScript into regular JavaScript that will run in a browser.

Installation

Babel comes packaged as an node module. Installation, as you might expect...

read more...

Angular 1 vs. Angular 2

Posted Feb 15 2016

Angular 1 and Angular 2 are philosophically different.

Angular 1

Angular 1 is at heart a DOM compiler. We write HTML, and the Angular compiler takes care of compiling it into a web application.

It was originally designed to allow designers to create web applications without writing any code, and you can actually build some pretty complex applications without any JavaScript at all (other than angular.js)

If we want extra behaviour, we extend the compiler by adding more directives.

The template...

read more...

Creating Read-Only & Virtual Attributes with JavaScript Getters and Setters

Posted Jan 10 2016

TL;DR Getters and setters let us create read only attributes of JSON objects. They work in all current browsers (except IE8), so you can use them today

Getters and Setters allow us to create functions to set attributes on our JavaScript objects. This allows us to create pseudoelements and store and retrieve computed values, much as we can with Ruby.

They allow us to write code such that, when we access an attribute of an object, we are actually calling a function. We can use them to create read...

read more...

Why you should (sometimes) use MongoDB

Posted Jul 17 2015

I should start out by saying that I have no axe to grind here. I'm just a guy who enjoys learning things and using new technology.

Mongo as a technology has taken some heavy flak, particularly from the SQL crowd. It's missing a few features, has bugs, and does things in an unfamiliar way. This has made a lot of people rather cross which has lead to a surprising outpouring of hate for a technology that is actually rather good.

I have very much enjoyed my Mongo journey. Perhaps you will too.

...

read more...

Angular from Scratch with Matthieu Lux

Posted Jun 12 2015

Watch as Matthieu rebuilds angular complete with $scope, $digest, $apply, $compile, ng-bind and ng-model in half an hour and a hundred lines of code or so.

Done in front of a live audience at ng-europe 2014, which makes it even more impressive.

read more...

How does ng-app work?

Posted Jun 2 2015

Today's Angular is the angularInit function. This is the function which makes ng-app work.

tldr; It selects elements, discovers the root module name, and then shells out to bootstrap, sending it the element and the module.

Here it is:

function angularInit(element, bootstrap) {
const elements = [element],
appElement,
module,
names = ['ng:app', 'ng-app', 'x-ng-app', 'data-ng-app'],
NG_APP_CLASS_REGEXP = / ng[:-]app(: *([wd_]+);?)? /;
function append(element) {
...

read more...

MVC JavaScript without a Framework

Posted Jul 10 2013

Looking at Rails or Angular there's a tendency to think of MVC as something rather complicated and difficult to achieve, something that really demands a framework.

In fact, MV* style JavaScript really is trivially easy to write. It's a pattern I'll often drop into if I need to make anything beyond the basics, but I don't want to break out Angular's big guns.

In this post, we'll create a simple MV pattern. We'll build a Model and a View and wire these together using events.

Wiring with Events

read more...

Contact

If you'd like to book a course, or just have a chat about modern webstack technology, please send an email to hello@nicholasjohnson.com. We can set up a simple, no pressure Skype chat to discuss your requirements.

comments powered by Disqus