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.
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...
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...
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...
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...
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.
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...
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.
Babel comes packaged as an node module. Installation, as you might expect...
Angular 1 and Angular 2 are philosophically different.
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...
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...
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.
...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.
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) {
...
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.
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.