2010 Fifth International Conference on Internet and Web Applications and Services   A Highly Decoupled Front-end Framework...
The abstract of suggested solution defines a                           II.   OVERALL FRONT-END ARCHITECTURE AND STRATEGYco...
configuration of the client such as re-routing the client to a                                                            ...
The page structure is defined in pure HTML. This means               response buffer that later is printed (currently only...
V.   CONCLUSION AND FUTURE WORK                             This successful PoC shows that highly complex and    The new d...
Upcoming SlideShare
Loading in …5

"A Highly Decoupled Front-end Framework for High Trafficked Web Applications", by Gurbani & Tucholka


Published on

Paper published in the IEEE Computer Society. Published by the Architecture Team in Tuenti

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

"A Highly Decoupled Front-end Framework for High Trafficked Web Applications", by Gurbani & Tucholka

  1. 1. 2010 Fifth International Conference on Internet and Web Applications and Services A Highly Decoupled Front-end Framework for High Trafficked Web Applications Andrzej Tucholka Prem Gurbani Architecture Team Architecture Team Tuenti Technologies S.L. Tuenti Technologies S.L. Madrid, Spain Madrid, Spain andrzej@tuenti.com prem@tuenti.com Abstract—Web applications are becoming more feature rich working on a MVC-like (Model-View-Controller) and ever more ubiquitous, while trying to address the needs of framework. From an organizational perspective frontend millions of users. Server-side scalability and performance are a engineers build the controllers and views in PHP and serious matter as farms are unceasingly expanding for high afterwards the framework populates the templates (mixture growth sites. User Interface designers are looking for novel of PHP, HTML and Javascript) to produce the output. Since approaches to stimulate user engagement which results in more each part of the response can be generated with PHP, they advanced and feature-rich clients. Remaining competitive are taking many shortcuts that result in tight coupling of requires companies to constantly push and release new features every possible piece of the code. along with overall UI redesigns. From a design perspective the existing front-controller is The evolution of the web paradigm requires architectural an ad-hoc control flow that routes the calls to the MVC changes that use models that will increase the flexibility and framework. The standard request protocol is done through address the scaling problems in terms of performance, URL-visible GET requests complemented with data sent via development process and demanding product requirements. POST. The existing template engine is tightly coupled with the View, and delivers final HTML to every user. This paper presents a web architectural design that decouples The existing system has several problems that need to be several layers of a web application, while delegating all addressed on an architectural level: presentation related routines to the client. To address  minimize inter-team dependencies that force the organizational concerns in the design, client-side layers have work organization to be sequential, been highly decoupled resulting with a well defined, natural  avoid duplicating work while introducing additional responsibilities for each of them: structure - HTML, layout - CSS, behavior - JavaScript. The server exclusively produces client applications, data that is sent to the client and then mapped to the HTML  maximize possible optimization and caching templates taking advantage of interpreting data structure solutions that can be implemented on several levels (presence of items, detecting sets of data, manual operations) of the system, for constructing result view to the user. The data produced by  reduce TCO (Total Cost of Ownership) by reducing the server is client-independent enabling reuse of the server bandwidth and CPU load of the in-house API by several clients. Overall, the strong responsibilities of infrastructure, identified layers allow parallelizing the development process  maximize flexibility in terms of changing the UI and reduce operational friction between teams. (User Interface) while reducing time required to release UI changes, The server-side part of the frontend framework is designed  implement easily adoptable communication protocol with the novel Printer-Controller-Abstraction (PCA) that was constructed as a variation of the Presentation-Abstraction- to increase opportunities for external usage of the Controller (PAC) architectural pattern. The design keeps the system, high flexibility of the graph of controllers and introduces  maximize the reuse of the common data used of the additional concepts like response caching and reuse and allows system (list of friends, partitioning schema) and easy changes of the input and output formats. (Abstract) minimize the cost of bootstrapping the system. An analysis performed on existing web applications such Keywords-component; frontend; framework; architecture; as Facebook, Gmail, Flickr, MySpace or Twitter shows that flexible UI; performance none of these sites produce AJAX (Asynchronous JAvascript and XML) responses which decouple data from presentation. I. STATE OF THE ART Usually, these responses are a pre-built stream mixing Javascript, CSS, HTML and data which is then inserted into The current system is running rich-client JavaScript and specific containers in DOM (Document Object Model) or HTML/CSS generated by the server. The Responses are just evaluated in the Javascript engine. generated using an in-house designed template engine978-0-7695-4022-1/10 $26.00 © 2010 IEEE 32DOI 10.1109/ICIW.2010.13
  2. 2. The abstract of suggested solution defines a II. OVERALL FRONT-END ARCHITECTURE AND STRATEGYcommunication protocol built on JSON-RPC (JavaScript The front-end framework project (figure 1) is part of theObject Notation - Remote Procedure Call) with well-defined overall architectural redesign of Tuenti.com. The front-endscopes of responsibilities for technological components of layer is responsible for rendering views, communication withthe client and a highly customizable structure of server-side the server and UI interaction. The second part of the projectcontrollers. includes back-end redesign which is outside of the scope of Several frameworks exist that introduce similar solutions this document. Main concerns identified by the stakeholdersin order to decouple HTML from data and perform rendering for the system and that are addressed by the front-end designat the client browser. include: flexibility, cost and schedule, and integrability. ExtJS [1] allows placing templates in separate files that The frontend frameworks principles are to produce acan be fetched and cached by the browser. Later, AJAX is highly decoupled system by introducing a natural separationused to fetch data from the server to populate the templates. of concerns in the source code: structure (HTML), layoutThis leads to bandwidth savings as there is no redundant styles (CSS), behavior and control (Javascript), and dataHTML served in every pageview and cost of producing (JSON-RPC). All except for the data will be cached on therendered HTML is moved to the client browser. However, client and in content caching solutions reducing the load ofthe drawback of Ext JS approach is that they are introducing the in-house infrastructure. Furthermore, due to the nature ofa new language in the templates and therefore increase the some requests that return mostly unchanged data, it iscost of any UI and design related operations. Consequently possible to cache and reuse them. This opportunity isthere is an increased need for interaction between designers supported by dramatically (45% to 91% according to theand client-side developers. Also, the HTML templates tests) reducing the size of the response produced by theproduced by designers must be converted into Ext Templates server.increasing the possible points of failure and the complexity The decoupling mentioned above also supports theof the development process, as well as making maintenance organizational aspects of development projects based on thecumbersome. framework. Work can easily be parallelized between teams Many other JavaScript libraries essentially work with a participating in the project. The only required interactionsimilar concept. These include: Mjt [2], UIZE [3], TrimPath between them takes place in the analysis stage, when the[4] or EmbeddedJS [5]. An implementation worth interface and the model are defined to satisfy productmentioning here is one done by PureJS [6], which tackles requirements. Projects that involve redesign of the userthis issue by creating HTML templates that do not require interface can remove (or minimize) the need for developerusage of conditional or looping statements. The templates involvement due to lack of any transformations to theremain in HTML and the data is matched with injection templates that are now based on pure HTML.points identified by a specific attribute in the structure. JSON was picked as a data transport format because it isConditional statements are triggered by simply hiding or technology independent (easily parsed) but also native forshowing an element. In order to implement loops, they are the presentation layer of the main client, which is written ininferred automatically by detecting if the data is an array. Javascript. It can be easily (in accordance to PCA design ofHowever, PureJS does not effectively manage decoupling of the server-side) replaced by XML or other formats ondata from the structure. More complex (real) usages of demand. The communication protocol itself has beenPureJS framework require constructing statements named designed to address the need for semantic identification of"directives". These define the process of inserting the data the data, human readability, and server-side optimizations.into HTML along with other elements such as additional datastructures or adding user interaction. The existing system produces server-side Views as partof the MVC framework. In a multi-client environment thisleads to an added load on the server infrastructure along withincreased complexity of implementing any changes to thepresentation. Currently the system uses seven differentinterfaces, each with a separate set of views, controllers anddynamic templates. The new solution will reduce that tomuch simpler and static templates. An additional limitationof the current MVC system is that it is capable of producingonly one view per URL with a request; in contrast, a requestwith a chained JSON-RPC call can perform severaloperations and return data that can be used for display,caching, or configuration of the client. The new approachalso opens several optimization opportunities in terms ofreusing bootstrapped instance and in-memory cache of thesystem and number of client connections. 33
  3. 3. configuration of the client such as re-routing the client to a different farm, throttling automatic chat status updates, etc. Example JSON-RPC call: { "Friends": ["getOnline", {"maxCount": "10", "order": "recentVisit"}], "Messages": ["getThread", {"id": "12670096710000000066", "msgCount": "5"}], } The server will provide a response in JSON which has a flat structure, so it does not infer or suggest any hierarchy on the f i n a l d i s p l a y, a n d i s p u r e l y d a t a - c e n t r i c . {"output" : [ { "friends" : [ The performance concern is being addressed by the {possibility to chain multiple calls in one request; thistechnique not only reduces the need to bootstrap the system "userId" : 234,but also can drastically reduce the number of connections "avatar" : {between the client and the server (which is especially "offsetX": 31,significant for mobile applications). "offsetY": 0, See figure 2 for a more detailed view of the execution "url": "v1m222apwer124SaaE.jpg",flow. }, "friendAlias" : "Nick" III. CLIENT-SIDE FRAMEWORK DESIGN },{ The approach followed in the framework makes use of a "userId" : 638,similar concept followed by Pure JS for templates. However, "avatar" : {all behaviour and logic is provided by client-side JavaScript "offsetX": 32,only and the mapping between the data and template "offsetY": 50,structure is performed automatically basing on the "url": "MLuv22apwer114SaaE.jpg",semantical information contained in both. Since the },mentioned mapping information is contained within standard "friendAlias" : "John"id and class attributes of the HTML tags, they can be }]naturally reused by Javascript and CSS without introducing }, {any new meta-language. "threadId": "12670096710000000066", Effectively, the framework resides on the user browser "canReply": true,and is responsible for interacting with servers to fetch static "totalMessageNumber": 3,and dynamic data, template rendering, and user interaction. "messages": [Specifically, the server interaction involves sending requests {for downloading all statics from the content caches by "isUnread": true,pooling and parallelizing requests for optimal bandwidth "senderId": 32,usage and total time of handling the request. Upon receivingthe response from the servers the framework executes the "senderFullName": "John",hooks for client data transformations (e.g. date "body": "But I must explain to you...",transformation) and renders the page. The Main Controller is "validBody": truethe core of the client-side framework, as it manages the }, {communication with the servers and handles several hooks "isUnread": false,allowing code execution within the process of handling user "senderId": 66,action. "senderFullName": "Paul", The data is retrieved by sending JSON-RPC requests to "body": "Sed ut perspiciatis unde omnis...",the server which provide the response to called procedures, "validBody": truebut also can contain additional information. This will usually }]contain data corresponding to the actions that took place }]within the functional scope of interest of the user (e.g. new }message has arrived) but also can contain data used for 34
  4. 4. The page structure is defined in pure HTML. This means response buffer that later is printed (currently only JSONthat the templates themselves do not require introducing any printer) and output from the system.new meta-language, relying instead on the framework to The Abstraction layer plays a relatively small role in theshow/repeat pieces depending on the interpretation of the PCA structure and only interacts with the Domain layer. Butresponse data. It is possible though to extend execution of its presence is very important from the perspective of thethe user action by arbitrary routines that can add additional back-end framework.logic. Still, that doesnt influence the way that the templates See figure 3 for a general model.are being created and all of the routines for handling None of the PCA agents produce the presentation astemplates are implemented in Javascript. such. Instead the response is sent to a Response Buffer where Here is an example of a piece of HTML code which each agent caches the data it produces. The Response Printerserves as a template to display user avatars: is a lazy component which just produces a representation of the data when the full request has been performed (when<img params="userId url offsetX offsetY" Printer asks for it). The Response component allows greater class="avatar" src="" alt="" control over re-usability of responses across the hierarchy in onclick="Tuenti.Modules.Avatar.onClickEvent(this);"/> a request, allowing reuse of the agent response throughout the lifetime of a request. At the end of processing, the PrinterWith this code sample the Template Engine is capable of component can accept any printing strategy to produceimplicitly performing a very flexible conditional statement output in desired format.where it is possible to show the element basing on the The complexity of each agent is dramatically reduced aspresence of the avatar in the data, repeat it if the avatar is an the framework does not produce any views. The Abstractionarray, and inject data into the DOM element basing on the layer of an agent will access the Domain layer, which is partinformation contained in the params attribute. of the backend framework, to fetch the requested data. The If no matching with the data can be found the DOM Controller contains all the actions an agent can perform andelement will be left unprocessed. The data centric approach it may instantiate multiple Abstraction objects to fetch dataof the framework means that the Template Engine will to build its output. The structure of controllers provides themidentify elements in the structure by iterating through the with a lot of flexibility. A Controller can delegate tasks todata, and matching them in the DOM structure that is being other agents or fetch their responses and then perform thedynamically scoped. When iterating into nested structures, requested action. Additionally, the controllers are capable ofthe Template Engine will now search only within the accessing responses of other agents through the responsecorresponding context in the DOM. If certain DOM elements buffer.are not identified by the Template Engine they are leftunprocessed and their default appearance will apply. In orderto match elements to data the DOM elements only need torefer to the data through values set in two distinct elementattributes, class attribute for data to be injected in the pagestructure and params attribute for data to be made availableto UI interaction scripts. Specific actions for user interaction can be added to theDOM elements by specifying the action. All actions will beimplemented in an external static JavaScript file and, as agood practice and internal coding convention, it will not beallowed to place any other JavaScript code inside the HTMLTemplates. This is a natural decoupling of behavior fromstructure which is similar to decoupling page structure fromstyle by not setting inline CSS using the style attribute. IV. SERVER-SIDE FRAMEWORK The main architectural element of the server-side part ofthe front-end framework is inspired by an architecturalpattern known as Presentation-Abstraction-Controller (PAC)[7][8]. The design (named Printer-Controller-Abstraction)bases on identifying data-centric controllers and allows freeinteractions between them. The graph structure of controllersreceives data from the abstraction layer where abstractionsare instantiated by controllers. The abstraction layercommunicates with the domain layer that manages andidentifies domain entities. All of the controllers thatparticipate in the request processing populate a central 35
  5. 5. V. CONCLUSION AND FUTURE WORK This successful PoC shows that highly complex and The new design improves the project organization feature rich applications can be developed with the proposedperformance by reducing inter-team dependencies and framework. Server-side code complexity is greatly reducedabbreviating communication to its initial analysis stage. through the usage of the PCA framework. Preliminary resultsApart from that it reduces amount of work that is required to show that response time is almost a third when compared toprepare the front-end code for the rich UI clients. Teams are the existing MVC framework. Templates can now beable to focus more on their core activities and technologies visualized directly in the browser, raw template sizes are atreducing friction and optimizing the communication paths. least 30% smaller, and there are no conditional or iterativeUpcoming visual redesign projects can be done primarly by a flows.design team rather involving significant work from client- Cost of producing rendered HTML is now moved to theside developers to support iterative changes to views, client browsers which might now become a challenge thattemplates and controllers. Simple and pure HTML templates has to be faced before rolling out the system into liveimprove the throughput of designers who may now work in a environment. However, the overall response time observedWYSIWYG way, able to use their tools directly on the by the user is still lower than in the current implementationtemplates. and will be subject to further optimizations.Key benefits of this architecture are: REFERENCES  minimize overhead of maintaining multiple interfaces, [1] Ext JS. Palo Alto CA (USA), 2009 [Online]. Available: www.extjs.com  shift team focus to match their responsibilities, [2] Mjt, "Template-Driven Web Applications in JavaScript" [Online].  removing the need of server-side changes when Available: www.mjtemplate.org changing page structure, layout, design or UI scripts, [3] UIZE, "JavaScript Framework", 2010 [Online]. Available:  parallelize development project efforts, www.uize.com  minimize bandwidth consumption (savings of 45%- [4] TrimPath, 2008 [Online]. Available: www.trimpath.com 92% depending on the page type), [5] Jupiter Consulting, "EmbeddedJS, An Open Source JavaScript  minimize server-side CPU use (savings of 65%-73% Template Library", Libertyville IL (USA), 2010 [Online]. Available: www.embeddedjs.com depending on the page type), [6] BeeBole, "PureJS, Templating Tool to generate HTML from JSON  improve developers performance by providing tools data", 2010 [Online]. Available: www.beebole.com/pure with clearly defined responsibilities and scope. [7] Coutaz, Joëlle, "PAC: an Implementation Model for Dialog Design", 1987. H-J. Bullinger, B. Shackel (ed.). Proceedings of the Interact87A working prototype has been built, proving the above conference, September 1-4, 1987, Stuttgart, Germany. North-Holland.concepts are viable and functional. A subset of an existing pp. 431–436feature, the Private Messages module, of the Tuenti.com [8] J. Cai, R. Kapila and G. Pal, "HMVC: The HMVC: The layeredapplication was used to test the above framework. This initial pattern for developing strong client tiers", 2000, JavaWorld [Online]. A v a i l a b l e : http://www.javaworld.com/javaworld/jw-07-2000/jw-proof of concept (PoC) of the framework has preliminary 0721-hmvc.html?page=2been evaluated using Firefox 3.5. and Chromium. 36