If you’re like me, one of the things you love most about Ext JS is the robust set of components that works together to help you build a great UI experience for your users. Add to that the great layout system in Ext JS, and dynamic features including theming, and you have the power to be very productive when creating compelling applications.
But the industry keeps changing, and since the release of Angular 2, some of you have been asked to look at Angular 2 as your base framework for HTML5 web application development.
If you’ve taken any time to look at Angular 2, one of the things that you’ll quickly realize is that it doesn’t come with any robust UI components, and you are left to decide how you’ll manage layout and theming within your application.
Wouldn’t it be nice, if you do decide to go with Angular 2, to have all of the robustness of the Ext JS components, along with all of the capabilities of the layout system, theming, and other features you’ve come to love about Ext JS?
Well, we have some exciting news for you! At SenchaCon in Las Vegas on November 7-9, we’ll be introducing the ability to use Ext JS components, layouts, and themes within an Angular 2 application, which we are currently calling the Ext JS Bridge to Angular 2 (also known as ‘The Bridge’).
In this article, I want to give you a sneak peek at this new functionality. Please note that I’m showing you syntax that may change as we complete The Bridge.
For those of you who’ve invested any time looking at Angular 2, you may know that you deliver functionality to your application by using ‘selector’ tags in html. Of course, you’re familiar with a <div> tag or a <span> tag, but imagine that whole components can be delivered with new tags – say a new <ext-grid> tag for an Ext JS grid component. Well, that’s exactly what you get with The Bridge.
Here is an example of a simple View in Angular 2 that uses the <ext-grid> selector with The Bridge.
This code will produce the following output – an Ext JS Grid.
You can see the <ext-grid> selector on lines 6-11. The example is using three properties, denoted in Angular 2 by the [ ] syntax. Each property (including columns, store, and config) is set in the class by variables on lines 15-31. There is also a select event, which uses the Angular 2 event syntax, the round brackets ( ). That select event is handled by the code on lines 33-35.
We’re also planning to provide capabilities to use the layout system of Ext JS from within your Angular 2 application.
Imagine being able to create your main page in Angular 2 with a set of selectors like this:
Another really great feature of The Bridge is that all of the Ext JS components that you use within an Angular 2 application can take advantage of a common Ext JS Theme – you can even use the new Sencha Themer product to create those themes.
To see more details and get a live look at the Ext JS Bridge for Angular 2, make sure you check out my session at SenchaCon. If you haven’t signed up for SenchaCon, head over to the SenchaCon site and register.
Looking forward to showing you more of the Ext JS Bridge for Angular 2 at SenchaCon. Also, I’ll be doing a pre-conference session ‘Tech-Talk: Ext JS and Angular 2’. It’s Monday afternoon from 1-5pm before the conference starts, and there’s no additional charge to attend. So, if you get in on Monday, please join me.
What's your reaction?
1
0
OK this is definitely cool but I still cannot understand why would you want to use Angular if you have already paid for ExtJS
I think thay offer it because Angular is trend.
But for sure, it needs to be freak that to use ExtJS with Angular because huge ExtJS size.
um Tom, seen how big an angular app gets with all the ui plugins? way bigger than even the ExtJS full library…
Yeah, well with Sencha cmd your ExtJS shrinks considerably (aka you don’t include the whole framework, just thebits you need.
Well, if you use Angular CLI with –prod –AoT flags your output will be not that big and will load pretty fast, Especially, if you break your code on proper modules,
danguba – I agree, if you have Ext JS, you have everything you need. But, there are organizations wanting to use Angular 2, and in those cases, you will still need a powerful set of components – thats why we are introducing the Ext JS Bridge for Angular 2
Technically, this is a great feature and complements the Angular world where powerful widgets are still lacking. However, from the long-term perspective, Sencha components shall follow Web Component syntax and semantics and an Angular programmer shall be able to use them with their own theme, services, and other Angular components. From the packaging perspective, a separate package shall be created with just the components and shall be priced differently for easier adoption. I am sure the Sencha team must have already thought about these and much more! Good luck!
Sencha finally sees potential of Angular. ‘The Bridge’ is awesome thing! If You have existing ExtJS application than You can easily start migrating it to Angular, just use ‘The Bridge’, When Angular 2 Team will create rest of components You will be able to erase ExtJS from Your project and replace everything with pure Angular 2.
Second option is as @Ajit wrote a separate package with components what would be easy to use with Angular2 without rest of code, so logic would be done by Angular 2 and UI by Sencha’s UI framework.
Where can i get more details about this? I have used extjs in past and the no other library/framework has this rich UI components, my new project is going to be on angular2 and luckily my org already using ext in other projects. I would really like to get more details on this..
Suresh, contact me (Marc) via email at [email protected] – thank you
Will this bridge only work with Angular 2 or can it work with Angular 1.5 also?
JB, at this point we are only planning for supporting Angular 2
Is there any guideline to using Ext JS with Angular 2? I am trying to use just the grid from it in an Angular 2 project. Do I just install Ext JS in the project and use it?
Sean, we are still developing our Angular product, but if you want to get an early start, please send me an email and we can discuss – i am at [email protected]
Will the Extjs packages be on npm?
Can we use only one module without downloading entire ExtjS library?
All of the packaging decisions have not been made yet. We’ll share more details when we get closer to the product release.
What would the ETA be for release? Would this support Angular 4?
A bridge to Angular is on our roadmap for the second half of 2017. We will provide more information about versions of Angular we’ll support as we get closer to release.
Hi Kristin,
some news regarding ExtNg :) Maybe some information that you can share with us. We are currently evaluating Angular 2 components frameworks like Kendo UI for Angular. We have already some Sencha products in use so it would be nice if we could also use a Sencha product for our Angular projects.
Hi Rocco,
We are working on our plans now would be happy to get you involved in trying out early versions of our product. We’ll keep you posted on our progress.
Hi Kristin,
some news? It would be nice if we could get an early version of ExtNg. Maybe you can share something with us? (via mail)
BR
Rocco
Hi Rocco,
We will absolutely contact you when we are ready to share an early version.
BR
Kristin
Does this also mean that ExtJS will finally get REST maturity level 3 support, meaning that using for example HAL+JSON doesn’t require to write a Proxy (and a corresponding base class for Models) which will overwrite all the default “URL building stuff” deep inside..?
See also https://www.sencha.com/forum/showthread.php?237508-Why-is-it-called-REST-proxy-if-it-isn-t-really-REST if you wonder what I’m talking about (and take note of the date…).
It’s especially a big issue when trying to implement a client for a correctly designed Spring Data REST backend. (So much for “no one ever does REST in its full meaning”.)
In particular, it’s important to consider URIs as identifiers (IDs!) of resource instances and DON’T make assumptions of the inner structure of an URI – that is “private data” of the server.
I actually did what the last poster in that thread suggested: implementing a custom Proxy and supplementing infrastructure. But it’s not easy to get a grip on all side effects, therefore I still discover issues with edge cases which I have to fix while proceeding.
So it would be much better if someone with a thorough understanding of the inner workings and intended design of the framework components would care to have this done right.
Thanks for bringing this up. I will log this as a feature request. Please use the Sencha Ext JS Feature Requests forum for any additional details or requests
https://www.sencha.com/forum/forumdisplay.php?4-Sencha-Ext-JS-Feature-Requests
Your article is very amazing. thanks for sharing blog.
when ExtAngular is coming!
Is this still under development? It has been nearly 2yrs since this article.
We are moving all our applications to angular. I would hate to abandon ExtJS
Thanks a lot for this as we have been looking for this.