Learn about the past, present and future of dependency inversion in JavaScript

Over the last year and a half, I’ve been reading a lot about dependency inversion and taking a look to the source code of many open-source IoC containers for JavaScript. At the same time I’ve been working on the development of InversifyJS (a powerful IoC container for JavaScript apps powered by TypeScript).

I have spent a lot of time thinking and talking about DI in JavaScript with many developers and I found this topic to be quite controversial. I’m writing this post to share what I’ve learn.

Debunking the JavaScript IoC container myths #

Before I go into details about past, present and future of dependency inversion in JavaScript I will try to debunk what I believe are some myths.

Myth 1: There is no place for IoC containers in JavaScript #

When I have a conversation about decoupling and modularity in...

A powerful IoC container for JavaScript apps powered by TypeScript

I released InversifyJS 1.0 about a year ago. Back then it had some nice features like transient and singleton scope but it was far from what I wanted to achieve.

InversifyJS is an open-source inversion of control (IoC) container for TypeScript applications.

InversifyJS 2.0 (v2.0.0-alpha.3) is finally here and I’m really excited to be able to show you what it is capable of.

InversifyJS 2.0 is lightweight library because one of my main goals is to add a little run-time overhead as possible. The latest build is only 4 KB (gzip) and it has no dependencies.

Another nice thing is that InversifyJS can be used in both web browsers and Node.js. However, in some environments some features may require some ES6 shims (e.g. Providers requires Promises and Proxy requires ES6 Proxies).

Note: This version is a...

An introduction to the development of TypeScript applications with VS Code

In this post we are going to learn how to configure a TypeScript + VS Code development environment. We are going to use the following tools:

• Gulp
• TsLint
• Mocha
• Chai
• Browserify
• BrowserSync
• Wallaby.js

Let’s get started!

Note: The entire VS Code project used in this post is available at GitHub.

1. Download and installing VS Code and some extensions #

We are going to download and install VS Code and some extensions that will help us to maximize our productivity.

Let’s start by downloading VS Code for your OS here and Node.js here.

Let’s now install some VS code extensions. Open VS Code when you are ready and use Shift + Command + p to access the command panel. The command panel will display the matching commands as you type.

Go ahead and type “install extensions”:

Select the Install Extension command...

Everybody has been talking a lot about JS frameworks over the last few years. There has been a large number of attempts to create the ultimate front-end framework but there is no clear winner.

While the high doses of innovation and the thrill of trying something new are great, the rapid change of technologies has become a critical risk.

Every six months, a hot new framework hits the mainstream, and our community explodes with excitement.

We can’t avoid making a decisions and answering questions like:

• Should I train my team on Angular, React, Ember… ?
• Should I use Angular, React, Ember… in a project that is expected to have a life cycle of 10 years?

While we can try to back-up our choice…

Most technology decision makers use metrics like community size, popularity, and big company support to justify their choice of framework.

Choosing the wrong answer could lead us to undesired...

An introduction to the development of React applications with Atom and TypeScript

We are about to develop the famous TODO App from the TodoMVC project using React and TypeScript:

In this post you will learn about the following:

• 1. Setting up the environment
• 2. Setting up the project
• 3. The basics about React components
• 4. Developing React components with TypeScript
• 5. Compiling the application
• 6. Running the application

Let’s get started!

1. Setting up the environment #

We will start by setting up the environment:

• Download an install Node.js from https://nodejs.org.

• Install TypeScript and tsd using npm:

$ npm install -g typescript tsd

Note: use sudo if you are using OSX

• Download and install atom from https://atom.io/.

• Install the atom-typescript plugin for atom:

$ apm install atom-typescript

This plugin has some cool features like HTML to TSX:

Or dependency...

An in-depth look to the TypeScript implementation of decorators and how they make possible new exciting JavaScript features like reflection or dependency injection. #

This article is the fourth part of a series:

• PART I: Method decorators
• PART II: Property decorators & Class decorators
• PART III: Parameter decorators & Decorator factory
• PART IV: Types serialization & The metadata reflection API

I will assume that you have already read all the previous posts of these series.

In the previous post in this series we learned what are decorators and how they are implemented in TypeScript. We know how to work with class, method, property and parameter decorators, how to create a decorator factory and how to use a decorator factory to implement configurable decorators.

In this post we will learn about:

• 1. Why we need reflection in JavaScript?
• 2. The metadata reflection API
• 3. Basic type...

An in-depth look to the TypeScript implementation of decorators and how they make possible new exciting JavaScript features like reflection or dependency injection. #

This article is the third part of a series:

• PART I: Method decorators
• PART II: Property decorators & Class decorators
• PART III: Parameter decorators & Decorator factory
• PART IV: Types serialization & The metadata reflection API

In the previous post in this series we learned what are decorators and how they are implemented in TypeScript. We know how to work with class, method and property decorators.

In this post we will learn about:

• The remaining type of decorator: the parameter decorator.
• How to implement a decorator factory.
• How to implement configurable decorators.

We are going to use the following class to showcase these concepts.

class Person { 

  public name: string;
  public surname: string;

An in-depth look to the TypeScript implementation of decorators and how they make possible new exciting JavaScript features like reflection or dependency injection. #

This article is the second part of a series:

• PART I: Method decorators
• PART II: Property decorators & Class decorators
• PART III: Parameter decorators & Decorator factory
• PART IV: Types serialization & The metadata reflection API

In the previous post in this series we learned that we can find the available decorators signatures in the TypeScript source-code.

We also learned how to implement a method decorator and we answered some basic questions about the way decorators work in TypeScript:

• Where is decorator being invoked?
• Who is providing the decorator arguments?
• Where is the __decorate function declared?

I will assume that you have already read the Part I of these series and you know the answer to these...

An in-depth look to the TypeScript implementation of decorators and how they make possible new exciting JavaScript features like reflection or dependency injection. #

This series will cover:

• PART I: Method decorators
• PART II: Property decorators & Class decorators
• PART III: Parameter decorators & Decorator factory
• PART IV: Types serialization & The metadata reflection API

A few months ago Microsoft and Google announced that they were working together on TypeScript and Angular 2.0

We’re excited to announce that we have converged the TypeScript and AtScript languages, and that Angular 2, the next version of the popular JavaScript library for building web sites and web apps, will be developed with TypeScript.

Annotations & decorators #

This partnership has helped TypeScript to evolve additional language features among which we will highlight annotations.

Annotations, a way to add...

We will no longer write pure JavaScript really soon #

I’ve been keeping an eye on the arrival of some ES6 and ES7 features and proposals, as well as some trending JavaScript technologies (particularly Compile-to-JavaScript languages like TypeScript, BabelJS or CoffeeScript) and I dare to predict that we will not longer write pure JavaScript really soon.

What are your arguments? #

I have some arguments to back up my idea:

1. Compiler emitted metadata #

We can find online proposals to add Decorators to ES7, along with a prototype for an ES7 Reflection API for Decorator Metadata. The idea behind decorators and reflection is that we can add some metadata to JavaScript objects in order to add support for some JavaScript features (like Dependency Injection, Runtime Type Assertions or Reflection/Mirroring) that were not possible no longer ago.

These new features will help us to improve the...