2015 was the year of React , with tons of new releases and conferences dedicated to the topic all over the world. For a detailed list of key dates from last year, check out the React 2015 Wrap Up.

The most interesting question of 2016: How to code an application and what are the recommended libraries?

As a developer working for a long time with React.js, I have my little idea and my best practices but it is possible that you will not agree with me so in this case, do not hesitate to drop a comment in order to open the discussion.

If you are new to React.js, check out this React.js tutorial or Peter Hunt's React how-to .

Manage data

Manipulating data is both easy and challenging. This is because there are multiple ways to pass a property to a React component in order to build the render tree, however it's not always obvious how to update the view.

2015 started with the release of several Flux libraries and continued with more functional and responsive solutions.

Let's look at where we are today.

Flux

In our experience, Flux is often overused ( i.e., used when it is not really needed).

Flux provides a clean way to store and update application state and trigger on-demand rendering.

It is useful for managing global application states such as: managing connected users, the state of a router or an active account, but it can quickly become quite tedious if you start managing temporary or local data.

We do not recommend using Flux to manage routing-related information such as items/:itemId . Instead, it is preferable to load and store this information in the component's state. This way, it will be destroyed when the component is removed.

For more information on Flux, The Evolution of Flux Framework is an excellent article.

Use redux

Redux is a predictable state container for JavaScript apps.

If you think you might need Flux or a similar solution, you should look at Redux and Dan Abramov 's course : Getting started with redux to quickly gain proficiency.

Redux is built around the ideas of Flux but avoids complexity by drawing inspiration from ELM.

Keep the States flat

APIs typically return nested resources, which can be difficult to manage in a Flux or Redux-based architecture. We recommend flattening them with a library like normalizr and keeping your states as flat as possible.

Tip for the pros:

const data = normalize(response, arrayOf(schema.user))
state = _.merge(state, data.entities)

(We use isomorphic-fetch to communicate with the API)

Use immutable States

“shared mutable states are the source of evil” Pete Hunt, React.js Conf 2015

An immutable object is an object whose state cannot be changed after it has been created.

Immutable objects can save us a lot of headaches and improve rendering performance with their reference-level equality checking. As in shouldComponentUpdate :

shouldComponentUpdate(nexProps) {
   // au lieu d'une comparaison profonde
   return this.props.immutableFoo !== nexProps.immutableFoo
}

How to achieve immutability in javascript?

The difficult way is to be very careful and write code like in the example below, which you should always unit test with deep-freeze-node (freeze before the mutation and check the result after).

return {
  ...state,
  foo
}
return arr1.concat(arr2)

And believe me, those were the easy examples.

The simplest, but also the least natural way is to use Immutable.js.

import { fromJS } from 'immutable'
const state = fromJS({ bar: 'biz' })
const newState = foo.set('bar', 'baz')

Immutable.js is fast, and the idea is elegant. I recommend watching the Immutable Data and React video by Lee Byron even if you don't intend to use it. It will give you a thorough understanding of how it works.

Observable and reactive solutions

If you don't like Flux/Redux or if you want a more responsive service, don't worry! There are other solutions for managing your data. Here's a list of libraries that might be what you're looking for:

• cycle.js (“A functional library and a responsive JavaScript framework for cleaner code”)
• rx-flow (“The Flux Architecture with RxJS”)
• redux-rx (“RxJS utilities for Redux.”)
• mobservable (“Observable data. Reactive functions. Simple code.”)

Routing

Almost all client-side applications use routing. If you're using React.js in a browser, you'll eventually need to use a library. We've chosen react-router from the excellent Rackt community . Rackt consistently produces high-quality resources for React.js enthusiasts.

To integrate react-router , take a look at their documentation, but most importantly, if you are using Flux/Redux, we recommend keeping your router's state synchronized with your state store/global.

Synchronized router-states will help you control router behavior through Flux/Redux actions and read router states and settings in your components.

Redux users can do this simply with the redux-simple-router library.

Code splitting, lazy loading

Very few webpack users know that it's possible to separate your application's code in order to split the bundler's output into several JavaScript chunks:

require.ensure([], () => {
  const Profile = require('./Profile.js')
  this.setState({
    currentComponent: Profile
  })
})

This is very useful in long applications because the user's browser does not have to download rarely used code such as the profile page after each deployment.

More chunk means more HTTP requests but that's not a problem with HTTP/2 multiplexed.

You can also combine this with chunk hashing to optimize your cache hit ratio after code changes…

The next version of react-router will bring a lot in terms of code splitting.

To understand the future of react-router, check out this blog post by Ryan Florence : Welcome to Future of Web Application Delivery.

The rest of the article

Original article by Péter Márton RisingStack , translated by the JS-Republic team

[separator type=”” size=”” icon=”star”] [actionbox color=”default” title=”” description=”JS-REPUBLIC is a service company specializing in JavaScript development. We are an approved training center. Find all our technical training on our partner site dedicated to Training” btn_label=”Our training” btn_link=”http://training.ux-republic.com” btn_color=”primary” btn_size=”big” btn_icon=”star” btn_external =”1″]