Up until now I have been blogging primarily on Extjs and maybe a few other tasks like Sql Server, SSIS, and Adobe forms. I’ve been using Extjs since the beginning of version 2 and have grown to really appreciate it for what it can do for a large project developed by a small Dev team. That said I’ve been cognizant of the fact that there are a lot of other frameworks taking off right now; but – and this is key – I am old enough to have seen a lot of ‘next big things’ start with a bang and slowly fade away. Would you believe that at one point the future of the internet was going to be Java applets? That said I could no longer ignore one of the more popular frameworks, Angular.js; and I have finished toying with the idea of rewriting one of the apps I work on using this framework and actually started the rewrite.
Full disclosure – I am only taking this path because the user interface is set to become more ‘dashboard / data display’ and less of what some would consider an ‘app’ – you know where people enter a lot of data and stuff like that. I don’t think you should try and recreate an Extjs app in angular unless you have to but that’s for another post. I also know it’s a fool’s errand to argue the merits of either as in the end they are mere tools so the focus here is to come at Angular with an Ext perspective and just point out the differences that I see and how I overcame them.
With that said here are the first things that I noticed when stepping into angular.
Setting up your application:
I am really used to using Sencha command and love the fact that it builds a standard application straw man if you will with just three short words (no not I love you) and a command line terminal. The closest thing I could find were the various ‘starter’ apps that exist on GitHub and a link in the Angular documentation so I took liberty with the ‘W’ in MVW (Model-View-Whatever) which angular tags itself as being and set up my structure to mirror what I would find in Extjs 5’s MVVM.
This has worked out well because our developers are used to seeing this structure. So I went with a partials folder and in this folder I placed subfolders that contained the view (.html file) the controller, and I created a factory named ‘DataFactory’ that handles the requests for the controller, if you are an Extjs 5 developer you could almost view this as the view model (https://docs.angularjs.org/guide/providers).
How can I achieve something like layout: border and a viewport?
One of the first things I did was look for something that would resemble a viewport with a west panel and a center panel – why? Simple, our users have been conditioned to the layouts found in Ext for over 6 years now so any drastic change would be met with resistance; I had to make small changes. I found what I was looking for with the ui-layout module which you can find here: https://github.com/angular-ui/ui-layout .
What about grids?
I love the Extjs grids and wanted to find something comparable in angular. The caveat here is that I rarely use all of the features like row locking, inline editing and so forth. I know all of that is possible but I just needed a paging grid with sortable columns, I would do a remote filter on the data but that is just a matter of connecting a function to a textbox above the grid. There are several to choose from but in the end I decided to use Lorenzo Fox’s Smart-Table module which can be found here: http://lorenzofox3.github.io/smart-table-website/
Right about now you should start seeing a pattern, mainly much of what you need to accomplish using angular requires third party plugins, or extensions if you will. That’s great for the flexibility – I love it. That’s not so great for standardization / documentation / and building something that will not become a nightmare to maintain. If you have a really keen eye you will have picked up something else, all of the plugins listed above assume that the user is building an application that will run on the latest browsers / there is often very little (read none) support for legacy browsers – so if you are in a large organization on a corporate site (read enterprise) then you probably want something like Extjs.
The next post in the list will take a look at how I handled a ‘store’ like function in Angular.js.