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

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

by admin

React.js State of the art (interview with Max Stoiber)
Modern web interface development is centered around several large communities.Over the past five years, React has won the sympathy of programmers from a wide variety of industries.React is the one and only library that has made MVC rudimentary in web interface programming. Today React is used by major 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 React world is the largest and very active community of opsors developers around it. Max Stoiber is one of the people who made React what it is today as a project. For the past few years, he’s been working on the most popular boilerplate project in the community and bringing the latest and greatest technology to the masses.
We talked to Max about new trends in the community, static typing for development with React, a new approach to component styling, and snapshot testing.
The secrets of React development can be accessed in the interview below.
– Hi Max!What’s interesting going on in the React Community right now?
React.js State of the art (interview with Max Stoiber) styled-components – a great new way to style React-components (of course, I’m judging biased, since I did this project myself along with Glen Maddern ). But seriously, React VR looks very promising, can’t wait for a good chance to try it out.
– Flow and React are a Facebook development, and it seems that the React team is more prone to flow (react-native, for example, is completely covered by flow) react also uses flow. Does that mean it’s better to use flow with React than TypeScript? Could TypeScript be a potential replacement for Flow + Babel?
– In my work, I used a combination of Flow and Babelfor the simple reason that these two tools are made by Facebook developers and are therefore guaranteed to be compatible with React. With TypeScript it’s a slightly different story. Flow developers have a lot of interesting ideas in mind, which TypeScript will inevitably lag behind due to some features of its device (e.g. dead code elimination).
Flow creates what’s called a Flowgraph, which is a graph of the whole application – it remembers which modules are related to each other. TypeScript doesn’t offer anything like that because it’s too big a task; Flow goes further. Flow determines if large parts of the application are cut off from the rest of the code, and offers to remove them! Jeff Morrison has a lot of talked about this On ReactEurope.
– React-boilerplate is one of the top 10 most famous and most used boilerplate projects on all of GitHub! What do you think made it so popular?
– React-boilerplate is included in Top 3 If you count create-react-app I think the community really helped it get into the top three. The project is popular because of the community activity around it. Somehow I’ve managed to have a steady stream of members who spend a lot of time improving it. Unlike many others, this is not the project of one enthusiast – this is the work of a huge group of people!
With react-boilerplate, you can deploy a ready-made environment for developing and testing your future React application fairly quickly. The project contains command line tools to help you generate new components for your future application with a few short commands! A ready-made folder structure for your components, styled-components, all the configuration you need to work with Babel and much more in the form of a compiled project here and now available in this project.
Join the community, welcome Feedback and participation
– You’ve been doing surveys recently about how people run styles in React applications. and css-in-js What conclusions can you draw? What is css-in-js anyway (people mean it in different ways)? How is it better than just CSS? How do you style React components? Are inline-styles good? Are BEM/OOCSS still in use?
React.js State of the art (interview with Max Stoiber) – My conclusion is that we need a more convenient way to style components, which is why we went with Glen Maddern on styled-components which will hopefully solve all the problems! Use styled-components !
What makes styled-components special is that they provide best practices in your component-oriented systems. Mine is presentation at ReactiveConf talks about this in detail. In a nutshell, the point is that by getting rid of the linkage between components and styles (class names), you create a whole system of small components that are completely focused on doing one task, it also helps delineate container components and presentation components

Author’s note : as of today styled-components do not support syntax highlighting features 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, etc.

– What c React development tools 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 happened to my application while it’s running. Unlike working with other frameworks, such as Angular, which uses two-way data binding, I know exactly what and why is happening in my application.
React and Redux DevTools are great, too bad not everyone still uses them.

Author’s note : React Developer Tools , in turn, are an indispensable tool for visualizing the hierarchy of components in an application. You can analyze State, Props components without resorting to a debugger or modifying the code.

– If you look at what js and React in particular are tested with, your head goes a bit crazy. Mocha, ava, jest, enzyme… There are several ways too, shallow testing, you can use jsdom, recently also snapshots in jest appeared. What should we do with all this? Isn’t there a React testing fatigue here?
– I don’t think so, moreover, most of these tools are not used exclusively for React. Testing tools have been around for years. I’m a big fan of Jest, not just because it’s made by an Austrian ( Christoph Pojer ), but also because snapshot testing is a real revolution in the way people test React components and in testing in general!
Snapshot tests simplify unit testing. In fact, they automate all the work you used to have to do manually – you just take a snapshot, and when you change something, you can tell Jest, "Yes, this is the right change" (which will be confirmed during code review) or "No, everything is broken, go back as it was!" Everything happens automatically, so doing unit testing is now quick and easy!
– Is Redux still on the rise? Is MobX worth using?
– I use Redux in my applications along with redux-saga And very happy with this combination.
You can think of Saga as a separate thread in the application (JavaScript, of course, is still single-threaded). Saga communicates with the main thread using Action ( Redux Actions ) asynchronously. It doesn’t matter to the application what happens after the button is pressed, it just starts the Action. The Saga thread can wait for the Action to get there, do something, and then send the Action back — all the while our main application has no idea that any Action is running at all. Because when Saga returns an Action, it’s just re-rendered, and that’s it!
This improves development in an amazing way because your main application and your long running transactions are really, really clean. Your entire application becomes clean, functional, and easy to test.
– Whatever you take : CSS, testing, typing, bundling, React has a bunch of solutions. What do you think is the problem? All React applications are different, like snowflakes, maybe we need standards?
– No, I don’t think we need standards at all. React is used to create complex interactive applications (at least, that is its purpose). Each such application, due to its natural complexity, has completely different requirements.


Despite the seeming variety of possible solutions, today you can already identify a number of recommended best practices for common tasks in application development, such as styling, testing, and debugging React components.
Styled-components may be a bit crude for use in serious applications today, but it all depends on the efforts of the React community contributors who are working on it right now. Give them six months – or make your own contribution to the development of one of the most popular and modern libraries today. After talking with Max, we can conclude that React’s strength is not so much in performance or patterns, but in a friendly community of people who are open to new ideas and dedicated to the common goal of making web interface development better and more efficient.


If you’re trying to keep up with the JavaScript world, the nearest professional event for you is the Technology Conference HolyJS 2016 Moscow The conference will feature 20 presentations on JavaScript development for frontend, backend, desktop and even VR

You may also like