React at Redgate
For more than a year, we have been using React and Redux. SQL Clone Web Client is one of the biggest application of React and Redux combination we have at Redgate and I must admit that we have found something we can rely on after trailing various front-end frameworks like Durandal.js and AngularJS. In this post, I will tell you a little bit about why we think React with Redux is good fit for us, at least for now (*cough*, https://dayssincelastjavascriptframework.com/, *cough*)!
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 you something which I wish someone would told me when I had this reaction and I think deserves to be emphasised 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:
Why React?
The above tweet 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, this is sort of mitigated by create-react-app. On the other hand, small applications are 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.
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