I'm a bit of a tooling nerd, I believe having good tool is crucial to do a good job and be efficient. I've recently played around quite a bit of new technologies and I'm now very happy with my front-end toolchain.
Modern tools and libraries
- Browserify to use the awesomness of commonJS and npm. Huge ecosystem and good module system. The first time it seems weird, but it actually just work.
- Jest from facebook. It's a testing library built on top of jasmine, which automatically mock dependencies. This is incredibly awesome and cannot be over-emphazied. It makes testing modules so much easier!
- ES6 with 6to5 and es6-shim. The es6-shim is optional if you only want to add the syntaxic sugar. I believe however that having destructuring assignment, default parameters and rest parameter make the code much more readable. One can see how to use a function with just the first line. No need to scan through the first lines to see if there any parameter handling (like
- React.js with flux as the general architecture. React encourage the creation of small and reusable components (don't forget to use
propTypes). Flux makes testing and dependency management easy. It's a bit weird when starting but it scales very well and keeps the original simplicity even when the app grows in complexity.
- gulp as the build tool. Using watchify to build the browserified bundle faster (I want a feedback loop below 1s).
Bleeding edges experiments
I also tested a few things but I believe they are not ready for prime time yet.
.d.tsfiles though so it'll soon be quite good.
This is now my default tool chain when starting a new front-end client. Usually I add the css files through bower. It's a very strong base, easy to start with and scales well too.