FORWARD: Data-Centric UIs using Declarative Templates that Efficiently Wrap Third-Party JavaScript Components∗ Yupeng Fu, Kian Win Ong, Yannis Papakonstantinou, Erick Zamora fy4fu,kianwin,[email protected], [email protected] UC San Diego ABSTRACT { quakes: [ While Ajax programming and the plethora of JavaScript { _key: 456, component libraries enable high-quality UIs in web appli- mag : 2.5, lat : -150.3, cations, integrating them with page data is laborious and lng : 63.2, error-prone as a developer has to handcode incremental loc : '74km..', time: 'Mar..' modifications with trigger-based programming and manual }, ... coordination of data dependencies. The FORWARD web ], filter: [ framework simplifies the development of Ajax applications { _key : 1, through declarative, state-based templates. This declara- range: '>= 7.0', tive, data-centric approach is characterized by the principle selected: true }, ... of logical/physical independence, which the database com- ] munity has often deployed successfully. It enables FOR- } WARD to leverage database techniques, such as incremental Figure 1: Running Example: Figure 2: Page view maintenance, updatable views, capability-based com- Faceted Browsing of Earthquakes State ponent wrappers and cost-based optimization to automate efficient live visualizations. We demonstrate an end-to-end magnitude ranges, the page displays only earthquakes that system implementation, including a web-based IDE (itself satisfy the magnitude filter. built in FORWARD), academic and commercial applications Using mainstream web frameworks such as Ruby-on-Rails built in FORWARD and a wide variety of JavaScript com- and Backbone, developers already modularize code follow- ponents supported by the declarative templates. ing the Model-View-Controller (MVC) architectural pat- tern. The model (or page state) is an abstraction that rep- 1. INTRODUCTION resents the logical data used by user interfaces. For ex- Ajax programming and JavaScript component libraries ample, Figure 2 shows the example's page state in JSON have led to a new generation of modern web applications, format. Notice that the page state stores earthquake data which are characterized by user interfaces commensurate once in quakes, even though the data is utilized thrice in with desktop applications. This is achieved by the devel- the summary, table and map. Furthermore, the page state oper handcoding performance optimizations for incremental also contains the results of user interaction: filter stores modifications from the old page to the new page [4]. user input on whether a range is selected, whereas quakes Consider the running example in Figure 1, which shows a stores earthquakes that satisfy the filter. web application providing faceted browsing over earthquake Despite the page state abstraction, incremental modifi- data. The page shows a summary of total earthquakes dis- cations still occur in tedious and error-prone ways: (1) played, a table of earthquake details, and a map where each JavaScript components (maps, calendars, tabbed dialogs marker represents the earthquake's location and magnitude. etc.) encapsulate their complex state by exporting program- In response to the user selecting/deselecting checkboxes for matic APIs comprising methods and event handlers. When page state changes (e.g. displaying more earthquakes), call- ∗Supported by NSF III-1018961 and NSF III-1219263, PI'd ing a method (e.g. adding a particular marker on the by Prof Papakonstantinou who is a shareholder of App2you map) incrementally re-renders the component as a side- Inc, which commercializes outcomes of this research. effect. Conversely, when user interaction changes a compo- nent's state (e.g. deselecting a checkbox), an event handler fires and triggers code to change the page state. Effectively, This work is licensed under the Creative Commons Attribution- a developer engages in event-driven / trigger-based pro- NonCommercial-NoDerivs 3.0 Unported License. To view a copy of this li- gramming to laboriously translate from page state changes cense, visit http://creativecommons.org/licenses/by-nc-nd/3.0/. Obtain per- to component state changes, and vice versa. (2) Due to mission prior to any use beyond those covered by the license. Contact trigger-based programming, the developer has to manually copyright holder by emailing [email protected]. Articles from this volume assess data flow dependencies on the page, in order to cor- were invited to present their results at the 40th International Conference on rectly transition the application from one consistent state Very Large Data Bases, September 1st - 5th 2014, Hangzhou, China. Proceedings of the VLDB Endowment, Vol. 7, No. 13 to another. For example, when page state changes with Copyright 2014 VLDB Endowment 2150-8097/14/08. the addition of earthquakes, calling methods to refresh the 1649 4+5#&"'+-0/1%/+- <% unit google.map.Maps %> { -*.&( +%,'( !"#$"%&%'( markers : [ )'*'&( )'*'&( )'*'&( <% for q in quakes %> { { markers : [ position: { { .#,"'"$&+-2%+3- !"#"$%&%'()$"*+,-./%'-0/1%/+- lat: <%= q.lat %>, _key : 456, lng: <%= q.lng %> position: { }, lat : -150.3, !*$*:,/,';(),#</*7"%( +%,'(51*$$&12( 6&0/*1*78&( size : <%= siz(q.mag) %>, lng : 63.2, 9&#$/*'&( color: <%= col(q.mag) %> }, !"2'=:*2&4(>$7#,?&1( 3&%4&1&12( !"//&0'"12( } size : 3.5, <% end for %> color : '#FDD49E' ] }, ... } ] Figure 3: Architecture of Template Engine <% end unit %> } Figure 4: Template for Map Figure 5: Unit State for Map map/table, but not the summary, results in a buggy page that is inconsistent. Such data dependencies cause incre- <% bind filter each f %> <% unit html.Checkbox %> mental modifications to be very error-prone. (3) Vibrant { activity among commercial vendors and open-source com- checked: <% bind f.selected %>, { munities has led to numerous JavaScript libraries. As a data label: <%= f.range %> _key : 456, point, popularity tracker JSDB.io lists over 600 libraries. } checked: true, <% end unit %> label : '>= 7.0' Since these libraries are varied and do not utilize the same <% end bind %> } API conventions (unlike HTML/DOM, which has been stan- dardized), developers who integrate multiple libraries have Figure 6: Template for Figure 7: Unit State for to familiarize themselves with subtly different syntax and Checkboxes Checkbox semantics for incremental modifications. The database community has emphasized new opportu- of the declarative template language, and illustrates its up- nities in applying data-centric approaches, including data datable view semantics for bidirectional synchronization be- independence and declarative programming to other emerg- tween the page state and unit state. Section 2.2 presents ing language platforms [1]. In the same spirit, we present the how capability-based unit wrappers perform bidirectional FORWARD web framework [4, 5], which provides a declar- synchronization between unit state and component state. ative, state-based language for developers to create web ap- Section 2.3 presents how the logical/physical independence plications. Declarative programming enables the system between the unit state and component state enables the tem- to leverage database techniques, such as updatable views, plate engine to simulate missing capabilities and perform capability-based wrappers [6] and cost-based optimization to cost-based optimizations. Section 2.4 illustrates how devel- automatically propagate incremental modifications between opers can specify renderers and collectors directly within a page state and component state, and vice-versa. FOR- declarative template, thus enabling more lightweight inte- WARD thus extends prior declarative web frameworks such gration than implementing fully-capable unit wrappers. as Strudel [3] and Hilda [8], which have focused on mod- eling page state as queries, but do not perform incremen- 2.1 Declarative Templates as Updatable Views tal modifications. More recently, Model-View-ViewModel Figure 3 shows that the template engine takes two inputs: (MVVM) web frameworks such as AngularJS [2] and Knock- (1) the page state, which is represented in the JSON data out [7] have also employed declarativeness in utilizing HTML model. For efficiency of propagating changes bidirectionally templates to automate incremental modifications of the across page state, unit state and component state, it is rec- browser DOM. FORWARD's novel template language sup- ommended (but not required) that each element of an array ports HTML too, but goes beyond to also integrate the rich is identified by a key that remains immutable across page functionality of third-party JavaScript component libraries. refreshes. A common and simple solution is to generate such keys from the primary keys of data stored within databases. For example, keys are encoded as special key attributes in 2. TEMPLATE ENGINE OVERVIEW Figure 2. (2) the declarative template, which specifies how In this paper, we focus on the template engine of the FOR- the page should be displayed in the browser. For exam- WARD web framework, which automatically propagates ple, Figure 4 and 6 show the declarative templates for the changes between page state and component state, and vice- map and checkboxes respectively. Notably, a declarative versa. The template engine is independent of the modules template allows JavaScript components to be used without which output page state: FORWARD currently computes writing any integration JavaScript code. page state through a middleware query processor which eval- The unit state represents the state of a unit wrapper. For