When to Choose ExtReact

A GUIDE FOR DEVELOPERS AND MANAGEMENT

Alan R. Weiss

INTRODUCTION

Since the explosion in popularity of JavaScript in 2009 as both a front-end and back-end language for building web applications, it has become increasingly complicated to choose the best technologies for developing data-intensive applications. With literally dozens of possible JS libraries, frameworks, and tools, there is an abundance of riches for the JavaScript developer.

What hasn’t changed are schedule pressures. For developers and their management, the acknowledgment of constantly changing user requirements has resulted in the rise of rapid and iterative software development life cycles (SDLC) and process models, including Agile (and Scrum), Kanban, DevOps, and similar techniques to quickly deliver functioning software. All of these expect that user requirements will change and embrace change as their key advantage. This is actually fortunate because websites have evolved from information-delivery vehicles created by webmasters to become sophisticated vehicles for delivering a great deal of a company’s marketing content and services. In order to keep up, you need tools that don’t leave you rewriting everything from scratch.

Software is now strategic and enterprise in scale. In order to take advantage of agile development and testing methodologies, software must be designed to be modular and must be well-structured to reduce maintenance and change costs. JavaScript libraries and tools provide these attributes.

The likelihood of schedule achievement is dramatically improved by adopting frameworks and components that are prebuilt so that the developer can focus on the value-add of their own application. Without having to create specialized, difficult-to-code user interface components, time to delivery and deployment is reduced. And without having to create specialized mobile applications in difficult-to-learn languages, those become a natural part of the enterprise development workflow.

Why React?

One of the more popular JavaScript technologies in use by professional developers is React, created in 2010 and 2011 by Jordan Walke, a software engineer at Facebook. Jordan’s personal belief that Model-View-Controller (MVC) design patterns caused too much recomputation of the user interface when the programmer wanted to change things.

One thing I noticed [was] that when people were creating point to point bindings in their more traditional “MVC” app structure, it would almost always end up requiring “computable” bindings which invoke a function anytime a mutable cell had received a “change event.” All these “computable bindings” ended up chaining together and small changes would end up causing large re-computation of the majority of the UI. I realized that functions already do transform inputs into outputs, and if we could just find a way to reinvoke those functions repeatedly, and quickly enough, that we could be much more expressive and concise, at not much more performance cost that the chain reaction that “computed bindings” would result in anyways. – Jordan Walke, Facebook

React has become extremely widespread and, along with Node.js, Angular, and other frameworks, has cemented itself as a key technology for enterprise developers such as Facebook, Paypal, Netflix, and many others.

Performance

The ability to do server-side rendering and appreciate the performance wins of initial page loads on cold caches is a feature of React. As JavaScript browser-side (client-side) rendering speeds improve, there may be less of a need to do server-side rendering, but having that as an option gives the developer a powerful tool to improve performance.

Perhaps React’s most important concept is the Virtual Document Object Model (DOM), in which React creates an in-memory (fast!) data structure cache. React writes to this Virtual DOM and then figures out what has changed on the web page. Only those things that have actually changed are updated in the browser’s display. The best part is that programmers don’t have to worry about this at all: they can write their application as if the entire page is updating, but only the changed portions consume rendering time. The React libraries take care of these updates. This is actually a very old concept in computer science (“dirty bits” being used as an updating methodology for user interfaces long ago), but React’s libraries do a particularly good job of just updating the changed subcomponents.

With ExtReact, developers are free to create web applications that work very well on mobile platforms such as Android and Apple iOS without the need to learn Objective C, Swift, or Android Java. Needless to say, knowing that very large web-based corporations continue to back innovation in React means investing time learning React is time well-spent.

A programmer/developer chooses React because they need to create sophisticated, data-intensive, responsive user interfaces quickly. But React doesn’t include prebuilt components. That’s where ExtReact comes in.

Why ExtReact?

You’ve chosen JavaScript as at least one of your technologies to implement enterprise-grade applications. Smart. You’ve chosen React for performance and maintainability reasons. Now it’s time to figure out how to design your application, and you certainly don’t want to reinvent the wheel.

Introducing ExtReact from Sencha

ExtReact builds on one of the more popular JavaScript technologies, React, to provide over 115 prebuilt UI components that you can easily integrate with React applications.

ExtReact is the most complete set of professionally tested and commercially supported React components for developers to use in creating visually stunning, data intensive applications on desktop and mobile devices. Because of React’s inherent performance advantages, creating web applications with very large data sets, data manipulations, and data presentations is made much simpler, yet more sophisticated and more enjoyable.

ExtReact also includes plugins for Webpack and Babel to optimize builds, and theming tools such as Sencha Themer gives designers and developers complete control over their application look and feel without having to write code to do so. Theming helps establish and reinforce a developer’s company branding, too, an important consideration when creating applications that consumers will access.

But ExtReact’s biggest value is clearly the pre-integrated 115+ user interface components. ExtReact components are consistent, extremely well tested, work across all modern web browsers, and are hassle-free. ExtReact gives you the most complete set of components for your React apps in a single, commercially supported, and professionally maintained package, including grids, tree grids, pivot grids, charts, calendars, data-driven design (D3) visualization components, animations, forms, exporting to Microsoft Excel, responsive props, dialogs, lists, list swipers, carousels, sophisticated advanced layouts (including nesting), progress bars, sliders (vertical or horizontal), toggles, radio buttons, sparklines, tabs, combo boxes, ripples, date picker, menus, collapsible panels, iOS themes, and taglines. ExtReact is a single-source for all these and more UI components.

Grid enables organizations to handle millions of records and provides built-in functionality such as sorting, grouping, and summary rows. Read the Grid tutorial to learn how to add the Grid component to your React app.
Pivot Grid enables developers to add powerful analytics functionality to React applications — allowing users to summarize and analyze data to make more informed decisions.
Exporter enables users to export data from the standard grid or Pivot Grid to a wide variety of common formats, including XLSX, XML, CSV, TSV, and HTML, for additional analysis and information sharing.
Layouts ensure the proper sizing and positioning of all components with the powerful and flexible layout system.
Charts let developers visually represent data with a broad range of dynamic and static charts, including line, bar, and pie charts. Browser variations are handled automatically, so the charts always display beautifully.
D3 enables developers to add sophisticated D3 visualizations including heatmaps, treemaps, and sunbursts to their applications. The D3 adapter enables developers to work with any example in the D3 library.
Forms and Form Validation make it easy for teams to add login, checkout, register, contact, rating forms and more to their web application. Form validation helps ensure the integrity of the data.
Calendar lets developers add a sophisticated calendar to their web applications so users can easily view and manage schedules and events within the application.
Buttons, Tabs, Menus and Panels enable organizations to add simple or sophisticated components to their applications quickly and easily.

You don’t have to get all your user interface components from ExtReact, though. You can use open source widgets and components.

However, with Sencha all our components are professionally maintained, new components are released regularly, and the quality (based on a huge amount of testing) is consistently high. ExtReact libraries are compatible with React itself, and as React keeps improving and growing, Sencha makes sure that ExtReact remains compatible. For example, the latest ExtReact 6.x supports the new React features, such as React 16.6, has a new ExtReactGen application generator, and includes new components such as Time Panel and Gauges. Babel 7 is supported, and we’ve included the new ExtReact Fiddle, too.

Having a single source of battle tested UI components means less time spent searching for some cute new widget from an open source developer whose next fancy might be something other than maintaining their own code. Professional enterprises and businesses of all sizes rely on ExtReact.

Different applications and developers prefer different data stores. A robust data package decouples the UI components from the data layer. The data package is protocol agnostic and can access data from any back-end source. Buffered rendering effciently handles massive data sets with ease.

Even though the creator of React, Jordan Walke, didn’t particularly care for MVC design patterns, ExtReact not only supports MVC but MVVM as well, and other design patterns are easy to create based on a programmer’s innate sense of language. Moreover, since ExtReact follows React language standards, the developer can write in JSX, or plain JavaScript. The developer can pick the syntax that they like.

Sencha Tools that Support ExtReact

Sencha Test is the most comprehensive unit and end-to-end testing solution for Ext JS apps, and includes support for end-to-end testing of ExtReact, React, and Angular apps. Sencha Test helps you improve application quality, accelerate time to market, and reduce testing time and costs.

Sencha Themer enables developers to uniquely theme components and give their React applications a distinct look.

ExtReact Generator helps kick start new ExtReact projects, offering best practices and tools to make developers more productive.

ExtReact Webpack Plugin works with Sencha CMD and the ExtReact Babel plugin to make it easy for developers to bundle and optimize the ExtReact components used in their applications.

Sencha Fiddle provides an easy way to try ExtReact code in a browser without downloading or installing anything.

ExtReact TypeScript definitions provide code completion functionality in several code editors including Visual Studio Code.

Sencha Private npm Registry offers immediate access to ExtReact packages and early prereleases. Best of all, your JavaScript dependencies are always available, instead of relying on a public npm repository that might go down.

Why Sencha?

A wise person once said, “Trust, but verify.” If you’re going to pick a development tool partner, you might as well pick the best, and we at Sencha welcome you to come find out why we have for over 10 years consistently delivered outstanding JavaScript development tools, frameworks, and libraries.

Comprehensive: ExtReact has a rich set of components, visualization and analytics. You don’t have to reinvent the wheel; you can deliver sophisticated, modern, state-of-the-art visualizations that customers and management will appreciate.

Ready-to-Use: Ready to use and built to work together.

Easy to Maintain: All our products have a common use model and coding style across pre integrated components. You won’t have to adapt to individual open source programmer coding style preferences

Cross-Platform: The right and rich user experience is delivered across the web, tablet, and phone platforms and is tested against all of the major web browsers, dramatically reducing your system testing time. The ability to embrace the mobile web is amazing!

Object-Oriented or Imperative: Code in the style that suits you.

Commercial Backing for Support, Services, and Training: When your application development is stuck, it is crucial to have someone to call. If you used open source, you can post a request to the community forum and potentially wait a variable amount of time for a response. With Sencha, you can just contact us and get the problem solved.

SUMMARY

ExtReact, an incredibly sophisticated professional UI component JavaScript library, has so many advantages that it just makes good business and technical sense to investigate what ExtReact can do for your data-intensive, visually rich applications.

For the CIO, CTO, and Director of Development, you get the knowledge that you’re using the very best to deliver business value to your company and your customers, improving the likelihood of schedule achievement and design virtuosity with industry-leading quality.

For developers and programmers, you get all of the advantages of JavaScript’s “write once, deploy everywhere” abilities. You also get source code, pretested and prequalified components to reduce development time and ease your software testing and quality assurance burden, extensive documentation, extensive examples with code, getting started videos, professional support, access to the open source world if you so desire, white papers, industry briefings, and more.

Learn more about ExtReact and download a free trial version:
https://www.sencha.com/products/extreact/evaluate