I want to Create a Framework , like Admin panel , which can rule almost all the aspects of what is shown on the frontend.

For an (most basic) example: If suppose the links which are to be shown in a navigation area is passed from the server, with the order and the url , etc.

The whole aim is to save the time on the tedious tasks. You can just start creating menus and start assigning pages to it. Give a url, actual files which are to be rendered (in case of static files.), in case of dynamic files, giving the file accordingly. And all this is fully server side manageable using different portlets, sort of things.

So basic Roadmap is having :

Areas like:

Header Area - Which can contain logos, links etc.

Navigation Area - Which can contains links and submenus.

Content Area - Now this is where the tricky part is that that it has zones like: left, center & right. It contains Order in which it has to be displayed. So, when someday we want to change the way the articles appear on the page, we can do so easily, without any deployments. Now these zones can have n number of internal elements, like the word cloud, or the advertisement area.

Footer Area: Again similar as Header Area.

Currently there is a preexisting custom framework, which uses XSLT files for pulling out data from the server side. And it has the above capabilities.

For example: If there's a grid it will be having a <table> tag embedded in the XSLT file. Now whatever might be the source of the data, we serialize this as XML and give it to the XSLT file and the html is derived from this and is appended to the layer in a page.

The problem with this approach is:

1. The XSLT conversion is occurring on the server side, so the server is responsible for getting the data, running XSLT transform, and append the html generated to the layer div. So, according to me, firstly this isn't the server's concern to do so. Secondly for larger applications this might be slower.
2. Debugging isn't possible for XSLT transformation. So, whenever we face problems with data its always a bit of a trial & error method.
3. Maintaining it is a bit of an eerie job i.e. styling changes, and other stuff.
4. Adding dynamic values. Like JavaScript can't actually be very easily used in this. Secondly, we can't use JQuery or any other libraries with this since this is all occurring on the server.

For now what I have thought about is using Templating - Javascript - JSON combination in place of XSLT, this will be offloaded to the client and the rendering will take place accordingly.

This could solve the above problems and also could add mobile support for the same.

Only problem which I could think of is that: It is much work and adding new portlets on the go needs to be looked into.

What could be the alternatives for this? What kind of problems are there with the JavaScript approach?

What are the different ways to implement the same?

Are there any existing frameworks for similar usage?