Published on 14 March 2015 Tweet
I am a software engineer, and I understand how you feel for your day to day job as a developer. Before using React, sometimes it just doesn’t feel right with your code, especially when you are building user interfaces. Because there are so many possible states, and it is not possible to test all of them. There is mutable DOM, and users could input something that you are not expected. Or sometimes your UI just doesn’t work, and it perform some unpredictable behaviour, or doesn’t scale for large applications. Because data changes over time.
The art of programming, is the art of organizing complexity. React JS, is the library that help you to organize complexity for building UI.
What is React? React is the view of MVC, stands for model-view-controller. It is not a complete framework, like Meteor JS. You could use it with flux or react router for full MVC, but this is out of the scope of this blog post. React is developed by Facebook and Instagram (which is also Facebook). And it is used in their production. So if you go to Facebook.com, the comment box you see is a react component. Inside it, it has comment form, and the comment list. Inside the comment list, it’s each individual comment. You can think of UI is a box, inside another box. For Facebook, it is challenging for them to build a scalable UI with the old tools, so that’s why they build React, to solve the problems. Let me explain to you.
Why React? We are going to talk about three things. The first is React component. Everything in react, is component based, instead of templating. That means you can break down your view into smaller pieces, that is modularise, that is encapsulated, that is also reusable and unit testable. Secondly, it is fast, because they invented the virtual dom. I will show you some benchmarks later on. Thirdly, it helps you to manage UI with data that changes over time. I will further explain it as well.
Firstly, React components.
My previous job is a Meteor JS developer, and I understand the problem of using handlebars or spacebars as the template. It limits the way you express yourself, and sometime we just need more flexibility than that. For example, when you are using the loop, how do you get the index of each item? I will need to write some other code to hack it, right? Because this logic is not provided out of the box.
To write a react components. First, you create a variable, and call React dot createClass. Before that, you can use CDN, bower install or browserify to include the React library. Then just render an idempotent function that return the React DOM. The first argument is the attributes of the DOM element and the second argument is the context.
So we just created the React component, how do we render it? Simply called React.render with the first argument is the component that we just created, and the second argument is the dom node in your html file.
As I said, one of the benefit, for using React component, is you can do server-side rendering, which is fast and great for SEO (not CEO). Instead of rendering the DOM in the server, we render a string from the server, and the client-side will handle it.
Next, I am going to talk about the performance. Because of the Virtual Dom, it makes re-rendering on every change really, really fast.
Here is the challenge in the traditional approach. Sometimes you just want to make a small changes, maybe just the numbers, but you may need to re-render the whole thing or even the whole page together. Working with the DOM is expensive, and the DOM is slow.
So facebook invented the virtual dom. There is diff algorithm, that could compare the old virtual dom with the new virtual dom. Then it finds out what it the difference between the two. And then just update the changed part. Therefore it minimize the DOM manipulation. And reads and write the DOM in batches.
Here is the benchmarks between key-value observing frameworks, such as Ember or Meteor, and comapare with React virtual DOM. For rendering 25 items, there is not much different. However, when we are talking about rendering 10k items, the improvement is significant.
The reason here is because of the big o-notation. One is big O of m, which is the model. The other one is big O of v, which is the view. In most of our use cases, our model is much bigger than the view. That’s why when you load a Meteor application on your mobile, it gets very hot, because it used up your memory. Most of our smart phones nowadays are pretty fast in terms of the CPU, it’s dual core, qual core, octa core, so optimize for the memory footprint is the key, for performance on mobile.
Lastly, the main problem React is trying to solve, is to build UI with data that changes over time.
And state, is what makes building UI particularly hard. This is one of the most confusing concept, when I start to learn React, back in the days at Hack Reactor. It took me a while to figure this out.
For those of us, we use Angular, you must be familiar with the concept of two way data binding. When you update the view, you update the model; when you update the model, you update the view. This is great, when you are talking about one view and one model, but it starts to get complicated, when there are multiple views with multiple models.
React use a different concept, there is no dirty checking, but use one-way data flow. A parent component should manage the state, and then the data is passed down to it’s children component via props. The children then could have further children in the hierarchy. Remember, state is mutable, while props is immutable. It is important to understand the difference between the two.
State is the top level data, and it is used with data that changed over time. For example, in your react component, first you could get the initial state using getInitialState method, which could be empty array, or some unknown string. Then you can render the component first, without any data. Then after the component is mount, we can send an ajax request to the server, and wait the server to send back the data asynchronously. Once it’s success, you invoke the setState method with the data. Be careful you need to bind this, because this is changed, and this should be talking about this React component☺
You could also handle events at the React components. For example, you could set this button onclick, and invoke the increment function. The increment function could then invoke setState and re-render the component, just like hitting the refresh button of this component.
To recap, why React is awesome, because it is so simple. It allows you to write re-usable, testable components. It is fast. And it helps you to handle UI with data that changes over time.
That’s it! Any questions?
Originally published at victorleungtw.com on March 8, 2015.