React.js Structures JavaScript for Easy Componentization

Based on an article originally published in The New Stack.

JavaScript is in the midst of transforming development teams’ expectations for desktop, server and mobile apps. Enhancements to JavaScript are enabling it to break free of the browser, while technologies such as Node.js and its package manager npm facilitate creation of portable front-end and back-end apps that rival those traditionally created for environments such as Windows, Linux and mobile devices.

React is part of a similar transformation within the JavaScript community itself, which is helping developers to improve development practices that were required by the web environment within which JavaScript matured. This transformation promises to enable JavaScript developers to create apps on faster timelines, with improved quality and maintainability, while eliminating much of the tedium that developers despise.

Developers love JavaScript and React

Stack Overflow, a popular destination for software developers, provides a community where millions of developers can help each other. Each year it does a big survey of its users. The 2017 survey showed that JavaScript is the most popular programming language for the fifth year in a row.

It also looks at popular libraries and frameworks to understand what developers value. React developers probably wouldn’t be surprised to learn that React is the most-loved technology — not only within the JavaScript ecosystem but among all languages and ecosystems.

At Sencha, we believe that this popularity is largely due to the benefits that React brings to the development experience.

JavaScript application code has traditionally been hard to understand, due to code being spread across various JavaScript, HTML and CSS files, and events and data flowing through a number of non-intuitive paths. Plus, inconsistencies and incompatibilities between browsers required various tweaks and special cases to be sprinkled around the code. As a result, development teams struggled to create and maintain high quality, large-scale applications. Only the most talented and disciplined teams succeeded in these conditions.

React uses a declarative, component-based approach to address these pain points. Components encapsulate the necessary HTML, JavaScript and CSS for a particular component, and apps are built by composing components into larger components that encapsulate their own data and logic. This encapsulation creates natural structure between the different components, making it much easier to understand, improve, refactor and maintain even large-scale apps.

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.

And, it’s easy to drop React into an existing JavaScript app to try it out, often without requiring big changes to other parts of the app. React automatically optimizes document updates, meaning that developers spend much less time trying to wrangle good performance out of their views.

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.