Liquid Web Applications Design and Implementation of the Decentralized Cross-Device Web Doctoral Dissertation submitted to the Faculty of Informatics of the Università della Svizzera Italiana in partial fulfillment of the requirements for the degree of Doctor of Philosophy presented by Andrea Gallidabino under the supervision of Prof. Cesare Pautasso June 2020 Dissertation Committee Prof. Maristella Matera Politecnico di Milano, Italy Prof. Tommi Mikkonen University of Helsinki, Finland Prof. Marc Langheinrich Università della Svizzera italiana, Lugano, Switzerland Prof. Michele Lanza Università della Svizzera italiana, Lugano, Switzerland Dissertation accepted on 25 June 2020 Research Advisor PhD Program Director Prof. Cesare Pautasso Prof. Dr. Walter Binder, Prof. Dr. Silvia Santini i I certify that except where due acknowledgement has been given, the work presented in this thesis is that of the author alone; the work has not been submit- ted previously, in whole or in part, to qualify for any other academic award; and the content of the thesis is the result of work which has been carried out since the official commencement date of the approved research program. Andrea Gallidabino Lugano, 25 June 2020 ii Learn this lesson, that to be self-contented is to be vile and ignorant, and to aspire is better than to be blindly and impotently happy. Edwin A. Abbott iii iv Abstract Web applications are traditionally designed having in mind a server-centric ar- chitecture, whereby the whole persistent data, dynamic state and logic of the application are stored and running on a Web server. The clients running in the Web browsers traditionally render only pre-computed views fetched from the server. Nowadays this centralized approach does not fit well with the kind of interac- tions that the users perform when they connect to a Web application. The users can access the Web and fetch applications with much faster devices than the ones we owned thirty years ago. Moreover the Web can now be accessed with devices of any shape, size, and capability: ranging from desktop computers, to laptops, tablets, and smartphones. Emerging smart and embedded devices in the Internet of Things are also able to access the Web and interact with each other thanks to new emerging Web standards, such as smart televisions, smart watches, or smart cars. The diversity in the devices increased together with the average number of Web-enabled devices owned by a single user. Today the average connected users access the Web with multiple devices at the same time and expect that their appli- cations, which are now deployed on all the devices they own, can be seamlessly used on each one of them. In this dissertation we discuss liquid Web applications: software that can be deployed in a cross-device environment by exploiting the current HTML5 stan- dards. In particular we design and implement decentralized liquid Web soft- ware able to flow between different platforms. Like liquid adapts its shape to its container, liquid Web applications adapt and can be deployed on all available devices. The Web platform allows devices of different manufactures to commu- nicate, deploy, and distribute liquid applications among them, even when they do not share a common operating system. With liquid Web applications we seek to overcome the current stagnation in the traditional design of solid Web appli- cations in favor of an affordable cross-device solution. We present the history and evolution of liquid applications and discuss why the Web is the best platform for creating them. We show how to design liquid v vi software by discussing how to deploy the state, logic, and User Interface (UI) of any Web application on multiple devices. The design we present allows devel- opers to create liquid Web applications able to seamlessly flow between multiple devices following the attention of the users. We also present the Liquid.js for Polymer framework, whose goal is to simplify the creation of liquid Web appli- cations by helping developers to create their own Liquid User Experience (LUE). Our contribution in the design of liquid software presented in this dissertation is decoupled from the framework implementation and can be re-used to create new liquid frameworks. Acknowledgements Many people have helped me finish this dissertation, to whom I would like to warmly express my sincere gratitude and recognition. I cannot start this section without being grateful to my advisor Prof. Cesare Pautasso. He trusted my abilities and gave me the opportunity to work with him and finish this dissertation in the best environment I could have ever imagined. He taught me so many useful skills, some that go even beyond the scope of soft- ware design. For this reason I recognize in him a great mentor that goes beyond the educational system we live in. I will never thank you enough for helping me throughout these years, for helping me sorting my chaotic ideas, and produce the quality publications we worked on together. I am especially thankful for all the time you committed to helping me writing and present my work. I would like to thank Prof. Marc Langheinrich and Prof. Michele Lanza from USI, Prof. Maristella Matera from Politecnico di Milano, and Prof. Tommi Mikko- nen from University of Helsinki for their support. Their feedback helped me write this dissertation. I met so many competent people during this journey, many of whom I met while travelling around the world. The list is long, and it would be impossible to thank all of them, but I still carry their advices with me. All your inputs helped me shape this dissertation. A big thank-you to my colleagues Masiar Babazadeh, Vincenzo Ferme, Ana Ivanchikj, and Vasileios Triglianos for creating the best environment in our of- fice. We helped each other and we had so much fun. Especially I would like to acknowledge the help of Masiar Babazadeh, who made me discover and love the beauty of distributed Web applications during my master thesis, a love that I still nurture in my heart today. Obviously I will not forget to mention the good time we spent together the past years: drinking coffee and slaying monsters. I would also like to extend my acknowledgements to all the people I met at USI, students included. I learned so much from all of them, and they made me become a better person. I dedicate this dissertation to my family and my beloved, without their sup- vii viii port I would not be the person I am today. Finally, my last acknowledgements go to Antonov, Gigietto, Rinik, Robb, and Sithar, the true heroes of my story. Contents Contents ix List of Figures xv List of Tables xxi I Liquid Software 1 1 Introduction 3 1.1 Motivation . .3 1.2 Research Questions (RQs) . .6 1.2.1 RQ#1 - Liquid Software Design . .6 1.2.2 RQ#2 - Beyond Centralized Deployments . .7 1.2.3 RQ#3 - LUE Adaptation Among Devices . .8 1.2.4 RQ#4 - Sharing Resources Among Devices . .8 1.2.5 RQ#5 - Privacy and Security . .9 1.3 Summary and Outline . .9 1.4 Contributions and Publication Overview . 11 2 State of the Art 15 2.1 Liquid Software Metaphor . 17 2.1.1 Similar Metaphors . 20 2.2 Beyond the Liquid Metaphor . 22 2.3 Computer-Supported Collaborative Work (CSCW) . 22 2.3.1 Cross-Device Interfaces . 22 2.3.2 Human-Computer Interactions (HCI) . 24 2.3.3 Internet of Things (IoT) and Public Displays . 25 2.3.4 Mashups . 26 2.3.5 Distributed State in the Web . 27 ix x Contents 2.3.6 Offload Computations in the Web . 27 2.4 Industry Solutions . 29 2.5 Cloud . 30 3 Liquid Software Design 33 3.1 Design Considerations . 33 3.1.1 User Interface (UI) Adaptation . 33 3.1.2 Data and State Synchronization . 34 3.1.3 Client/Server Partitioning . 35 3.1.4 Security . 36 3.2 Design Space . 36 3.2.1 Topology . 38 3.2.2 Discovery . 41 3.2.3 Layering . 44 3.2.4 Granularity . 45 3.2.5 Client Deployment . 48 3.2.6 Liquid User Experience (LUE) . 49 3.2.7 Data and State . 52 3.2.8 Privacy and Security . 53 3.3 Maturity . 54 3.3.1 Maturity Model Facets . 55 3.3.2 Controller Layer deployment . 59 3.3.3 Communication channel . 60 3.3.4 Maturity Model . 61 3.3.5 Beyond Level 5 Framework . 69 II Liquid Web Architectures 71 4 Liquid Data Layer and State Synchronization 73 4.1 Communication Channels . 73 4.2 Granularity . 75 4.3 Data Flow Direction . 78 4.4 Liquid Storage . 81 5 Liquid Logic Layer and Liquid WebWorkers 85 5.1 APIs . 86 5.1.1 Liquid WebWorker Pool (LWWPool) API . 86 5.1.2 Liquid WebWorker (LWW) API . 88 5.2 Design . 89 xi Contents 5.3 Features . 92 5.3.1 Micro-Benchmark . 92 5.3.2 Failure Handling . 93 5.3.3 Task Offloading Policies . 96 5.4 Scenarios . 98 5.4.1 Single User Scenario - Editors (Image Processing) . 99 5.4.2 Single User Scenario - Public Displays . 100 5.4.3 Multiple Users Scenario - Education/Teaching Programming101 6 Liquid View Layer and Liquid Media Queries 105 6.1 Automatic Component Style Adaptation . 108 6.2 Component Deployment Redistribution . 111 6.2.1 Redistribution step . 112 6.2.2 Cloning step . 116 6.3 Liquid UI Redistribution and Cloning Algorithms . 117 6.3.1 Phase 1: Constraint-Checking and Priority Computation . 118 6.3.2 Phase 2: Migration and Cloning . 120 6.3.3 Phase 3: Component Adaptation . 122 6.3.4 Run-time Complexity .