title: Component based frontend UI design
body: <p>We're planning a front end application where you can continuously add/remove UI components in the stage. You can configure them in place and finally can publish the stage (web page).</p>
  <ol>
  <li><p>We’ve an inventory of components. The components are categorized. For example: headers, sidebars. In the inventory they will show a preview (may be an image) of the available components in that category.</p>
  </li>
  <li><p>An item can be added to the stage (traditionally a simple web page) from the inventory.  The stages are related to inventory categories. For example, in the stage, there is one “headers containers” where you can add component only for headers inventory.</p>
  <p>Each category may have own rule. For example, You can’t add more than one component in the in “headers containers” (which is in the stage/page) from headers inventory category. However, you can add as many item as you want in the “sidebar containers”.
  In the same way, each component may have own rules. Each component may render differently and may have different configuration option. For example, you add an header component from “headers inventory” which has logo, background image. But another may not have background image. Unless a component has a feature (e.g. background image), it won’t be available in the configuration panel.</p>
  </li>
  <li><p>All of the above components will always work except previewing in inventory. That means, as soon as they’re added to stage, they’re live element, they should work as they should with default settings (unless configured). They will communicate in the backend services to get/save data.</p>
  </li>
  <li><p>Persisting data: We also want to persists data among the switching of the components (of same type). For example, if you add one header component added on the stage which you configured to have own your logo, switching to another header component (which also has support for logo) should keep the old selected logo.</p>
  </li>
  </ol>
  <p>I am also thinking it will be very good if we can everything a component. For example, logo is a component, background image is a component. Each of them should work independently, with own configurator (file upload button for logo component), validation (check file types for logo component) etc.. The previously mentioned each header component will be container of several components which can hold any number of components and can work as bridge among those components (like merging all the configuration in the same interface rather than individually).</p>
  <p>My current thoughts are:</p>
  <ol>
  <li>Backbone.js</li>
  <li>jQuery UI Widget Factory</li>
  </ol>
  <p>But both will require lots of fundamental job at our end. Is there any framework/library that already solved most or some of the problems we’re trying to solve. I am not sure whether Angular.js directive based solution will be good here too. Any suggestion towards that is highly appreciated</p>