A Highly Decoupled Front-End Framework for High Trafficked Web Applications

Web applications are becoming more feature rich and ever more ubiquitous, while trying to address the needs of millions of users. Server-side scalability and performance are a serious matter as farms are unceasingly expanding for high growth sites. User Interface designers are looking for novel approaches to stimulate user engagement which results in more advanced and feature-rich clients. Remaining competitive requires companies to constantly push and release new features along with overall UI redesigns. The evolution of the web paradigm requires architectural changes that use models that will increase the flexibility and address the scaling problems in terms of performance, development process and demanding product requirements. This paper presents a web architectural design that decouples several layers of a web application, while delegating all presentation related routines to the client. To address organizational concerns in the design, client-side layers have been highly decoupled resulting with a well defined, natural responsibilities for each of them: structure - HTML, layout - CSS, behavior - JavaScript. The server exclusively produces data that is sent to the client and then mapped to the HTML templates taking advantage of interpreting data structure (presence of items, detecting sets of data, manual operations) for constructing result view to the user. The data produced by the server is client-independent enabling reuse of the server API by several clients. Overall, the strong responsibilities of identified layers allow parallelizing the development process and reduce operational friction between teams. The server-side part of the front-end framework is designed with the novel Printer-Controller-Abstraction (PCA) that was constructed as a variation of the Presentation-Abstraction-Controller (PAC) architectural pattern. The design keeps the high flexibility of the graph of controllers and introduces additional concepts like response caching and reuse and allows easy changes of the input and output formats.