I had an opportunity to work also with non-Ext frameworks while I was integrating wonderful Bryntum Scheduler and Gantt to Angular, React and while doing so I had to learn about the other frameworks. I already have a lot of experiences with ExtJS and I have written many large production-grade applications in this framework. Naturally, I was quite curious how these other frameworks compare to each other and Ext and what I’m going to like and dislike about them.
However, don’t take this post as the comprehensive comparison of Angular, React and Vue. I only want so share with you my personal opinions and viewpoints that might add up to your knowledge so that you will have more data and can select the framework suitable for your purpose yourself. Therefore, I’m not going to say which of the frameworks is best, because all are best in some respects, and I’m not going to say which one should you use.
Take it rather as an account of an Ext expert learning other frameworks by practically digging into them and creating sensible yet simple applications in each of them.
It is very likely that my opinions and conclusions are influenced by my decade long work with Ext.
ExtJS is different from the remaining framework in several aspects
- it is also a component library
- it tries to hide HTML from users
- it contains its own build tools
Historically, ExtJS started as a component library with the aim of creating beautiful widgets for web developers and later it added other parts: data package, implementation of MVC and MVVM architectures and generation and build tool Sencha Cmd.
Therefore, if you want to build a big, business-grade application you most likely won’t need any third party libraries or packages so we’re not likely to suffer from naming conflicts, incompatibilities and different paradigms in a hodgepodge of downloaded and mixed pieces of code.
HTML is not hidden completely in ExtJS but it is exposed as XTemplate that allows us to customize the look of the components. However, if the application look is too different from the standard Ext look, we may run into limitations of this approach.
I have developed a very big application in Ext 6.x with the requirements of huge customization of the grid look. Grid output faintly resembles Facebook, it has threaded tree-like feature and it has many in-cell UI components such as icons, menus, buttons and similar.
The HTML hiding approach has shown to be very limiting in this case as we had to create the custom look in templates with a lot of conditionals, event handlers on HTML elements and binding Ext components to the markup. A true Ext developer is not used to this kind of work and doesn’t like it (at least I didn’t) because he has to leave the known and comfortable realm of Ext components and has to sail into dangerous waters of plain HTML/CSS.
My main task was to build an Angular application that would render Bryntum Scheduler or Gantt and to provide an interface to it: changes in the application should be reflected and events to be listened to and handled.
Angular separates HTML templates from TypeScript code and (S)CSS files with styling. There is no attempt to hide or prefer any of them and you need to provide all the application to work.
Angular comes with application generator so running
ng new my-application
On the other hand, if you have a big team of various developers, some inexperienced, you may benefit from TypeScript forcing them to abide by some rules and write the higher quality code.
Generally, Angular is robust and wants to be suitable for big teams and big applications at the cost of more investments into the development time especially at the beginning. For example, I needed a non-destroying routing where I could navigate off the page without destroying its content and it required development of a complete class for route reusing strategy. It took me several hours to find out, develop and debug the class. The same task in Vue took 5 minutes with <keep-alive></keep-alive> pseudo-tags.
I haven’t yet tested Ext-Angular stuff beyond creating an example app with
ext-angular-gen. I’ll probably test how to integrate Ext components into an existing Angular application.
The initial application can be created with Create React App script by running:
npx create-react-app my-application<br>
The created application is really minimal with one simple functional component that returns static HTML with spinning React logo.
React is a bit more lightweight mainly in that that it by default does not use TypeScript. However, if you want TypeScript it is quite easy to integrate it to the React application. TypeScript is mandatory in Angular and optional in React.
React has also recently introduced so-called React Hooks that allow the use of state and other React features without writing a class. The official React Hooks site says that complex components with their lifecycle are difficult to understand what is the basic motivation for introducing the hooks.
I have tried both approaches and both of them work and coming from class-based Ext world I’m better familiar with “complex components” and I find hooks more confusing than the standard class/instance approach.
Generally, React is simpler than Angular and works. So it’s a valid choice too. It may be some benefit if you also have a React Native application.
Similar to Angular, I’ll try to integrate Ext React components to an existing application. They undoubtedly work fine within the application created with
ext-react-gen but I want to know how they fit into a “pure” React app.
Vue has become popular recently and now I know why. It is could be said to be the simplest of these three, yet powerful enough to write a big app. It is based on many very clever ideas and I must admit that personally I like it most of the three.
You can create an initial application with
vue create my-application<br># or <br>vue ui
Vue UI is nice and you can use it to create and manage your Vue application.
Similarly to Angular and React, Vue does not come with a component library so you must either code your own or, for all but very small projects, use some third party component library.
Unfortunately, Ext does not provide components for Vue so there is no official way of integrating Ext into Vue. I will try to find a way how to hack it and try to put React components to Vue.
If Sencha would provide Ext components in the web-component format then it would be very easy to put them in any of these frameworks. So we hope they think the same way and that they’ll make web-components available soon.
So which one to use? It depends. If you have Ext developers and the application is going to be large, with not too heavily customized look, I’d probably go for Ext modern. The availability of developers and their background will probably be the main factor in deciding which framework is most suitable and effective.
Based on my experience with the above frameworks, I have also updated our services. You can read more about them here.