HoT: Unleash Web Views with Higher-order Templates Fernando Miguel Carvalho a and Luis Duarte ADEETC, ISEL, Polytechnic Institute of Lisbon, Portugal Keywords: Template View, Big Data, Front-end, Web Application, HTML. Abstract: Over the past decades, templates views have been the most used approach to build dynamic HTML pages. Simply put, a template engine (such as JSP, Handlebars, Thymleaf, and others) generates HTML by merging templates with given data models. Yet, this process may turn impractical for large data sets that postpone the HTML resolution until all data become available to the engine. This behavior results in poor user experience preventing the browser to render the end user-interface. In this paper we introduced the concept of higher- order templates (HoT) provided in Java implementation of HtmlFlow, which allows HTML to be resolved on demand as data becomes available. This lets the user-interface to be rendered incrementally by the browser in line with the availability of the data. Finally we also show some advantages of HtmlFlow over state of the art front-end frameworks such as ReactJS. 1 INTRODUCTION and producing HTML is blocking and it only finishes when all template markers have been replaced with Contrary to static HTML pages, which do not change data from the context object. In the case of an itera- from request to request, dynamic Web pages may take tion tag (i.e. #each of Listing 1) it must traverse the results from a data source, like database or web ser- entire list (i.e. tracks) to complete the template reso- vice, and embed them into the HTML. Dynamic Web lution. The larger the data (i.e. tracks.size()), the pages share a similar structure to static HTML but longer the engine takes to finish the resolution. While they also include markers that can be resolved into the engine is resolving the view, the browser is pre- calls to gather dynamic information. Since the static senting a blank page to the end user giving him an part of the page acts as a template, this pattern is unresponsive behavior. known as template view (Fowler, 2002) or template- Listing 1: Handlebars template view for a dynamic un- based view strategy (Alur et al., 2001). When the tem- ordered list. plate view is used to service a request, the markers <ul> are replaced by the results of corresponding computa- {{#each tracks}} tions. The parsing and replacement process (i.e. res- <li>{{name}}</li> olution) is the main role of the template engine (Parr, {{# each }} 2004). </ul> Template engines distinguish themselves by the idiom and subset of available markers to control the Visualization is one of the major concerns in big dynamic content. Generally, all engines provide a data (Agrawal et al., 2015; Storey and Song, 2017). specialized tag for iteration, which can be used for Also, people tend to prefer web based applications example to generate a dynamic list such that one pre- as their favorite visualization support for data anal- sented in Listing 1 expressed in the Handlebars id- ysis (Yaqoob et al., 2016). Yet, even using data re- iom (an extension to the Mustache templating lan- duction strategies (Liu et al., 2013; ur Rehman et al., guage (Lerner, 2011)). 2016) the resulting data sets are large enough to make In this example, the template receives a context unfeasible the use of template views. This problem object with a tracks property and generates a li arises in both, server-side or client-side (i.e. front- element with the track’s name for each item in the end) web application development. In the former tracks list. The process of resolving the template case, the view resolution process prevents the server to send the response and in the latter, the number of a https://orcid.org/0000-0002-4281-3195 DOM nodes (Hors et al., 2004) increases with the size 118 Carvalho, F. and Duarte, L. HoT: Unleash Web Views with Higher-order Templates. DOI: 10.5220/0008167701180129 In Proceedings of the 15th International Conference on Web Information Systems and Technologies (WEBIST 2019), pages 118-129 ISBN: 978-989-758-386-5 Copyright c 2019 by SCITEPRESS – Science and Technology Publications, Lda. All rights reserved HoT: Unleash Web Views with Higher-order Templates of dynamic data, incurring in additional performance 2 STATE OF THE ART overhead for the browser. For these reasons tradi- tional ways of presenting data in web applications is Dealing with large data sets on web applications usu- inadequate to handle big data (Agrawal et al., 2015). ally leads the browser to present an unresponsive be- In this work, we propose a new approach based on havior due to the template view resolution process. higher-order templates (HoT), which aims to achieve One way of dealing with this problem is to reduce big a similar methodology to the server side template data into manageable size (Feldman et al., 2013). Yet, view pattern, but useful even on the presence of big even using reduction techniques the resulting subset data. Briefly, our goal is to establish data-centric may still be large enough to turn impractical the use push-style approach (Jin et al., 2015) and push the of a template engine. resulting HTML to the response stream as its content Web applications usually mitigate this problem is being resolved. Rather than pulling data from a with two possible solutions (but not limited to): 1) source and fully complete markers of a template view, numbered pagination, 2) infinite scrolling. Numbered we propose to react to data and push the resulting pagination was one of the first solutions adopted to HTML as it is being resolved. This follows the idea deal with the web presentation of big data, such as of (Meijer, 2012) that states that the Velocity axis of the results retrieved by web search engines. Later the big data ranges from pulling data from the source to MSN search’s image search was the first one to in- pushing data to the clients. troduce the infinite scrolling technique with a single This solution is implemented in HtmlFlow Java page of results, which you can scroll to automatically library, which implements a domain specific lan- load more images (Farago et al., 2007). Both options guage (DSL (Mernik et al., 2005)) for HTML. Briefly, reduce latency and turn the browser responsive, but HtmlFlow implementation is based on the following both also have some drawbacks. key ideas: Numbered pagination forbids, for example, the 1. do not block the template resolution until its com- end user to use the browser to find something among pletion (Meijer, 2012); all resulting pages. On the other hand, infinite scrolling uses AJAX to fetch data (Kesteren et al., 2. discard textual template files; 2006) and DOM (Hors et al., 2004) to update the 3. use HTTP chunked transfer encoding (Fielding user-interface as data results become available. This and Reschke, 2014); approach is usually known as front-end web develop- 4. define views as first-class functions. ment (Smith, 2012). But, manipulating large collec- tions of DOM nodes is slow and increases browser For the remainder of this paper we present in the processing overhead. Moreover we lose the overall next section state of the art solutions that deal with structure of the template view that now is mixed in web presentation of large data sets. Then in Sec- with DOM manipulation logic. tion 3 we present our proposal of higher-order tem- Regarding the example of Listing 1 and its use plates. After that in Section 4, we present the Java with a front-end technology, then the template would library HtmlFlow, which provides a domain-specific be only the ul element with a unique identifier (e.g. language for HTML. In Section 5, we discuss re- listOfTracks) such as: lated work in the HtmlFlow field. In Section 6, we present an experimental evaluation of developing a web application–topgenius.eu1–that presents the top <ul id="listOfTracks"></ul> tracks ranking for a given country. This application uses data from Last.fm RESTful API and dynamically In turn, the li elements would be manipulated builds a list with hundreds of thousands of records. programmatically through DOM. Here we compare three different technological ap- Keeping a view definition with whole HTML proaches: 1) server-side template view, 2) ReactJS structure similar to a template was one of the moti- and 3) HtmlFlow. Finally, in Section 7 we conclude vations for the appearance of front-end frameworks, and discuss some future work. such as Angular or ReactJs. This kind of frameworks allow the definition of a view based on a context ob- ject that is latter bound to the view by the framework through DOM. Yet, these frameworks do not solve the perfor- mance issues and do not let end users to get page source code in an infinite scroll scenario. For example 1Source code is available at github.com/xmlet/topgenius in ReactJs, the page source of resulting HTML will 119 WEBIST 2019 - 15th International Conference on Web Information Systems and Technologies only display <div id="root"></div> correspond- The tracksTpl function receives two parameters: ing to the div element where the framework places an HtmlFlow view and a context object (e.g. tracks). HTML elements from DOM manipulation. The view parameter provides the HTML fluent in- Briefly, web front-end development approaches terface (Fowler, 2010) with methods corresponding circumscribe the server-side templates problems by to the name of HTML elements and an additional moving the HTML resolution from the server to web () method to close an HTML element tag.