What libraries are we using in our front end projects?
When you are thinking about JavaScript tooling, you may be a little bit lost. There are so many choices! In this blog post, I want to show you what primary libraries we decided to use.
If you are not familiar with JS tooling at all, this blog post will be the best starting point for you.
UI
The most important thing first. We are developing front end, so we need something to render UI. For over two years, the obvious choice for us has been React.
Data-flow
When it comes to data-flow management, we are mostly using Redux. It is simple, extensible and easily testable. Redux also plays great with React, using react-redux.
We try to structure our front end as a set of applications which are talking with each other. We use dead-simple implementation of the event bus to provide communication between them.
Routing in SPA
When developing SPA (single page application), we need to use some kind of router. We are using Backbone’s router with some tweaks for the job. However, we are looking envy at router5 — it looks like a great alternative.
There is quite a popular solution called React Router, but we found it hard to test and leaking across abstraction layers. We cannot recommend it in any way.
Data representation
Immutable.js is an amazing library, but not really indispensable. Dan Abramov shows how to avoid mutations on Array and Object with a usage of a standard library.
If you don’t need anything complex, it may be a good idea to wait a bit before jumping into Immutable.js.
Testing
I made a lot of mistakes setting up some test stacks. Over-powered setups make it hard to test in some cases. This causes people in your team to hate testing. Therefore, test stack should be as simple as possible. No globals, no DSL for doing BDD.
Tape.js is a great choice. We mix it with usage jsdom and sinon. React also delivers some useful test utils.
Transpilation & Module bundling
There is not much to talk about. We just use Babel for transpilation and webpack for module bundling.
I don’t want to go into details here. Both these libraries are great topics for another blog post and both of them have great documentations.
Developer’s environment
Your convenience as a developer is also very important. I highly recommend setting up ESLinter. It lets you catch common mistakes, even before you refresh your browser. Airbnb config is a great set of rules for the beginning. You may want to tune down their styling rules — they are quite aggressive. Not all team members may like that.
If you will use React, check-out eslint-plugin-react. It is simply amazing.
There is one thing I am thinking about introducing to this list. It’s Flow — the static type checker for JavaScript. But this is a topic for another time.
Is that all?
No, not really. These libraries are only the basic ones we would always use.
Thanks for reading! Feel free to comment and drop me a line on Twitter.
If you want to read more on JavaScript, follow us and check out React Kung Fu blog.
