React.js State of the art (interview with Max Stoiber)

The modern development of web interfaces is centered around several large communities. Over the past five years, React has won the sympathy of programmers from various industries. React is the only library that has made MVC rudimentary in programming web interfaces. Today React is used by the largest companies to develop a wide variety of products - Facebook, Airbnb, BBC, Coursera, eBay, Expedia, IMDB, the list goes on.

One of the unique features of the world of React is the largest and very active community of open-source developers around it. Max Stoiber is one of the people who made React become what it is today as a project. Over the past few years, he has worked on the most popular boilerplate project in the community and introduced the latest and best technologies to mass use.
')
We talked to Max about new developments in the community, about static typing for developing with React, about a new approach to styling components and about snapshot testing.

The secrets of React development can be found below in the interview.

- Hi, Max! What is happening now in the React Community?

- styled-components - a new great way to stylize React-components (of course, I judge biasedly, since I myself did this project with Glen Maddern ). But seriously, React VR looks very promising, I can't wait to get a good chance to try it out.

- Flow and React - development of Facebook, and it seems that the React-team is more inclined to flow (react-native, for example, completely covered by flow) react also uses flow. Does this mean that it is better to use flow with React than TypeScript? Can TypeScript be a potential replacement for Flow + Babel?

- In my work, I used a bunch of Flow and Babel for the simple reason that these two tools were made by developers from Facebook and, therefore, are guaranteed to be compatible with React. TypeScript is a slightly different story. There are many interesting ideas in the plans of Flow developers, which TypeScript will inevitably lag behind due to some features of its device (for example, dead code elimination).

Flow creates the so-called Flowgraph, which is the graph of the entire application — it remembers which modules are connected to each other. TypeScript does not offer anything like this, because it is too big a task, Flow goes further. Flow determines whether large parts of the application are cut off from the rest of the code, and offers to remove them! Jeff Morrison talked a lot about this at ReactEurope.

- React-boilerplate is in the top 10 most famous and used boilerplate projects on all GitHub! What do you think made it so popular?

- React-boilerplate is in Top 3 , if you count create-react-app . I think the community really helped him get into the top three. The project is popular due to the activity of the community around it. Somehow I managed to ensure a constant influx of participants who spend a lot of time improving it. Unlike many other boilerplate, this is not a project of one enthusiast - it is the work of a huge group of people!

Using react-boilerplate, you can quickly deploy a ready-made environment for developing and testing your future React application. The project contains command line tools to help you generate new components for the future of the application with a few short commands! A ready-made folder structure for your components, styled-components, all the necessary configuration for working with Babel and much more in the form of a compiled project are available here and now in this project.

Join the community, welcome feedback and participation .

- You recently conducted surveys about how people manage styles in React-applications and css-in-js . What conclusions can you draw? What is generally css-in-js (people understand this as different)? What is better than just CSS? How to stylize React components? Is inline-styles good? Is BEM / OOCSS still being used?

- My conclusion is that we need a more convenient way to stylize components, which is why we began working with Glen Maddern on styled-components , which we hope will solve all the problems! Use styled-components !

The peculiarity of styled-components is that they ensure the use of advanced techniques in your component-oriented systems. My performance on ReactiveConf talks about this in detail. In a nutshell, the bottom line is that by getting rid of the connection between components and styles (class names), you create a whole system of small components that are fully focused on accomplishing one task, it also helps to distinguish between container components and presentation components .

Author's note: today, styled-components do not support syntax highlighting in all popular editors and IDEs, but Max assured in his presentation at ReactiveConf 2016 that soon this vital functionality will be available in Atom, WebStorm and so on.

- What tools for development with React can you recommend?

“ Redux DevTools is a great tool because it makes it very easy for me to keep track of all the changes that have occurred in my application while it is running. Unlike working with other frameworks, for example, Angular, which uses two-way data binding, I know exactly what is happening in my application and why.

React and Redux DevTools are just great, it's a pity that not everyone still uses them.

Author's note: React Developer Tools , in turn, is an indispensable tool for visualizing the component hierarchy in an application. You can analyze State, Props components, without resorting to debugger and without modifying the code.

- If you look at what js and React are tested in particular, your head is spinning a little. Mocha, ava, jest, enzyme ... There are several ways too, shallow testing, you can use jsdom, recently there are more snapshots in the jest. What do we do with all this? Is there any React testing fatigue?

“I don’t think, moreover, most of these tools are not used exclusively for React.” Testing tools have been around for many years. I'm a big fan of Jest, not only because it was made by an Austrian ( Christoph Pojer ), but also because snapshot testing is a real revolution in how people test React components and in testing in general!

Snapshot tests simplify unit testing. In fact, they automate all the work that previously had to be done manually - you just take a picture, and when you change something, you can tell the Jest: “Yes, this is the correct change” (which will be confirmed during code review) or “ No, everything is broken, return as it was! ". Everything happens automatically, so unit testing is now quick and easy!

“Is Redux still on horseback?” Should I use MobX?

- I use Redux in my applications with redux-saga and am very pleased with this combination.

You can think of Saga as a separate stream in the application (JavaScript, of course, is still single-threaded). The saga communicates with the main thread using Action ( Redux Actions ) asynchronously. For an application, it doesn’t matter what happens after the button is pressed, it simply starts the Action. The Saga thread can wait until the action reaches, do something, and then send the Action back - all this time our main application does not suspect that any Action is running at all. Because when Saga returns to Action, it is simply re-rendered, and that’s all!

This improves development dramatically, since your main application and your long current transactions are really very, very clean. Your entire application becomes clean, functional and easy to test.

- Whatever: CSS, testing, typing, bundling - React has a lot of solutions. Do you think this is a problem? All React applications are different, like snowflakes, maybe we need standards?

- No, I do not think that we need standards. React is used to create complex interactive applications (at least that is its purpose). Each such application, in view of its natural complexity, puts forward completely different requirements.

---

Despite the apparent diversity of possible solutions, today it is already possible to identify a number of recommended advanced approaches for solving typical problems in developing applications, such as styling, testing and debugging React components.

Perhaps styled-components are a bit damp for use in serious applications today, but it all depends on the efforts of React-community contributors who are working on it right now. Give them half a year - or make your own contribution to the development of one of the most popular and modern libraries today. After talking with Max, you can come to the conclusion that the strength of React is not so much in performance or patterns as in a friendly community of people open to new ideas and committed to the common goal of making the development of web interfaces better and more efficient.

---

If you are trying to follow the world of JavaScript, then the closest professional event for you is the technology conference HolyJS 2016 Moscow . At the conference there will be 20 reports devoted to JavaScript-development for the frontend, backend, desktop and even VR .