3 Reasons to love React

Recorded at the Hong Kong JavaScript and Node.js meetup on 3 Mar 2015:

Today, I’m going to talk about React. React is a JavaScript library for creating user interfaces. I have been using it for a couple of projects. The more I use it, the more I love it. So I’m here to tell you why I think it is awesome, why I am passionate about it, and why I am going to introduce it to you.

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 performs 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 helps 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 a React component. Everything in react, is component-based, instead of templates. 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 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 sometimes we just need more flexibility than that. For example, when you are using the {{each}} 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.

Also, it is a poor separation of concerns. We are separating technology, not a concern. The logic is in separated in different HTML and javascript files, but all of them are just handling of the same UI, with the same concern, which is rendering the UI. React to reduce coupling and increase cohesion. That means each module is less relies on a different module of the program, and each element of a module belongs together.

Besides, It would be nice if we could just write javascript files on both the client-side and server-side as well, So, instead of handlebars on the client and ERB templates on the rails server, we could use React components on both sides.

To write 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 returns the React DOM. The first argument is the attributes of the DOM element and the second argument is the context.

You could also use a different syntax that is more easy to read. Using JSX, which is an XML like syntax, which allows you to put HTML tags inside your JavaScript, and it is easier when you are working with the UX designer for them to read. A lot of people hate React, because of the JSX. I know what you are thinking, and some people said, this is going back to PHP or Rails as we put HTML tags together with our code. But I will explain the benefits later on. Just a side notes here, when you are using JSX, you need to specify it at the top here and use JSX transformer to transform it to javascript. Also, if you want to give a class to the div, you could not simply use class, but use className instead. JSX is optional, and you could use vanilla javascript instead, like this, if you don’t like it.

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 benefits, 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 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 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 a diff algorithm, that could compare the old virtual dom with the new virtual dom. Then it finds out what the difference between the two. And then just update the changed part. Therefore it minimizes the DOM manipulation. And reads and write the DOM in batches.

Here are the benchmarks between key-value observing frameworks, such as Ember or Meteor, and compare 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 a big O of m, which is the model. The other one is a 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 smartphones 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 the state, is what makes building UI particularly hard. This is one of the most confusing concepts, 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 its children component via props. The children then could have further children in the hierarchy. Remember, the state is mutable, while props are immutable. It is important to understand the difference between the two.

The 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 an empty array or some unknown string. Then you can render the component first, without any data. Then after the component is a mount, we can send an ajax request to the server, and wait for the server to send back the data asynchronously. Once it’s a 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☺

Props mean properties. You passed a plain old javascript object, and the name properties are handsome. As a result, it says Hello to me.

You could also handle events at the React components. For example, you could set this button on click, 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 reusable, testable components. It is fast. And it helps you to handle UI with data that changes over time.

That’s it! Any questions?

Here are the slides: https://docs.google.com/presentation/d/1QuLN39RzI81mEeSfqzrLmpP19jtPwsURXSDuKLHLf9M/edit?usp=sharing

Originally published at victorleungtw.com on March 8, 2015.