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
[email protected] [email protected]

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 engine

978-0-7695-4022-1/10 $26.00 © 2010 IEEE 32

DOI 10.1109/ICIW.2010.13
 The abstract of suggested solution defines a II. OVERALL FRONT-END ARCHITECTURE AND STRATEGY
communication protocol built on JSON-RPC (JavaScript The front-end framework project (figure 1) is part of the
Object Notation - Remote Procedure Call) with well-defined overall architectural redesign of Tuenti.com. The front-end
scopes of responsibilities for technological components of layer is responsible for rendering views, communication with
the client and a highly customizable structure of server-side the server and UI interaction. The second part of the project
controllers. 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 stakeholders
in order to decouple HTML from data and perform rendering for the system and that are addressed by the front-end design
at the client browser. include: flexibility, cost and schedule, and integrability.
ExtJS [1] allows placing templates in separate files that The frontend framework's principles are to produce a
can be fetched and cached by the browser. Later, AJAX is highly decoupled system by introducing a natural separation
used to fetch data from the server to populate the templates. of concerns in the source code: structure (HTML), layout
This leads to bandwidth savings as there is no redundant styles (CSS), behavior and control (Javascript), and data
HTML served in every pageview and cost of producing (JSON-RPC). All except for the data will be cached on the
rendered HTML is moved to the client browser. However, client and in content caching solutions reducing the load of
the drawback of Ext JS approach is that they are introducing the in-house infrastructure. Furthermore, due to the nature of
a new language in the templates and therefore increase the some requests that return mostly unchanged data, it is
cost of any UI and design related operations. Consequently possible to cache and reuse them. This opportunity is
there is an increased need for interaction between designers supported by dramatically (45% to 91% according to the
and client-side developers. Also, the HTML templates tests) reducing the size of the response produced by the
produced by designers must be converted into Ext Templates server.
increasing the possible points of failure and the complexity The decoupling mentioned above also supports the
of the development process, as well as making maintenance organizational aspects of development projects based on the
cumbersome. framework. Work can easily be parallelized between teams
Many other JavaScript libraries essentially work with a participating in the project. The only required interaction
similar 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 product
mentioning here is one done by PureJS [6], which tackles requirements. Projects that involve redesign of the user
this issue by creating HTML templates that do not require interface can remove (or minimize) the need for developer
usage of conditional or looping statements. The templates involvement due to lack of any transformations to the
remain 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 is
Conditional statements are triggered by simply hiding or technology independent (easily parsed) but also native for
showing an element. In order to implement loops, they are the presentation layer of the main client, which is written in
inferred automatically by detecting if the data is an array. Javascript. It can be easily (in accordance to PCA design of
However, PureJS does not effectively manage decoupling of the server-side) replaced by XML or other formats on
data from the structure. More complex (real) usages of demand. The communication protocol itself has been
PureJS 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 data
structures or adding user interaction.
The existing system produces server-side Views as part
of the MVC framework. In a multi-client environment this
leads to an added load on the server infrastructure along with
increased complexity of implementing any changes to the
presentation. Currently the system uses seven different
interfaces, each with a separate set of views, controllers and
dynamic templates. The new solution will reduce that to
much simpler and static templates. An additional limitation
of the current MVC system is that it is capable of producing
only one view per URL with a request; in contrast, a request
with a chained JSON-RPC call can perform several
operations and return data that can be used for display,
caching, or configuration of the client. The new approach
also opens several optimization opportunities in terms of
reusing bootstrapped instance and in-memory cache of the
system and number of client connections.

33
 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; this
technique 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 receiving
the 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": true
the 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": true
but 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
 The page structure is defined in pure HTML. This means response buffer that later is printed (currently only JSON
that 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 the
show/repeat pieces depending on the interpretation of the PCA structure and only interacts with the Domain layer. But
response data. It is possible though to extend execution of its presence is very important from the perspective of the
the user action by arbitrary routines that can add additional back-end framework.
logic. Still, that doesn't 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 as
templates 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 Printer
serves 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 Printer
With this code sample the Template Engine is capable of component can accept any printing strategy to produce
implicitly 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 as
presence of the avatar in the data, repeat it if the avatar is an the framework does not produce any views. The Abstraction
array, and inject data into the DOM element basing on the layer of an agent will access the Domain layer, which is part
information 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 and
element will be left unprocessed. The data centric approach it may instantiate multiple Abstraction objects to fetch data
of the framework means that the Template Engine will to build its output. The structure of controllers provides them
identify elements in the structure by iterating through the with a lot of flexibility. A Controller can delegate tasks to
data, and matching them in the DOM structure that is being other agents or fetch their responses and then perform the
dynamically scoped. When iterating into nested structures, requested action. Additionally, the controllers are capable of
the Template Engine will now search only within the accessing responses of other agents through the response
corresponding context in the DOM. If certain DOM elements buffer.
are not identified by the Template Engine they are left
unprocessed and their default appearance will apply. In order
to match elements to data the DOM elements only need to
refer to the data through values set in two distinct element
attributes, class attribute for data to be injected in the page
structure and params attribute for data to be made available
to UI interaction scripts.
Specific actions for user interaction can be added to the
DOM elements by specifying the action. All actions will be
implemented in an external static JavaScript file and, as a
good practice and internal coding convention, it will not be
allowed to place any other JavaScript code inside the HTML
Templates. This is a natural decoupling of behavior from
structure which is similar to decoupling page structure from
style by not setting inline CSS using the style attribute.
IV. SERVER-SIDE FRAMEWORK
The main architectural element of the server-side part of
the front-end framework is inspired by an architectural
pattern known as Presentation-Abstraction-Controller (PAC)
[7][8]. The design (named Printer-Controller-Abstraction)
bases on identifying data-centric controllers and allows free
interactions between them. The graph structure of controllers
receives data from the abstraction layer where abstractions
are instantiated by controllers. The abstraction layer
communicates with the domain layer that manages and
identifies domain entities. All of the controllers that
participate in the request processing populate a central

35
 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 proposed
performance by reducing inter-team dependencies and framework. Server-side code complexity is greatly reduced
abbreviating communication to its initial analysis stage. through the usage of the PCA framework. Preliminary results
Apart from that it reduces amount of work that is required to show that response time is almost a third when compared to
prepare the front-end code for the rich UI clients. Teams are the existing MVC framework. Templates can now be
able to focus more on their core activities and technologies visualized directly in the browser, raw template sizes are at
reducing friction and optimizing the communication paths. least 30% smaller, and there are no conditional or iterative
Upcoming 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 the
side developers to support iterative changes to views, client browser's which might now become a challenge that
templates and controllers. Simple and pure HTML templates has to be faced before rolling out the system into live
improve the throughput of designers who may now work in a environment. However, the overall response time observed
WYSIWYG way, able to use their tools directly on the by the user is still lower than in the current implementation
templates. 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 developer's 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 Interact'87
A 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–436
feature, the Private Messages module, of the Tuenti.com [8] J. Cai, R. Kapila and G. Pal, "HMVC: The HMVC: The layered
application 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=2
been evaluated using Firefox 3.5. and Chromium.

36