Windmill Experts: Ivan Myronov, React Team Lead

Ivan Myronov, who leads the React team at Windmill, is next in our Thought Leadership series. In this interview, Ivan takes us through the different facets of React and how the React team helps Windmill stand out from its competitors.  

What is React and why is it important?

Ivan Myronov: React is a JavaScript library for building user interfaces. Please note that React is a library, not a framework. React is often referred to as a framework, but this is a mistake. Firstly, React does not oblige you to do anything, nor does it form the “frame” of the project. Secondly, React does a single task: it shows the interface component on the page, synchronizing it with the application data, and only this library is generally not enough to fully implement the project. To fully implement the project, you most likely need to use a React Router and a state management tool – Redux is the most popular one. You can even use a ready-to-use components library to do the project faster.  

What makes Windmill’s React team different from its competitors? 

IM: Each member of the team spends a lot of time learning and practicing with React, with special attention paid to “clean code” principles and constant refactoring. We do meetings twice a week to discuss our tech dept and prioritize things.  

What are some architectural differences between a JavaScript library such as React and a JavaScript framework such as Angular? How would that impact the decision for a project to use one versus the other? 

IM: React has a declarative approach to the description of interfaces. It enables a significant reduction in the amount of boilerplate code. It has a clear syntax and there are no custom directives. It also has an approachable learning curve. React has fewer abstractions than Angular. 

There are also differences in the features of the data binding mechanism. Angular has a two-way data binding system. React, on the other hand, uses one-way data binding. Its functional approach to development is also different. React is the fact that this library does not force the developer to use classes.  

React would be the most suitable in cases such as the rapid development of lightweight enterprise-level applications and expanding the functionality of an existing application, and/or Legacy projects that have to go through refactoring. Because React can be added to an existing project allowing for the updating of the codebase gradually and pointwise. 

What are some advantages and disadvantages of React? 

React can really make life easier for developers. With its help, you can build an interface from separate components that are easy to maintain. It adds a convenient layer of abstraction, eliminating the need to work with the DOM (Document Object Model) directly. 

In terms of React’s impact on the user experience, it depends on how you will build an application as you can build it using Angular, React, or plain JavaScript. Its impact on user experience will depend on the amount of time you put in for each.   

React is no longer a new library. Facebook as well as a large developer community are behind it. Therefore, React is well tested, regularly maintained, and constantly updated, and the transition to new versions is smooth. Also, thanks to the community, React has well-developed documentation and a great deal of experience is shared across articles, courses and conferences. This greatly facilitates not only the study of the library by beginners, but also the search for answers to all sorts of questions in the process. 

On Github, you can find ready-made React components for almost all occasions. And if you can’t find them, but there exist the necessary independent libraries, you can look for an integration or make it yourself. In the React community, over time, certain approaches and agreements have been formed for organizing the project, code, and solving common problems. For developers, this means that you need to spend less time discussing certain agreements because you can use ready-made and already established ones. 

However, when using React, there are features that are important to consider. React increases the size of the application that users need to download (~40 kB for React and React-dom packages). The downloaded code must be executed in the browser. For the user, this means that the application will run more slowly. 

Furthermore, along with the virtual DOM, there are some overhead costs: firstly, in terms of execution time (comparison of virtual trees does not occur instantly); secondly, from memory, because virtual trees need to be stored somewhere and not in a single copy. As the number of elements on the page increases, these costs increase, which can be a real problem on mobile devices. Therefore, when learning React, it is important to pay attention to ways to optimize the rendering of the application – the necessary tools for this are in the library itself. 

Average entry threshold in React. To start developing with React, a programmer must not only learn the library itself, but also get used to the paradigm used. There is a good article about the “Philosophy of React” on the official website. 

DOM is an important component of React as it represents the entire UI of your application. What is the virtual DOM? How does react use the virtual DOM to render the UI?  

In React apps, we don’t work directly with the DOM tree. Instead, we describe the markup with JSX, and React decides how to turn it into actual DOM elements. This is made possible by an abstraction called the virtual DOM. 

Previously, in various articles, one could often come across the misconception that, thanks to the virtual DOM, React is fast. It should be understood that all other things being equal, a React application cannot be faster than what is written in pure JS, if only because React itself is written and executed in JS. 

Any advice for graduates looking to enter your field? 

Firstly, React is a popular library that will be relevant for a long time. This means that you can always find a project written in React and work on it. And for people who are well versed in React, there is a demand in the market. 

Secondly, this is a whole brave new world with its own huge community. React helps to look at the development of interfaces in a completely different way through the prism of declarative programming. This is useful for general development and broadening your horizons, and the knowledge gained will make it easier to learn other similar libraries and technologies (Vue.js, Svelte or even SwiftUI). In addition, many of the conventions, patterns, and approaches adopted by the community in and of themselves help write better and more maintainable code. 

But it’s also important to understand that React is a JS library. And before learning React, you need to master JS, HTML, and CSS at a good level. This will speed up the development of React and increase the value of the developer in the market. This is because knowing the fundamentals helps a developer choose the technology that is best suited to the task being solved, be it React or something else. 

What problems does React solve for Windmill’s customers? 

It improves the rapid development of lightweight enterprise-level applications and expands the functionality of an existing application. Moreover, React helps in the refactoring of legacy projects. Because React can be added to an existing project, it helps update the codebase gradually. 

Windmill Digital offers a variety of digital product design and digital product strategy services that will help you stand out against your competitors. For more information, contact us here.