Most of the solutions for dependency injection (DI) in React components are based on context. The famous connect function and the Provider there use the context. However, the React development team recommends avoiding the usage of the context. In this article we will learn how we can use InversifyJS as a context-free solution for DI in React applications.

 Introduction

A few weeks ago, an user in Twitter asked Michel Weststrate (the author of MobX) the following:

His answer was the following:

Later, the popular repository react-in-patterns documented the most common dependency injection patterns in React applications but some developers mentioned InversifyJS once more:

I was surprised after reading the following in react-in-patterns:

Most of the solutions for dependency injection in React components are based on context. I think that it’s good to know what happens under the

Learn what’s new in InversifyJS 2.0.0 and what can you expect to see in the future of this powerful lightweight IoC container for JavaScript and Node.js apps powered by TypeScript

As many of the readers of this blog already know, over the past year and a half we have been working on InversifyJS.

InversifyJS is a powerful lightweight IoC container for JavaScript and Node.js written in TypeScript.

Last march we announced that we were working on InversifyJS 2.0. Today we are happy to announce that InversifyJS 2.0 release candidate is available on npm.

In this post we are going to learn about the following:

• Setting up InversifyJS 2.0 with TypeScript
• The InversifyJS 2.0 API
• The InversifyJS 2.0 features
• The InversifyJS ecosystem
• The InversifyJS community

Let’s get started!

 Setting up InversifyJS 2.0 with TypeScript

$ npm install inversify@2.0.0-beta.5 reflect-metadata --save
$ npm

A few weeks ago I found an interesting article titled In Defense of JavaScript Classes. The article exposed some concerns about the class keyword in ES6 / TypeScript:

These days it feels like everyone is attacking classes in JavaScript. Developers I respect say ES6 classes are a virus. We’ve compiled long lists on the reasons that ES6 classes are not awesome. Apparently, if we’re still brave enough to try them, we need advice on how to use classes and still sleep at night.

The problems that I see with the class and extends keywords in ES6 / TypeScript are not something new. I believe that these problems are cause by bad object-oriented (OO) design and I’m sure that the source of most of the criticism is coming from programmers with a strong interest in functional programming and I understand their fears. They are afraid of some of the OOP “monsters”:

• Inheritance
• Internal classes

 Bootstrapping function for Redux applications

We are happy to announce that we just open-sourced a small library for the redux ecosystem called redux-bootstrap.

redux-bootstrap is a bootstrapping function for Redux applications. Redux bootstrap does not generate files for you. It is not a project template or project scaffolding tool and it is not related with Bootstrap (responsive web apps framework).

Redux-bootstrap handles most of the common application initialisation / bootstrapping that takes place every time you create a new Redux project.

 Motivation

When you create a new Redux project you usually need to take care of a few things:

• Install dependencies.
• Integrate the React router with Redux.
• Create a Root reducer.
• Enable DevTools is environment is development / Disable if environment is production.
• Integrate Immutable with Redux.
• Apply middleware.
• Combine reducers into a

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