Sulu-CMS-Logo-2
Sulu Team

Front End Matters

In Sulu the Model-View-Controller architecture is not only used in the back-end of the system, but also in the front-end, the client side, of our framework.

Various JavaScript-frameworks enable or at least make it easier to develop in an object-oriented way and build an application within a Model-View-Controller architecture in the front end. Such frameworks have become more and more important and also more often used by the community lately, as the Model-View-Controller architecture comes with great advantages not only in the back-end.

In Sulu we are using AuraJS together with BackboneJS (of course also jQuery for DOM-manipulations). AuraJS is a lightweight framework helping us to divide our JavaScript-code up into classes, in AuraJS so called components. Those components are encapsulated separately from everything else and only communicate through events.

So with Aura we are building on our code in an object-oriented way, with Backbone we arrange the components within a Model-View-Controller architecture. So Backbone takes over the part of matching a specific URI to a controller, which then starts the view and handles the communication between the view and the backend of Sulu. The communication between the view and the controller happens via events as predetermined by AuraJS.

Parallel to Sulu we develop our own JavaScript-UI-framework called “Husky”. Husky contains general UI-components such as toolbars, tabs or overlays. For Sulu our framework Husky brings the advantage that the “real” UI-components are separated from the front-end-code of Sulu, so that in Sulu we just have to concentrate on the communication between components, as the rendering of UI-components or handling of DOM-events is done in Husky. Another advantage of developing our own front-end-framework is that we can use the UI-components also in other future projects.

But why all these different frameworks, so many components on top of developing our own UI-framework? What do we really get out of this? Well, by developing the Sulu front-end this way, we ensure that we can easily change, extend and adapt the front-end. This enables us to quickly and sustainably adjust Sulu to the requirements of its users.