My Development Stack
Choose the right tools and your job will be much easier. Several people have asked me what my current stack of development tools is. I decided to consolidate that information in this post, with a few notes.
- NodeJS v5 and NPM v3 — the basics you need for using the rest
- Typescript back ended with Babel — next generation JS language compilers
- Webpack — Module bundler
- ReactJS — A JS library for building UI
- React Router — A complete routing solution for React.js
- Redux — A predictable state container for JavaScript apps
- React Router Redux — Ruthlessly simple bindings to keep react-router and redux in sync
- React-Redux — Official React bindings for Redux
- Redux Forms — The best way to manage your form state in Redux
- ImmutableJS — Immutable and persistent data structures for JS
- ReactiveX (aka RXJS v5) — Reactive Extensions for Async Programming
- Ramda — JS functional programming library
- VSCode — free IDE from Microsoft for Typescript/Javascript
- Electron Shell — Desktop application development in JS
- ReactNative — Mobile app development in JS
- Firebase — cloud services provider and backend
Some Notes…
Typescript
After many years of C++, Java and C# development, I ventured into the land of Javascript (~3 years ago). The language that I had always thought of as being slow and mostly for scripting has grown up. It’s amazingly fast (in the browser and in node) and productive. The Chrome debugger built into Chrome is very powerful. Coming back to Javascript, I had that same sense of fun I had when first learning to code in Basic as a teenager. It is a very dynamic language, with very fast turnaround in the code-edit-test-repeat cycle. Coding is fun again!
Alas, my early romance with Javascript left me wanting in the way of a type system. What I found is that without a type system, unit tests become even more important and you spend a lot of your time in the debugger rather than the IDE. The feels to me to be less productive overall.
Enter Typescript. I started using Typescript when it first came out a few years ago. It was useful, but had it’s own odd module system (not ES6 compliant), and lacked many of the newer ES6 language features. It also meant using Visual Studio for the best support and I had pretty much weaned myself away from PCs. Jump to the current Typescript 1.8 (beta as I post this, but but release soon). I can use ES6 module syntax, the majority of Es6 features, and it even recently fixed an issue, that now allows it to use synthetic default imports (when used in conjunction with Babel). I.e. up till 1.8, you would have to import React as below:
and now you can do this
which is the more common way, even though the prior way is actually the correct way. The second way is supported by Babel as it creates a synthetic default import in cases where there is no default export in a module, allowing you to now import that module as if it were a default.
Babel is a fantastic transpiler which I used by itself, before moving to the latest Typescript. I now use Typescript outputting ES6 code fed into Babel, which converts it to ES5. I do this as Typescripts conversion of it’s language to ES5 is less complete, and adding Babel affords better interop.
Rx or Reactive-X is a wonderful library for dealing with asynchronous streams of data/events. I am currently using the beta for any new code I write, as it attempts to be more compliant with what is hoped to be the observable standard for ES7.
Ramda is a wonderful library for doing functional programming in JS. Most JS developers are more used to underscore or lodash, which can be thought of as providing similar functionality without being “functional” per se. Ramda was written as being functional from the start. Lodash has recently added a functional variant as well.
I had been using Atom as my IDE and then stumbled across VSCode from Microsoft. It is layered on top of the Github Electron Shell just as Atom is, but seems to me, to be faster and more importantly, to handle Typescript better. I was pleasantly surprised and it is a free product (open source as well).
I also just started with Redux-Forms, but if you are using Redux, you will find it a great way to integrate your forms with Redux.
