At the time of its release, ExtJS was seen by the software development community as an incredible innovation in the world of JavaScript frontend frameworks. However, over time ExtJS consistently fell short and shook the fleeing community it had once established. Result of a complicated complex architecture, performance issues, and several licensing controversies, several other frameworks had been introduced into a space where ExtJS, once a popular framework for building enterprise software, had fallen short. With a disappearing community, meager documentation, poor performance and significant licensing cost, ExtJS is quickly becoming a deprecated technology.
One such framework, ReactJS, entered into the space to compete against ExtJS and other big players in the industry; a promising framework that was lightning fast, robust and easy to maintain. Over the years since its release, it has gained significant traction and has brought together a community of over a million developers around the world.
Today, ReactJS is a leading frontend framework for building single page web applications. It is the culmination of years of careful design and optimization. Unlike ExtJS where widgets are described with dense JSON, React addresses the need for the inherent coupling of UI logic with render logic in a component. React also addresses the topic of performance by using a virtual DOM to reconcile the DOM only on changes in state through incremental rendering. The framework is also available to the public through a permissive MIT license, making the framework a great option for open and closed source projects.
However, ReactJS does not ship with pre-built components like ExtJS. Although there exists thousands of pre-built React components that are free to use, this may not be an option where the drawbacks to using open source software might outweigh the cost of building components from scratch, particularly in enterprise software solutions or large product teams.
Over the years, the internet has evolved significantly. User experience has improved tremendously, and new technologies emerge every year that provide developers the ability to build beautiful, robust, performant and secure web services. New web frameworks have been born, and some have reached end-of-life. The rather short lifespan of these frameworks prove to be a challenging issue for developers who rely on the stale and disappearing support and documentation. Furthermore, keeping project source up-to-date with the trend in technologies can be a significant cost to the project when migrating old source to a new framework may be either difficult or not feasible under restrictive projet resources.
Enterprise application software differs from public web services in many ways. Typically, enterprise software is built to fulfill complex business objectives and provide a tool to be used by a smaller and more technical demographic of users. Siemens Canada, for instance, provides a solution known as DEMS, or Decentralized Energy Management System, that is used by power operators to manage their energy resources through advanced metering infrastructure (AMI) such as smart meters, smart thermostats, batteries, electric vehicles, and solar collectors. DEMS is also used by third parties to sell and manage resources on the grid.
On the other hand, services such as Facebook, Google and GitHub are designed with friendly interfaces as a priority. Users will simply avoid using a service with a poor UI, while enterprise users are often required to use enterprise software due to high licensing costs, specialized functionality, and perhaps no better software solutions exists.
With that said, the return on investment of placing user experience (UX) as a top priority in enterprise software is often less than in free public services. In the following sections, we will explore the benefits, drawbacks and implications of migrating from a legacy frontend framework to a more modern alternative, examined through the context of enterprise software.
ExtJS is a JavaScript framework built and maintained by Sencha Inc. The framework was first released in April of 2007 as as an extension to Yahoo!’s YUI-ext framework (Garcia, 2017), and has since undergone several major releases. Today, the framework is on it’s sixth major version, with the most recent stable release becoming available in June of 2018.
The decade old framework was formed during a time where enterprise software was mostly dominated by Adobe (Shockwave) Flash and various other JavaScript frameworks. At the time, Chrome did not exist, and Internet Explorer was Firefox were the most popular web browsers. Single page applications, built on frameworks that relied heavily on Ajax, were growing in popularity (Garcia, 2017).
ExtJS has experienced several controversies over the years that have affected its growth of the community around the framework. At the time of its release, ExtJS 1.0 was gaining significant popularity in the software development community for building new single page web applications. The second version had a mixed reception when they introduced XTypes, a shorthand way to identify particular components (Garcia, 2017). This change allowed developers to build entire applications using dense JSON which quickly became very difficult to maintain in large applications, such as enterprise software.
Around this time, JavaScript design patterns, especially around this framework, were scarce and were still being developed. As a result, applications built during this time with this framework became increasingly difficult to build and maintain.
The fourth version of ExtJS, among one of their most ambitious releases, was well received in the community (Garcia, 2017). Several new features and tools were introduced, and much of the framework was reworked for easier development. However, ExtJS 4.0 experienced significant performance issues that further divided the community. Around the same time, Google released a promising new framework called Angular JS, and much of the Sencha community left for these new emerging technologies.
A few years later in May of 2013, ReactJS was released by Facebook during a period where Sencha underwent pricing changes that saw their community shrink even further. Two years later, React Native added to the React ecosystem, which secure a significant portion of the software development community.
ExtJS and ReactJS are very different technologies. In this and the following sections, we will aim to outline these differences to provide some insight into the motivation that led developers to prefer the React ecosystem over the outdated ExtJS framework, while making an effort to outline particular anti-patterns that caused ExtJS applications to quickly become unwieldy to maintain.
ExtJS is a pure JavaScript framework, meaning that the entire application is written in plain JavaScript, unlike React where the application is (typically) transpiled into JavaScript from JSX (more on this later). Although it is possible to use custom HTML components, this is rarely done in practice.
Applications written under the framework typically follow a Model-View-Controller (MVC) or Model-View-ViewModel (MVVM) architecture. The main difference between MVC and MVVM architectures is that the ViewModel coordinates changes between the model’s data and the view’s presentation of that data. As a result, the model and the framework perform the bulk of the work, effectively minimizing the logic that directly manipulates the view (Intro to App Architecture, 2018).
The framework is driven by configurable components known as widgets. This includes components such as labels, text fields, buttons, tables, containers, spacing, charts, and many others. Developers seldom create widgets from scratch, and instead configure existing ones provided to suit their needs. Because of this, however, the framework can be quite restrictive when specific components are needed that aren’t provided by the framework. Furthermore, simple components sometimes require many lines of code or markup to create when a plain HTML equivalent would require very few lines of markup.
While working at Siemens, I needed to display a waterfall chart but this component was not provided by ExtJS, and building a waterfall widget from scratch would not be feasible. In the end, I was restricted to extending the bar chart widget to effectively mimic a waterfall chart. However, this solution ended up being too complex, impossible to maintain, and was buggy and error prone.
ExtJS has long suffered from significant performance issues. Among the releases of the framework, the fourth major version 4.0.1 saw particularly poor performance. One user on the Sencha ExtJS forum noted that a grid with 10 records saw an increase in render time between 200% and 1000%. At Siemens I had encountered this issue a number of times, especially around the grids and stores. Customers of DEMS had noted excessive render times around grids with relatively few records, but a fix to these performance issues would involve upgrading the project to the next major or minor version of the framework, which would have been infeasible because a full regression of the product would have been necessary.
This issue largely stems from the fact that components are rendered by manipulating the document object model (DOM) directly. This has several inherent drawbacks. DOM manipulation is a particularly costly operation, especially with complex enterprise software. As the application grows, the DOM becomes increasingly dense, and this leads to a increase the render time. Furthermore, ExtJS is known for producing notoriously complex, highly nested, HTML which further increases the render time and the difficulty of debugging.
ExtJS is currently licensed under a modified GNU General Public License (GPLv3). This commercial license requires the payment of a fee for each designated developer of the application. Free and open source applications are free to use ExtJS without fee, granted that the source code is made freely available. ReactJS, on the other hand, is licensed under the MIT License, which permits free commercial use, modification, distribution and private use of the framework.
When the framework was first released, it was licensed under a LGPL license, which is a compromise between more permissive licenses such as BSD or MIT, but not as restrictive as GPL. The second version of the framework marked the beginning of the licensing issues, where they released it with the GPL license. Many developers in the community were upset by this change, especially those working on open source projects. Sencha then changed the pricing model with the release of version 5.0 of the framework, and many developers using the framework were forced to migrate due to the increased cost to use the framework.
One of the most displeasing aspects of the ExtJS framework is their lack of adequate documentation and support. The community around the framework was once very large, and Sencha brought the community together by hosting a public forum that allowed developers to get answers to their questions and solve problems. However, the community has since shrunk considerably, and as a result the forum rarely sees activity. Moreover, community forums are rather inefficient sources of information for developers because the correct or most relevant answer to a simple problem may be found several pages into the forum thread. The Stack Exchange platform is arguably a far more useful tool for developers.
Secondly, where ExtJS has undergone several major releases that vastly changed how developers utilized the framework, it became a challenge finding relevant information through their documentation. Google search queries rarely find the documentation for the version of the framework being used, and their documentation platform (coincidentally built using ExtJS) was slow, unintuitive, and dated (broken links were especially common in the documentation for ExtJS 4.2).
ReactJS is an open source JavaScript framework developed and maintained by Facebook. Like ExtJS, React can be used to build robust and complex single-page web applications. The framework was first released in 2013, and the most recent stable release, version 16.6.3, was released less than a week ago.
Around the time that the framework was first released, developers at Facebook were having difficulty with code maintenance (Papp, 2018). ReactJS was built to in response to this difficulty, promising a more efficient development process. Jordan Walke, a developer at Facebook, built an early prototype of ReactJS called FaxJS which was inspired by XHP, an augmentation of PHP that allowed embedded HTML syntax to create custom reusable HTML components (Laverdet, 2010). In April of 2012, Instagram was acquired by Facebook, and the developers of Instagram wanted to adopt the new framework. As a result, FaxJS was decoupled from Facebook and made open source under the new name, ReactJS (Papp, 2018).
One of the biggest issues with ExtJS that React addresses is the inherent need to couple UI logic with rendering markup. Where ExtJS looks like large JSON objects that tell the browser what to render, React allows developers to use plain HTML directly in the source for each component. React uses JSX (JavaScript eXtension) which is an extension to the JavaScript language, allowing HTML syntax in the render logic. Although using JSX is optional and developers can chose to write React applications in plain JavaScript, many developers opt to use JSX because it is similar to a templating language, such as Twig or Haml, but with the full power of JavaScript. The JSX code is then transpiled into plain JavaScript using Babel, a JavaScript compile toolchain.
The following snippet demonstrates the simplicity of using JSX, and the equivalent in plain JavaScript:
class App extends React.Component {
render() {
const user = {name: ‘bob’, email: ‘[email protected]’, role: ‘user’};
return (
<div>
<p>{user.name}</p>
<p>{user.email}</p>
<p>{user.role}</p>
</div>
);
}
}
class App extends React.Component {
render() {
const user = {name: ‘bob’, email: ‘[email protected]’, role: ‘user’};
const element = React.createElement(
‘div’,
null,
React.createElement(‘p’, null, {user.name}),
React.createElement(‘p’, null, {user.email}),
React.createElement(‘p’, null, {user.role})
);
return element;
}
}
ReactJS works by manipulating the DOM, swapping components in and out when necessary to create a SPA (single page application). It is understood that manipulating the DOM is a particularly expensive operation, so the framework was optimized to reduce the number of costly DOM operations necessary when rendering or swapping components in the page. React uses a clever programming pattern called Virtual DOM, or VDOM, where a lightweight JavaScript representation of the application DOM is stored in memory and reconciled with the real DOM only when the state changes (Virtual DOM and Internals, n.d.). This effectively abstracts management and modification of individual elements, attributes, events or other DOM objects.
Browser rendering engines are quite complex and each modification to the DOM can involve a number of steps. For instance, when modifying the innerHTML of an element, the browser will perform the following steps:
- Parse the HTML
- Remove the child element
- Update the DOM with the new child HTML
- Re-calculate the CSS for the parent and child
- Update the layout
- Traverse the render tree and paint
So, using a VDOM is a great way to reduce the number of individual operations needed to render a new component, because the component is swapped in once, rather than appended to the dom in a piecewise fashion (Mishra, 2017). Furthermore, React uses the Fiber Architecture to store internal objects called fibers in the VDOM, to store additional information about the component tree to improve performance further by utilizing incremental rendering (Clark, 2016).
Where ExtJS provides hundreds of pre-built components out of the box, ReactJS does not. This may be seen as a good or bad thing depending on the use case for the framework. Building individual components from scratch will help to distinguish the application from other applications that use the same framework, and allow the opportunity to build the individual components as they were designed to suit the specific needs of the application. Many developers in the ExtJS community noted that the look and feel of applications built using ExtJS felt the same, reminiscent of the early days of SPA’s with a more colourful Windows XP look (The look and feel of ExtJS, 2014). Using ReactJS would solve this issue.
However, this will require additional development hours to build each component, where using the provided pre-built components would suit the need. Although there exists thousands of pre-built React components that are free to use, this may not be an option where the drawbacks to using open source software might outweigh the cost of building components from scratch, particularly in enterprise software solutions or large product teams.
One particular area that ReactJS outperforms ExtJS is around the documentation and community. Although the framework is newer than ExtJS, the quality of the documentation is superb. It covers a wide range of topics, spanning from the very basics to the more advanced concepts. Navigating around the documentation is straightforward, and where the codebase is open source and hosted on GitHub, the documentation is versioned with the source which makes it easy to find documentation for older versions of the framework.
ReactJS is also backed by millions of developers and thousands of companies around the world, forming a strong and active community that make it easy to get help (Where To Get Support, n.d.). Stack Overflow is a popular resource for developers to get assistance with ReactJS related issues with over a hundred thousand questions and answers. Moreover, nearly a hundred thousand developers are active in the Reddit r/reactjs community, which is another great resource to developers.
Although ReactJS is a popular choice for developers, countless other JavaScript frameworks exist and are employed throughout the industry. Each framework will have unique characteristics, and picking the right one will depend on the specific requirements of the application, licensing, and to a certain degree, developer preference and experience.
Vue.js has recently been growing in popularity as another alternative to React. It is very similar to React in many ways, but splits up the logic into three parts in the same file: the template, UI logic, and style. Vue templates use HTML-based template syntax for defining the structure of components. The framework also allows components to have encapsulated component style. This prevents style from being inherited from other components in the application. The framework is licensed under a MIT license.
A Vue file will have the following structure:
<template>
<!-- Template Structure -->
</template>
<script>
//component logic
</script>
<style lang="sass">
/* Component Style */
</style>
AngularJS is a JavaScript-based framework built and maintained by Google and a community of developers and companies. The framework aims to decouple the manipulation of the DOM from the application logic and provide the structure (MVW) to help developers build the application. Angular allows the developer to extend the HTML syntax by creating directives which represent specific components in their application. The framework is licensed under a MIT license.
ExtJS was and may still be a fantastic option for developing enterprise software. This naturally depends on the type of application being built, the requirements and the restrictions placed on the project. Ultimately, a frontend application build with ExtJS will be difficult to maintain without defining explicit design patterns around use of the framework to ensure the project is structured in a way that is conducive to integrating new features and adapting the application to meet the needs of the client.
With a disappearing community, meager documentation, poor performance and significant licensing cost, ExtJS is quickly becoming a deprecated technology. Understandably, it is no easy feat to migrate an entire application to a new framework. In fact, this may not be feasible at all under the restrictive resources of a software project. However, switching to ReactJS or another modern framework brings a number of benefits that will ultimately bring a better user experience to the product.
JavaScript frameworks come and go, and React may not be around forever. Like ExtJS, it could be replaced by the next shiny framework. React, being an open source project, is under continuous support by developers at Facebook and the people and companies using it. It is not bound to a single company, like ExtJS with Sencha Inc. If Sencha disappears, so does the framework. If Facebook disappears, React is here to stay.
Introducing JSX – React. (n.d.). Retrieved from https://reactjs.org/docs/introducing-jsx.html#jsx-represents-objects
Dawson, C. (2014, July 25). JavaScript's History and How it Led To ReactJS. Retrieved November 11, 2018, from https://thenewstack.io/javascripts-history-and-how-it-led-to-reactjs/
Intro to App Architecture | Ext JS 6.2.0. (n.d.). Retrieved from https://docs.sencha.com/extjs/6.2.0/guides/application_architecture/application_architecture.html
S. (2010, August 26). ExtJs - best among current Javascript RIA frameworks? Retrieved from http://techproscons.blogspot.com/2010/08/ext-js-cross-browser-rich-internet.html
Garcia, J. (2017, September 25). The rise and fall of Ext JS. Retrieved from https://hackernoon.com/the-rise-and-fall-of-ext-js-c9d727131991
[DEFER] ExtJs 4 - SLOW AS HELL. (2011, May 31). Retrieved from https://www.sencha.com/forum/showthread.php?135301-ExtJs-4-SLOW-AS-HELL
Papp, A. (2018, July 20). The History of React.js on a Timeline. Retrieved from https://blog.risingstack.com/the-history-of-react-js-on-a-timeline/
Laverdet, M. (2010, February 9). XHP: A New Way to Write PHP. Retrieved from https://www.facebook.com/notes/facebook-engineering/xhp-a-new-way-to-write-php/294003943919/
Virtual DOM and Internals – React. (n.d.). Retrieved from https://reactjs.org/docs/faq-internals.html
Clark, A. (2016, October 19). React Fiber Architecture. Retrieved from https://github.com/acdlite/react-fiber-architecture
Mishra, R. (2017, May 07). Virtual DOM in ReactJS – Hacker Noon. Retrieved from https://hackernoon.com/virtual-dom-in-reactjs-43a3fdb1d130
The look and feel of ExtJS. (2014, April 11). Retrieved from https://www.sencha.com/forum/showthread.php?284179-The-look-and-feel-of-ExtJS
Where To Get Support. (n.d.). Retrieved from https://reactjs.org/community/support.html