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
- 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
- Electron Shell — Desktop application development in JS
- ReactNative — Mobile app development in JS
- Firebase — cloud services provider and backend
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.
Getting Your Feet Wet With Playgrounds
If you find yourself interested in any of these JS development tools, then “playgrounds” aka REPL’s are a great way to get the feel for using them. Several exist for the tools above and most of the rest can be tried out in the Tonic online repl.