React with Redux: A Stable, Powerful and Scalable Combination - Part 1

For the last a few months, I have been using React and Redux. I successfully converted a small application from Aurelia to React + Redux combination. Actually, it's a lie that that application is small. I told you it's small because it was less than halfway done at the time I started converting. That Web application is meant to be complex and has complicated data needs. Besides that application, we started building a completely new web application on top of React and Redux: SQL Clone Web Client. We haven’t shıpped ıt yet but we are approaching there.

This is an interesting move from someone like me who hated and thought React was bad.

@migueldeicaza @jongalloway reactjs is the problem, not the solution.Just look away, be safe :)

— Tugberk Ugurlu (@tourismgeek) July 9, 2015

However, I must admit that it was a premature thinking. I had my reasons but those reasons blocked me to look further to see the actual benefıt and power of React. In this post, I am going to hopefully answers the "why" question behind React and I will take it further to mix it with Redux.

I also suggest you to have a look at the short video of Cory House answering the "Why React" question.

React

If you don't know already, React is a library from Facebook to help you create user interfaces. It's important to make the distinction here that React is not a framework like Angular or Aurelia. You can see React as the V in MVC. However, this doesn't mean that you cannot create full-blown applications with React. There are a few other tiny libraries which you can plug into React like react-router, react-redux and they close the React's gap to build scalable Web applications.

React takes a declarative and component based approach on creating user interfaces. For example, the below is the well-known "Hello World" example of React:

var HelloMessage = React.createClass({
  render: function() {
      return <div>Hello {this.props.name}</div>;
  }
});

ReactDOM.render(<HelloMessage name="John" />, mountNode);

mountNode is just an element here which you can get a hold of through document.getElementById or similar APIs to that.

This will print "Hello John" inside the mountNode. At this point, it's OK to be puzzled with all the buzz about React because this is not something which blows your mind and if you are seeing this for the first, it's also OK to go "WTAF" here because you have something HTML{ish} inside your JavaScript code. This is neither HTML nor part of Javascript. That is JSX and it needs transpiling. As stated, you go "WTF" over this (well, at least I did) because it might go against the "separation of concerns" thinking you have been holding onto. I have been there and done this. I stopped looking at React at that point and convinced myself that it's not something that would scale in terms of maintenance.

Do you have the same reaction? If so, let me tell something which I wish someone would told me when I had this reaction and I think deserves to be emphasized over and over again. The above "Hello World" example is not the place where you should start learning React. It should be "Thinking in React" documentation that you should start with. It's such a good documentation explaining what the mindset you should be in while you are working with React. However, you might be dealing with another challenge in our mind now while this direction can put you into a different situation:

Marc was almost ready to implement his "hello world" React app pic.twitter.com/ptdg4yteF1

— Thomas Fuchs (@thomasfuchs) March 12, 2016

This kind of has a point. I believe the amount of boilerplate code which you write with React to get your application running is higher than any of its opponents. However, small applications is probably not going to highlight the value of React that well. You see the value it brings when you think in terms of the whole application. Let me tell you a few things about this.

To me, most valuable thing about an evolvable application (doesn't have to be a web application, any sort of it) is to be able to reason about its behaviour at any point during its evolution. Whenever, you see some unexpected behaviour, you should able to say "this is happening because this part in my application is doing something wrong". This is also valid for expected behaviours as well as you will be contributing to its evaluation by adding new features to it and you should know exactly where you need to apply the changes to add those features.

The other point I want to make here is based on amazing Brian Holt's talk at Dev Day: "React: Learn Once Write Anywhere". If my memory is not failing me, he stated a very important fact about a React application: its constant complexity level. I accept that a typical React application starts complex but that complexity mostly stays the same during the entire evolution of the web application unless you go outside the boundaries of the structure. However, if you go with a simple approach at the begging, your complexity will grow as you grow your web application codebase. I have witnessed this several times and I will tell you that it’s not fun to apply changes after a certain point.

If you are struggling with the React getting started process, there is an approach which I see very efficient that will ease your process. You can start working without thinking about the separation of your application into smaller components. With this way, you can write your components as big, fat components. Once you have two or three like that, you will start seeing patterns which will make you think about isolations. That's where you can start drawing mockups like this one. I went this way at the start where I was really fuzzy about React but now, it's a set mindset for me that I start with a mockup.

Final point I want to touch on is about stability and problem solving, I think one of the biggest values of React is its stability and adoption. I can assure you that the most of your Web UI problems have an answer in React and it is also highly likely that someone has already written up a blog post, put a sample somewhere or answered a Stackoverflow question on that. Also, Facebook and some other big companies rely on React. So, the evolution of React is a fairly safe progress in this fast evolving JavaScript ecosystem.

Conclusion

In this post, I just wanted cover the React part of the story and I should admit that it's not much. However, my aim here is to convince you to give React a chance. I can understand that you may have questions about how to handle the data at this stage (e.g. how to react to the changes that happens behind the background, etc.). This is probably a good time for you to look at what Flux application architecture is all about and have a go with one of the state management libraries like Redux. This is the exact topic that I will touch on the second part of this blog post series, which will also highlight the practical strength of React along with Redux.

Further Resources

• Thinking in React
• Reconciliation
• React (Virtual) DOM Terminology
• Reusable Components
• Expose Component Functions
• JSX in Depth
• React - Basic Theoretical Concepts
• Use React with Other Libraries
• Communicate Between Components
• ReactDOMServer - Render React Components on the Server
• 9 things every React.js beginner should know