React: fast efficient generation of HTML code
August 03, 2018
React: fast efficient generation of HTML code
Score 10 out of 10
Vetted Review
Verified User
Overall Satisfaction with React
React is being adopted as a standard in our organization. When I started using it two years ago, I was one of the early adopters. A few projects had adapted it for part of their system and a number of other projects had announced their intention to move in that direction. Shortly thereafter, we built a new system of design patterns to make our UX more consistent, and this project began building in React. At this point, many projects have begun to convert to it, the design pattern system is fully implemented with it, and fundamental architecture plans for the future are based on it.
The main business problem it addresses is to provide an efficient UX implementation and form the basis for common code development across front end applicatiions. It also is part of our plan to move from Python web apps to NodeJS web apps.
The main business problem it addresses is to provide an efficient UX implementation and form the basis for common code development across front end applicatiions. It also is part of our plan to move from Python web apps to NodeJS web apps.
- React is designed around the notion of generated html as opposed to templated html. This provides more flexibility in building elements on a page, and allows developers to create html that is programmatically configured based on runtime considerations.
- React uses JSX, which is HTML templating integrated into javascript code. This simplifies the generation of complex structures, especially those that vary based on runtime and interactive data.
- React is more efficient because it generates a virtual DOM rather than directly building in in the actual DOM. By building 'offline' in this manner, the DOM generation is faster. After building, it can be installed in one operation.
- React only builds those portions of the display that have changed, making display updates more efficient.
- Debugging React is challenging. Bugs in react code generate stack traces internal to React and it is often totally unclear how it relates to the code you actually wrote.
- Relating your React elements to corresponding DOM elements is difficult. The intentional separation of virtual and actual DOM also makes it difficult to map the elements to the structures in the DOM. This is partially ameliorated by the use of the React dev tool, which provides a DOM-like view of the React elements, but the tool still does not provide a direct correspondence with the DOM that is often necessary to figure out why something isn't right.
- Because JSX is React-specific and not a language feature, a special compilation process is necessary to convert JSX code to normal JS. Coming from a C++ background, compiling things doesn't bother me, but many JS developers are used to a less structured development.
- Since we're still in the conversion cycle, all the data is not in. But React has had a positive impact on Developer productivity and the ability to produce efficient, highly flexible UX. This in turn, enhances our customer experience, which is generally the most important component of our ROI.
- Conversion has been difficult since it requires a change of mindset. Most developers have adapted quite well, but the process has been lengthy, and 2 years in, we are still not fully converted. This essentially is a temporary negative impact on ROI.
I have not used or evaluated virtual DOM alternatives to React.