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
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.
Angular
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-applicationgives you a good starting point. My first impression was quite positive, except TypeScript. I’d been working in typeless JavaScript for more than a decade so switching to strongly typed language as TypeScript is was neither an easy nor pleasant experience.
If you already used TypeScript or if you are coming from the world of C, C#, Java or similar then you’ll probably feel more at home but if you were or if you have pure JavaScript developers you have to count with a learning period just because of the language itself. Sometimes I had a feeling that I’m solving TypeScript ranting about types instead of the actual development.
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.
React
The initial application can be created with Create React App script by running:
npx create-react-app my-application
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.
The paradigm of React is different: “Everything is JavaScript”. This is implemented as JSX what is just a syntax extension to JavaScript so that it can be combined with HTML.
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.
So if you or your developers come from ExtJS or plain JavaScript world you can expect that you will have to learn JSX which is quite easy. Mastering React Hooks can be a bit more confusing and may require more time. Fortunately, if you do not see any benefits of hooks you can go with standard class/component approach with component lifetime hooks.
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
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
# or
vue ui
Vue UI is nice and you can use it to create and manage your Vue application.
Vue is most flexible as to the language used: you can use ES5 (“old” JavaScript), ES6 or TypeScript. This can be an advantage especially if you or your developers are coming from ES5 world because they don’t have to learn a new language at the very beginning. They will have to learn ES6 for sure but they can do it step-by-step.
What was a little bit confusing and what I had to get used to was the combination of template, script, and CSS in one file. So far I was used to separate HTML, javascript and CSS files but now I had them all in one. However, after the initial aversion, I realized that it is actually the very idea. It makes the code very modular and encapsulated and you can also make your project tree very clean. Instead of creating a directory for a component and save all related files in it, you just have one file with the complete code, template, and CSS of the component.
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.
Conclusion
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.
Happy coding!
- Ext, Angular, React, and Vue - 27. June 2019
- The Site Resurgence - 11. February 2018
- Configuring ViewModel Hierarchy - 19. June 2015
8 Responses
Hello Saki,
Over the years, we have build a farely large web application using Extjs-6.x, and we are now in transition to migrate to Vue. My question is can we use both ext-js and vue in same application so that we can migrate over time instead of going big bang? If so, what would be your suggestions?
Thanks
Well, there could be some weird solutions like running part of the app in Vue and another part in the iframe embedded in the Vue but better would be to go for ‘big bang’.
We could assist you a more if we would see the original app. If you’d be interested in such assistance, fill in please a https://learnfromsaki.com/services/
Also, you might want to test DevExtreme from DevExpress. They have pretty good integration with Angular, React and Vue.
Yeah, I’ll take a look for sure. Thank you for pointing it out.
To be fair the Angular route reuse strategy class is a small and really easy to implement class if you understand how Angular works. Here is a simple example: https://pastebin.com/NnEF7qSy
Yeah Hakimio,
it was easy in the end. I only needed to find out that the class is needed plus some time for debugging.
Anyway, thank you for the link.
Saki, thank you for the article! I’ve moved to Angular/React dev after a few years of ExtJS experience too, and my thoughts about comparing are same. Vue is very light and fast, it is really the fact!
Thank you very much for your comment Reon.