Based on an article originally published in The New Stack.
Table of Contents
At Sencha, we believe that this popularity is largely due to the benefits that React brings to the development experience.
React encourages the use of unidirectional data flow, such as that espoused by Facebook’s own Flux architecture or libraries such as Redux. This makes it much easier to understand how data flows through the app, so developers — even new ones — can more easily develop and maintain the code without introducing unexpected problems.
React Is Not a Panacea
Unfortunately, although React provides a good foundation, development teams still need to address a number of other challenges. React is tightly focused on view technology. It provides tools to build views and render them in browsers efficiently, and that’s about it. React and Facebook provide a number of recommendations and best practices to help developers build their apps, but developers ultimately shoulder the burden of building the app — creating or procuring the various components, designing the data architecture and testing plan, establishing the look and feel of the app, adapting to necessary display environments, and so forth.
Sadly, while there are a lot of options that address specific parts of that list, there are very few options that help in all areas. In fact, adopting specialized solutions for some of the categories can make it much harder to address others.
For example, many React teams use a combination of custom-developed components along with open-source and in some cases commercial components. This provides useful functionality in the app but can make it extremely hard to implement a consistent look and feel across those components and the rest of the app.
And, components developed by different teams will necessarily provide different levels of customizability and alignment with user needs. Users may end up expending more effort trying to adapt components to their needs, compared to the effort saved by not building it from scratch themselves.
Component Selection Is Critical
The challenges mentioned earlier help to illustrate why component selection is so important to development teams: because it is so easy to get started, they may not realize the scope of incompatibilities or inconsistencies until it’s too painful to change them. Carefully identifying technical requirements, including functionality, testability, customizability, etc., before starting development enables better qualification of prospective components.
When evaluating components, consider not only the basic functionality of the component but also your ability to make it look and act the way you want. Consider cultural fit as well: will the components fit into your development workflow and automation systems? Even with source code, changing fundamental characteristics of components can require significant effort and introduce a large testing burden.
The easiest way to manage these challenges is by minimizing the number of sources used for your components. Components developed by the same team can typically be styled and tested in the same ways, enhanced through the same means, and in some cases even leverage specialized workflow tools that improve the development experience. These solutions can greatly decrease the effort and time required to build sophisticated React apps that provide a rich, beautiful, cohesive user experience.
About Sencha and ExtReact
I work at Sencha, where we develop and support ExtReact, a comprehensive set of components for React that work together seamlessly and are professionally built, tested and maintained. In addition to including over 100 powerful, pre-built components, ExtReact provides a flexible layout system that makes it easy to build apps that look great on multiple different screen geometries.
A carefully-designed data package simplifies the creation of performant data-driven apps, by enabling developers to more easily manage how data flows between the front-end and back-end. Many of the ExtReact components leverage the data package to provide consistent buffering, sorting, filtering and pagination capabilities with minimal developer effort. These operations can be performed locally or remotely, to ensure high responsiveness and an excellent user experience even with data sets exceeding millions of rows.
If you’re developing a sophisticated, data-driven app with React, I encourage you to carefully identify your technical requirements and then give ExtReact a try to see if it’s a good fit.