React, etc. Tech Stack

React, Flux, GraphQL, Hack, HHVM...? All of this and more!

React with TypeScript and MobX

The React ecosystem is huge and there are a number of technologies available. During 2016 the core supporting stack for React has stabilised to be composed of Babel for JavaScript transpilation and Redux for state management.

While going with the mainstream options might be tempting, there's always value in people trying out different technologies. This is why it's worth considering alternatives to Babel and Redux, even if you've committed to React as your UI library choice. Competition drives innovation.

TypeScript is a superset of JavaScript. It builds on the ECMAScript standard, by adding new features from future specifications as well as features specific to TypeScript. The hallmark feature is implied by the name of the language, introducing strong typing to a weakly typed language. In the example below person is defined to be a string:

In addition to the language specification itself, TypeScript is a collection of tools for compilation and IDE support. This is where it comes as an alternative to Babel. Instead of building your application to browser-compatible ES5 syntax with Babel. You can do the same with the TypeScript compiler.

For state management Redux took the React world by storm in 2015. This lead to the eventual hiring of the lead developer Dan Abramov being hired by Facebook. Thus Redux is now a part of the official React project scaffolding. But Redux itself is not perfect and introduce unnecessary complexity and boilerplate code.

MobX is an alternative state management library that builds on the principle that anything that can be derived from the application state, should be automatically derived. That's quite a mouthful. But in practise you simply create objects, decorate them to be observed by MobX and it will handle things under the hood:

Getting started with React development using TypeScript and MobX is easy by using a simplistic template from Michel Weststrate, the creator and lead developer of MobX. The template is available on GitHub (mobx-react-typescript-boilerplate) and setting it up is easy as 1-2-3 with NPM or Yarn.

Once the project is setup, you can start taking advantage of strong typing offered by TypeScript and the straight-forward state management offered by MobX:

Getting started with TypeScript and MobX is made easy and both of the technologies are widely adopted and will be around for quite a few years. Likely longer than your average web application built with them. Or React, Redux or Babel themself at this rate of change.