AgileSitesNG sneak preview

So, what are we doing with AgileSitesNG?

A few things, actually:

• A new “proto”  site, pretty full featured for responsive and mobile development.
• An development tool chain with on-the-fly compilation of javascript and java sources, including hot deploy of jar and live reload of javascripts
• A revamped architecture for AgileSites leveraging AngularJS features 

What is in the Proto site

Now, instead of a simple demo we are introducing a complete mobile responsive site based on BootStrap and AngularJS.

Here is a snapshot of what you can see with the  Proto site: 

The site is actually entirely content managed with Sites:

The development chain

Developers can work using their favorite IDE (for example IntelliJ IDEA in the snapshot) and they can code using directly Javascript, HTML and CSS. 

Actually the system integrates preprocessing of less, coffescript and other javascript related technologies, concatenation, minification and compression:

The build system is totally integrated and interactive: editing a “less" or “coffescript" file will trigger compilation to javascript, then the optimization  of the web assets, producing the best output even while the development. A nice addition is Live Reload for Javascript. Also the usual AgileSites Hot Deploy still works. 

Basically developers can now see instaneously the result of changes to javascript, less files, html and java code without even having to hit the reload button in the browser.

But actually there is more, since even the content model is now automatically generated.

The AgileSitesNG Architecture for Angular

Traditional architecture for javascript  works using a page-based approach, with an MVC server based. Angular however is a client-based MVC so the traditional approach does not work anymore. Instead the server need to provide 3 things:

• Page Snippets, invoked by Angular when needed
• JSon services that fits the Page Snippets
• A Navigation that can be configured by the CMS

So, the way AgileSitesNG works is the following:

Developer write their code using html code snippets, like those:

The snippets are automatically imported but what is most important is that after the import:

• Content Model required to render the website is automatically generated from the template

• JSON services to render those templates are also automatically generated from the Content Model

• Navigation for the client side application (the routing rules) are generated by Sites site plan.

In the end, developers only need to think to code their client side. The backed support for content managing a site built  Angular is generated by the AgileSitesNG framework.

Posted by msciab