htmlbackbone.jsarchitecturesingle-page-applicationaura.js

Html Markup Abstraction and Consistency in SPAs


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?


Solution

  • 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.