2

We have to implement multiple-document-interface web application. Each document has to live in a separate tab (but on the same page, it has to be SPA). There may be up to 50 opened tabs simultaneously and application should give ability to group tab panes by modules.

One of our options were to use AngularJS for this task. We like the way Angular handles partial views, structures application by using modules/controllers and performs dependency injection.

After digging in for couple of days, we've figured out that there may be some problems with the way bindings work: there is no easy way to prevent angular from watching tabs, which contents are not currently displayed to the user. You can imagine situation when user will have around 20 opened tabs and this whole thing becomes slow as hell! Also our application is very grid-heavy, so for grids I think we should avoid ng bindings at all.

We were thinking about ng-view and the way it recreates DOM on each activation ... this looks overkill and will force us to put all UI state into the view-models, even for scroll-bars :)

Can you suggest some possible ways to improve performance with Angular and MDI? Maybe we should even consider using some other ui-framework/set of tools to achieve same results?

What's important:

  • modularity (AMD)
  • dependency injection
  • declarative bindings (we do like how angular and knockout solved those problems)
  • MVVM/MVC
  • ability to create multiple instances of the same controller (open multiple "details" tabs for each specific item from the grid, for example)
IlliakaillI
  • 1,510
  • 13
  • 25

2 Answers2

1

AngularJS can indeed be heavy on a big application, but only when you make a change inside the $scope. The bigger part of this time is spent looking for modification by dirty checking.

If you keep an AngularJS application inside a non active tab, a dirty checking can only happen after a outside event (like a WebSocket message). You can optimize your application to remove those listener when the tab is not focused.

If you follow the best practice of AngularJS, performance issues with a lot of pages opened should not be a problem. The bigger performance problem of AngularJS come with very big amount of data inside its $scope, but there is a lot of solutions proposed all over the internet.

Community
  • 1
  • 1
Guillaume Besson
  • 572
  • 2
  • 8
  • Thank you for a quick response, to clarify, by saying 'tab' I meant tabs that are rendered inside same html document, so all those tabs are living inside one SPA – IlliakaillI May 28 '14 at 21:25
  • 1
    Ok, for this usage AngularJS could be slow, especially if you have a very large dataset inside your $scope. But you can separate each one of your tab and only do the dirty checking inside the active one. You should read this answer that describe how to do this : http://stackoverflow.com/a/16338397/3680412. – Guillaume Besson May 28 '14 at 21:32
1

modularity - Angular has it's own modularity rules/patterns which are good if you want to conform to them, but if you want to make something modular in a different way, eg... allow forms to be self contained so that multiple instances of them can dynamically be opened concurrently it's quite difficult

dependency injection - Angular allows you to write code that you can inject other into, but you cannot inject Angular, it seems an oversight that you cannot test your code isolated from Angulars?

declarative bindings - yep, the way Angular binds literals within HTML with the JS code makes it really hard to create MDIs with multiple concurrent instances of a single form. You really need to dynamically create your form instances with their own identifiers (in addition to Angulars) then scope your own identifiers within the bounds of a shared set of JS files (which is what you want), however then Angular's binding will get in the way of each instance if you continue to use Angular's bindings - alternatively you can try modify the HTML dynamically get Angular to refresh it's bindings.

Basically anything to do with MDI is harder than it needs to be with Angular and it's worth looking at alternatives for such projects before hand.

Julian Cassin
  • 26
  • 1