Web User Interface Implementation Technologies: An Underview Antero Taivalsaari1, Tommi Mikkonen2, Kari Systa¨3 and Cesare Pautasso4 1Nokia Technologies, Tampere, Finland 2Department of Computer Science, University of Helsinki, Helsinki, Finland 3Tampere University of Technology, Tampere, Finland 4Software Institute, Faculty of Informatics, USI, Lugano, Switzerland Keywords: Web User Interfaces, Web Programming, Web Rendering, Single Page Web Applications, Web Application Architectures. Abstract: Over the years, the World Wide Web has evolved from a document distribution environment into a rich de- velopment platform that can run compelling, full-fledged software applications. However, the programming capabilities of the web browser – designed originally for relatively simple scripting tasks – have evolved or- ganically in a rather haphazard fashion. Consequently, there are many ways to build applications on the Web today. Depending on one’s viewpoint, current standards-compatible web browsers support three, four or even five built-in application rendering and programming models. In this paper, we provide an ”underview” of the built-in client-side web application UI implementation technologies, i.e., a summary of those rendering mod- els that are built into the standards-compatible web browser out-of-the-box. While the dominance of the base HTML/CSS/JS technologies cannot be ignored, we foresee Web Components and WebGL gaining popularity as the world moves towards more complex and even richer web applications, including systems supporting virtual and augmented reality. 1 INTRODUCTION input modalities of the devices, valuable content has moved gradually from mobile devices to the cloud, The World Wide Web has become such an integral thus reducing the original role of the mobile apps con- part of the human society that it is often forgotten that siderably. the Web did not even exist thirty years ago. The orig- Interestingly, the programming capabilities of the inal design sketches related to the World Wide Web Web have largely been an afterthought – designed date back to the late 1980s. The first web browser originally for relatively simple scripting tasks. Due prototype for the NeXT computer was completed by to different needs and motivations, there are many Tim Berners-Lee in December 1990. The first version ways to make software run on the Web – many more of the Mosaic web browser was released in Febru- than people generally realize. Furthermore, over the ary 1993, followed by the first commercially suc- years these programming capabilities have evolved in cessful browser – Netscape Navigator – in late 1994. a rather haphazard fashion. Consequently, there are Widespread commercial use of the Web took off in the various ways to build applications on the Web. With- late 1990s (Berners-Lee and Fischetti, 2000) when the out considering any extensions, frameworks and add- web browser became the most commonly used com- on libraries, depending on one’s viewpoint, the Web puter program, sparking a revolution that has trans- browser natively supports three, four or five different formed not only commerce but communication, social built-in application rendering and development mod- life and politics as well. els. Thousands of libraries and frameworks have then In desktop computers, today nearly all the impor- been implemented on top of these built-in models. tant tasks are performed using the web browser. Even Furthermore, in addition to architectures that par- mobile applications can be viewed merely as ”mirrors tition applications more coarsely between server and into the cloud” (Charland and Leroux, 2011). While client side components (Gallidabino and Pautasso, native mobile apps still offer UI frameworks and wid- 2017), it is increasingly possible to fine-tune the ap- gets that are better suited to the limited screen size and plication logic by moving code flexibly between the 127 Taivalsaari, A., Mikkonen, T., Systä, K. and Pautasso, C. Web User Interface Implementation Technologies: An Underview. DOI: 10.5220/0006885401270136 In Proceedings of the 14th International Conference on Web Information Systems and Technologies (WEBIST 2018), pages 127-136 ISBN: 978-989-758-324-7 Copyright © 2018 by SCITEPRESS – Science and Technology Publications, Lda. All rights reserved WEBIST 2018 - 14th International Conference on Web Information Systems and Technologies client and the server (Meijer, 2007). In this context, 2 EVOLUTION OF THE WEB the rendering capabilities of the web browser are cru- BROWSER AS AN cial in creating the presentation layer of the applica- tions. APPLICATION PLATFORM In this paper, we provide a comparison of the built-in client-side web application architectures, i.e., Over the past twenty-five years, the World Wide Web the programming capabilities that the web browsers has evolved from its humble origins as a document provide out-of-the-box before any additional libraries sharing system to a massively popular hypermedia ap- are loaded. This is a topic that has received surpris- plication and content distribution environment – in ingly little attention in the literature. While there are short, the most powerful information dissemination countless papers on specific web development tech- environment in the history of humankind. This evo- nologies, and hundreds of libraries have been devel- lution has not taken place in a fortnight; it has not oped on top of the browser, there are few if any followed a carefully designed master plan either. Al- papers comparing the built-in user interface devel- though the World Wide Web Consortium (W3C) has opment models offered by the browser itself. The seemingly been in charge of the evolution of the Web, choice between these alternative development mod- in practice the evolution has been driven largely by els has a significant impact on the overall architecture dominant web browser vendors: Mozilla, Microsoft, and structure of the resulting web applications. The Apple, Google and (to a lesser degree) Opera. Over choices are made more difficult by the fact that the the years, these companies have had divergent, often web browser offers a number of overlapping features misaligned business interests. While browser compat- to accomplish even basic tasks, reflecting the histori- ibility has improved significantly in recent years, the cal, organic evolution of the web browser as an appli- browser landscape is still truly a mosaic or cornucopia cation platform. of features, reflecting organic evolution – or a tug of This paper is motivated by the recent trend to- war – between different vendors over time. ward simpler, more basic approaches in web devel- Before delving into more technical topics, let us opment. According to recent studies, the vast major- briefly revisit the evolution of the web browser as a ity (up to 86%) of web developers feel that the Web software platform (Taivalsaari et al., 2008; Taivalsaari and JavaScript ecosystems have become far too com- and Mikkonen, 2011; Anttonen et al., 2011). plex (http://stateofjs.com/). There is a movement to Classic Web. In the early life of the Web, web go back to the roots of web application development pages were truly pages, i.e., page-structured docu- by building directly upon what the web browser can ments that contained primarily text with interspersed provide without the added layers introduced by vari- images, without animation or any interactive con- ous libraries and frameworks. The recent ”zero frame- tent. Navigation between pages was based on sim- work manifesto” crystallizes this desire for simplicity ple hyperlinks, and a new web page was loaded from (Bitworking.org, 2014). However, even the ”vanilla” the web server each time the user clicked on a link. browser offers a cornucopia of choices when it comes There was no need for asynchronous network com- to application development. munication between the browser and the web server. This paper is an extended version of an earlier For reading user input some pages were presented as conference paper (Taivalsaari et al., 2017). The ex- forms, with simple textual fields and the possibility to tensions over the earlier work include extended back- use basic widgets such as buttons and radio buttons. ground and motivation, more detailed description of These types of ”classic web” pages were characteris- the different technologies, together with sample code, tic of the early life of the Web in the early 1990s. and a more elaborated discussion on the broader ar- Hybrid Web. With the introduction of DHTML chitectural implications. – the combination of HTML, Cascading Style Sheets The structure of this paper is as follows. In Sec- (CSS), the JavaScript language (Flanagan, 2011), and tion 2, we provide an overview on the evolution of the Document Object Model (DOM) – it became pos- the web browser as an application platform. In Sec- sible to create interactive web pages with built-in sup- tion 3, we dive into the built-in user interface de- port for more advanced graphics and animation. The velopment and rendering models offered by modern JavaScript language, introduced in Netscape Naviga- web browsers: (1) DOM, (2) Canvas, (3) WebGL, (4) tor version 2.0B almost as an afterthought in Decem- SVG, and (5) Web Components. In Section 4, we ber 1995, made it possible to build animated interac- provide a comparison, followed by a broader archi- tive content by scripting directly the web browser. tectural discussion in Section 5. Finally, Section 6 In the second phase, web pages became increas- concludes