Using ExtReact UI Library in Web Apps: Pitfalls You Can Avoid

In this article we want to share our experience in using ExtReact and prevent you from the challenges and pitfalls our developers have faced. Despite its promising capabilities, in reality, it leaves a lot to be desired.

Let`s make it loud and simple.

ExtReact overview

First of all, let us briefly explain what ExtReact is.

ExtReact is a UI library based on Ext.js created by Sencha. Here are some statistics about this company.

ExtReact provides the frequently used components for React developers such as charts, grid, trees, calendar, buttons, menus, pivot grid, etc. In general, it offers more than 115 ready-to-use UI components.

You can find two types of packages that offer standard and premium features.

ExtReact also has a wide documentation on how to use and customize these components. Except this, you can find some ready stylized themes for your future applications.

You may be interested in: Tools for React Native App Development: Expo Review

ExtReact developers have an opportunity to extend and change the ready components using their numerous properties. Each component has nearly 100 properties and methods. ExtReact uses its inner store for data processing with such features as filtering, sorting out, etc.

Now let`s go straight to our experience in using ExtReact.

Check also our technical expertise and technologies specialize in.

Our experience in developing React app with Sencha Ext.React

Our developers have used ExtReact in the multi-user data analytics tool for the agricultural company. The main goals of this system are activity management, income and clients tracking, comparison of the department`s progress, etc.

Why have we decided to use ExtReact in particular? The reason is that at first sight, it gives ready-to-use UI components for various tables, diagrams, and figures - essential items for analytics.

What ExtReact components were used

Bar chart

Donut chart

Panels

Toolbars

Main challenges in development with ExtReact

• Components customization

At the first sight, these components seem to be easily customized because of the configurable properties and detailed documentation.

However, exactly these advantages make the library break down. In order to set some basic feature, you have to find the responsible property for it.

When you have already found this property, it often turns out, that it doesn't function as expected.

For example, you need to set the height of the component. In most cases, it can`t be set with the ordinary online styles. In such situation you have to use ExtReact height property, that is not available in inline styles. That`s not to mention more complicated options.

ExtReact by itself provides development with jsx. ExtReact is based on ext.js, however, jsx development is still being finalized. It makes the development with jsx limited in comparison with programmatic components creation, especially when it comes to customization and overriding. In addition, most of the answers on forums, and even in the documentation are related to programmatic development.

• Some of the essential functionality is not available

For example, internationalization. Ext.React also does not support common code guide styles such as airbnb for ESLint.

• The framework is too broad-based

Despite the numerous characteristics of the components in the documentation, some of the components do not have the required functionality. When rendering the code from examples into the app, it doesn't function as shown in the examples. As the result, additional modules should be added manually.

• ExtReact has no common structure

Similar components often have different configurations.

• Small community

Unfortunately, ExtReact has a small and closed community. It`s very tough to find an answer to the questions sometimes. It`s the same with Sencha forum.

Tips on what to do before using ExtReact

• Gain insight on Ext.js

• Learn overriding

• Use ready components without their customization

• Carefully read the documentation

When Ext.React can be useful

• During MVP development (when you only have to visualize the components, without their customization)

• When rendering the components programmatically, without using jsx

When ExtReact is not the right choice

• While developing projects with big and specific functionality

• When a big customization is needed

Wrapping up

Despite the wide functionality and rich choice of ready components in ExtReact, you are often forced to seek help from external libraries.

Сonsequently, the paid license loses its sense, since to simplify the development process, you have to use the method of integration with widely used free libraries.