4

I'm currently evaluating the use of Backbone.js along with Aura.js for building an enterprise scale SPA.

I have a nice Javascript architecture mapped out that provides abstraction, consistency, flexibility and no dependencies on any base libraries.

As I see it, in using any MV* pattern (and in particular Backbone), markup generation could be scattered throughout views via a combination of direct dom manipulation and external html templates.

I would like to apply the same principles to the html markup in my views as I have with my Javascript architecture.

  1. Abstraction - Ideally I would like to provide developers with a simplified API for producing markup, potentially shielding them away from the css classes/markup structure being used.

  2. Consistency - I would like to promote and control consistency in the markup produced within a team of developers.

  3. Flexibility - I would like to avoid having to find and completely rewrite all instances of certain markup if there comes a need to change either the css classes/markup structure being used. Ideally I'd like any changes to be made in one place, that will propagate throughout all uses within the system.

As a practical example of how this can be achieved server-side, we currently use a suite of custom HtmlHelpers within ASP.NET MVC (similar in design to KendoUI). These helpers provide a nice fluent API for developers to use and centralise control of the markup that is generated.

However as we're moving towards client-side UI generation I'm not sure how to gain the same benefits that are available in server-side markup generation.

I appreciate templates can provide re-usable widgets throughout the UI, however that does not completely address the issues outlined above, which apply when creating those templates and the layout to contain them.

So to summarise my question...

What practices can be employed to achieve control and consistency in markup generation within a team when developing enterprise scale SPAs?

jmac
  • 7,078
  • 2
  • 29
  • 57
Brett Postin
  • 11,215
  • 10
  • 60
  • 95

1 Answers1

2

Since your question is limited to Backbone.js and Aura, I'm not sure this qualifies as an answer, but I would definitely check 3 things

  1. AngularJS and AngularUI - the concept of directives, resembles the notion of Web Components (a work in progress W3C standard for web controls)

  2. If you like typed coding, and likes to live on the bleeding edge, check Dart Web UI it also uses a pretty much similar concept

  3. If you have to stay in Backbone land, then I would check Backbone UI of course

I believe the first 2 have a better chance of answering your 3 requirements.

Eran Medan
  • 44,555
  • 61
  • 184
  • 276
  • Thanks Eran. I'm still only evaluating the options so I'm not strictly tied to Backbone/Aura. I've looked into Dart but as you say it's too bleeding edge for us at the moment. AngularJS looks a viable alternative and I'm looking into it now so thanks for that. My only concern is that it seems there is no alternative but to jump into bed with something like AngularJS. Is trying to abstract the framework a really bad idea? I guess I'm just really concerned about future change. – Brett Postin Apr 04 '13 at 13:08
  • I would bet on AngularJS only because it's strongly tries to stay around future standards (such as Web Components) and for me it somewhat resembles .NET components and JSP/JSF tag libraries (only much better). A great free resource on AngularJS is http://egghead.io/ One more thing worth considering, is dojo framework, it might not be the one with the most hype, but it's been here for a long time and it has a very nicely structured widget system. If you are developing for inbound enterprise clients, Sencha (ExtJS) is also worth looking at, although it has mixed reviews in terms of performance – Eran Medan Apr 04 '13 at 14:49
  • After researching AngularJS today I agree it seems like our best bet. I can see how the directives would provide the desired abstraction, consistency and flexibility that I'm looking for by providing a component based architecture. One final question, is it possible to override existing tags? e.g. Could I create a button directive for – Brett Postin Apr 04 '13 at 16:39
  • @BrettPostin that is a very good question, don't know the answer though – Eran Medan Apr 04 '13 at 17:38
  • No problem i'll ask on the Angular groups as it's quite specific. Thanks for your advice. – Brett Postin Apr 04 '13 at 17:41
  • 1
    Just for reference, it is possible to replace/manipulate existing tags. See example [here](http://jsfiddle.net/p5SXd/1/). – Brett Postin Apr 05 '13 at 09:49