Chapter 2. Installing Powerful Tools for Your Project

Here is a great quote by Charles F. Kettering:

"My interest is in the future because I am going to spend the rest of my life there."

This brilliant inventor has left software engineers with the single most important piece of advice way before we even started thinking how to write software. Yet, half a century later, we're still figuring out why we end up with spaghetti code or the "spaghetti mental model."

Have you ever been in a situation where you inherit code from a previous developer and spend weeks trying to understand how everything works because no blueprints were made available, and the pseudo-self-explanatory-code became too hard to debug? Better yet, the project keeps growing and so does its complexity. Making or breaking changes is dangerous and no one wants to touch that "ugly" legacy code. Rewriting the whole codebase is way too expensive, so the current one is supported by introducing new bug fixes and patches every day. The cost of maintaining software is way higher than the original cost of developing it.

What does it mean to write software for the future today? I think it boils down to creating a simple mental model that doesn't change, no matter how big your project becomes over time. When the size of your project grows, the complexity always stays the same. This mental model is your blueprint, and once you understand it, you will understand how your software works.

If you take a look at the modern web development, and in particular, the frontend development, you'll notice that we live in exciting times. Internet companies and inpidual developers are tackling problems of speed and cost of development versus code and user experience quality.

In 2013, Facebook released React—an open source JavaScript library for building user interfaces. You can read more about it at http://facebook.github.io/react/. In early 2015, Tom Occhino from Facebook has summarized what makes React so powerful:

"React wraps an imperative API with a declarative one. React's real power lies in how it makes you to write code."

Declarative programming results in less code. It tells a computer what to do without specifying how, while an imperative style of programming describes how to do it. JavaScript calling the DOM API is an example of imperative programming. jQuery is another such example.

Facebook has been using React in production for years along with Instagram and other companies. It works for small projects too; here is an example of a shopping list built with React: http://fedosejev.github.io/shopping-list-react. I think React is one of the best JavaScript libraries used for building user interfaces that is available for developers today.

My goal is that you understand the fundamental principles of React. To achieve this, I will introduce you to one React concept at a time, explain it, and show how you can apply it. Step by step we'll build a real-time web application, raise important questions along the way, and discuss solutions that React provides us with.

You will learn about Flux/Redux and the unidirectional flow of data. Together with Flux/Redux and React, we'll create a predictable and manageable code base that you will be able to expand by adding new features, without scaling its complexity. The mental model of how your web application works will stay the same no matter how many new features you add later on.

As with any new technology, there are things that work very differently from the way that you're used to. React is no exception. In fact, some of the core concepts of React might look counter-intuitive, thought provoking, or even like a step backward. Don't rush to any conclusions. As you would expect, a lot of thought went into how React works, from experienced Facebook engineers who build and use React in production in business-critical applications. My advice to you is to keep your mind open while learning React, and I believe that at the end of this book, these new concepts will settle in and make great sense to you.

Join me in this journey of learning React and following Charles F. Kettering's advice. Let's take care of our future!