@phdthesis {2020:liquid:phd, title = {Liquid Web Applications - Design and Implementation of the Decentralized Cross-Device Web}, year = {2020}, month = {June}, pages = {310}, school = {USI}, type = {PhD}, address = {Lugano}, abstract = {Web applications are traditionally designed having in mind a server-centric architecture, 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 interactions 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 applications, 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 standards. In particular we design and implement decentralized liquid Web software 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 communicate, 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 applications 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 software by discussing how to deploy the state, logic, and user interface of any Web application on multiple devices. The design we present allows developers 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 applications by helping developers to create their own liquid user experience. 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.}, keywords = {liquid software, liquid.js}, url = {https://doc.rero.ch/record/328744}, author = {Andrea Gallidabino} } @article {liquidjs:2020:jwe, title = {Multi-Device Complementary View Adaptation with Liquid Media Queries}, journal = {Journal of Web Engineering (JWE)}, volume = {18}, year = {2020}, month = { 761{\textendash}800 }, abstract = {Responsive Web applications assume that they run on a single device at a time. Developers use CSS3 media queries to declare how the Web application user interface adapts to specific capabilities (e.g., screen size or resolution) of individual devices. As users own and use multiple devices across which they attempt to run the same Web application at the same time, we propose to extend CSS media queries so that developers can also use them to dynamically adapt so-called liquid Web applications as they are seamlessly deployed across multiple devices. In this paper we present the concept of liquid media queries. They support features to detect the number of connected devices, the number of users running the application, or the role played by each device during the application execution. The liquid media query types and features defined in this paper are designed for component-based Web applications, and they enable developers to control the deployment and dynamic migration and cloning of individual Web components across multiple browsers. Furthermore we present the design of how liquid media queries are implemented within the Liquid.js for Polymer framework and the corresponding distributed adaptation algorithms. We discuss the implications of multi-device adaptation from the perspective of the developers and also the users of a liquid Web application. Finally we showcase the expressiveness of the liquid media queries to support real-world examples and evaluate the algorithmic complexity of our approach. }, keywords = {complementary view adaptation, liquid software, media queries, multi-device adaptation, responsive user interface}, doi = {10.13052/jwe1540-9589.1882}, url = {https://journals.riverpublishers.com/index.php/JWE/article/view/1099}, author = {Andrea Gallidabino and Cesare Pautasso} } @article {2019:liquidjs:jwe, title = {The LiquidWebWorker API for Horizontal Offloading of Stateless Computations}, journal = {Journal of Web Engineering}, volume = {17}, year = {2019}, month = {March}, pages = {405-448}, abstract = {As most users access the Web from multiple devices with different characteristics, ranging from powerful desktops or laptops to tablets, mobile phones or watches and cars, liquid Web applications seamlessly flow across multiple Web-enabled devices and adapt their distributed user interface to the set of devices simultaneously accessing the application. In this paper we focus on the business logic layer of rich Web applications and explore the opportunity to reduce the execution time of CPU-intensive tasks or limit their energy consumption by offloading them among nearby devices running the same liquid Web application. We extend the standard HTML5 WebWorker API with the concept of liquid WebWorkers, so that developers can transparently offload parallel execution of stateless tasks by managing the necessary device selection and direct peer-to-peer data transfer. By introducing the liquid WebWorker API into our Liquid.js framework, we present how to create a pool of devices sharing their CPU processing capabilities according to different policies.}, keywords = {Edge Computing, Horizontal Offloading, liquid software, liquid.js, WebWorkers}, doi = {https://doi.org/10.13052/jwe1540-9589.17672}, url = {https://www.riverpublishers.com/journal_read_html_article.php?j=JWE/17/7/2}, author = {Andrea Gallidabino and Cesare Pautasso} } @conference {2019:icwe:liquid, title = {Multi-device Adaptation with Liquid Media Queries}, booktitle = {19th International Conference on Web Engineering (ICWE 2019)}, year = {2019}, month = {June}, pages = {474-489}, publisher = {Springer}, organization = {Springer}, address = {Daejeon, Korea}, abstract = {The design of responsive Web applications is traditionally based on the assumption that they run on a single client at a time. Thanks to CSS3 media queries, developers can declaratively specify how the Web application UI adapts to the capabilities of specific devices. As users own more and more devices and they attempt to use them to run Web applications in parallel, we propose to extend CSS media queries so that they can be used to adapt the UI of liquid Web applications while they are dynamically deployed across multiple devices. In this paper we present our extension of CSS media queries with liquid-related types and features, allowing to detect the number of devices connected, the number of users running the application, or the role played by each device. The liquid media query types and features defined in this paper are designed and suitable for liquid component-based Web architectures, and they enable developers to control the deployment of individual Web components across multiple browsers. Furthermore we show the design of liquid media queries in the Liquid.js for Polymer framework and propose different adaptation algorithms. Finally we showcase the expressiveness of the liquid media queries to support real-world examples and evaluate the algorithmic complexity of our approach.}, keywords = {complementary view adaptation, liquid software, liquid web application, liquid.js, media queries, multi-device adaptation, responsive user interface}, doi = {10.1007/978-3-030-19274-7_33}, author = {Andrea Gallidabino and Cesare Pautasso} } @conference {2018:icwe:liquid, title = {Decentralized Computation Offloading on the Edge with Liquid WebWorkers}, booktitle = {18th International Conference On Web Engineering (ICWE 2018)}, year = {2018}, month = {June}, publisher = {Springer}, organization = {Springer}, address = {C{\'a}ceres, Spain}, abstract = {Liquid Web applications seamlessly flow across any kind of device ranging from powerful desktop and laptop devices to smaller devices, such as tablets, smart phones or any device capable of running a Web browser. In this context, there is the opportunity to reduce the execution time of CPU-intensive tasks or limit their energy consumption by offloading them across the set of machines running the liquid Web application. To do so, in this paper we present Liquid WebWorkers, which build upon the standard HTML5 WebWorker API and transparently offload the task execution to other devices and manage the corresponding data transfer. This way, Web developers can reuse their existing WebWorker scripts without any changes. We present how to create a pool of paired devices and compare different policies for choosing the target device that have been implemented in the Liquid.js framework.}, keywords = {liquid software, offloading}, author = {Andrea Gallidabino and Cesare Pautasso} } @conference {www2018:liquidjs, title = {The Liquid User Experience API}, booktitle = {The Web Conference (WWW2018)}, year = {2018}, month = {April}, pages = {767-774}, publisher = {ACM}, organization = {ACM}, address = {Lyon, France}, abstract = {In the past years the average number of Web-enabled devices owned by each user has significantly increased. Liquid Web applications enable users to take advantage of all their devices sequentially to migrate their running applications across them or simultaneously when running different views of the same application at the same time on each device. Developers of liquid Web application need to control how to expose the liquid behavior of their cross-device Web applications to the users. To do so, they can use the API of Liquid.js we describe in this paper. Liquid.js is a framework for building component-based rich Web applications which run across multiple Web-enabled devices. The framework is based on technologies such as Polymer, WebRTC, WebWorkers, PouchDB and Yjs. Liquid.js helps to build decentralized Web applications whose components can seamlessly flow directly between Web browsers carrying along their execution state. The Liquid.js API gives developers fine-grained control over the liquid user experience primitives, device discovery, and the lifecycle of liquid Web components. }, keywords = {API, liquid software, web components}, doi = {10.1145/3184558.3188738}, author = {Andrea Gallidabino and Cesare Pautasso} } @article {2017:jwe:liquid, title = {Architecting Liquid Software}, journal = {Journal of Web Engineering}, volume = {16}, year = {2017}, month = {September}, pages = {433-470}, abstract = {The Liquid Software metaphor refers to software that can operate seamlessly across multiple devices owned by one or multiple users. Liquid software applications can take advantage of the computing, storage and communication resources available on all the devices owned by the user. Liquid software applications can also dynamically migrate from one device to another, following the user{\textquoteright}s attention and usage context. The key design goal in Liquid Software development is to minimize the additional efforts arising from multiple device ownership (e.g., installation, synchronization and general maintenance of personal computers, smartphones, tablets, home and car displays, and wearable devices), while keeping the users in full control of their devices, applications and data. In this paper we present the design space for Liquid Software, categorizing and discussing the most important architectural dimensions and technical choices. We also provide an introduction and comparison of two frameworks implementing Liquid Software capabilities in the context of the World Wide Web. }, keywords = {design space, liquid software, multi-device programming, software architecture}, doi = {10.26421/JWE16.5-6}, url = {http://www.rintonpress.com/journals/jweonline.html$\#$v16n56}, author = {Andrea Gallidabino and Cesare Pautasso and Tommi Mikkonen and Kari Systa and Jari-Pekka Voutilainen and Antero Taivalsaari} } @conference {liquidjs:2017:icwe, title = {Maturity Model for Liquid Web Architectures}, booktitle = {17th International Conference on Web Engineering (ICWE2017)}, volume = {10360}, year = {2017}, month = {June}, pages = {206-224}, publisher = {Springer}, organization = {Springer}, address = {Rome, Italy}, abstract = {Whenever a user connects with more that one single device, either sequentially or concurrently, to a liquid Web application, the application adapts to the set of connected devices and it is able to flow seamlessly between them following the user attention. As opposed to traditional centralised architectures, in which the data and logic of the application resides entirely on a Web server, Liquid software needs decentralised or distributed architectures in order to achieve seamless application mobility between clients. By decomposing Web application architectures into layers, following the Model View Controller design pattern, we define a maturity model for Web application architectures evolving from classical solid applications deployed on single devices, to fully liquid applications deployed across multiple Web-enabled devices. The maturity model defines different levels based on where the application layers are deployed and how they migrate or synchronize their state across multiple devices. The goal of the maturity model described in this paper is to understand, control and describe how Web applications following the liquid user experience paradigm are designed and also provide Web developers with a gradual adoption path to evolve existing Web applications.}, keywords = {liquid software, liquid web application, maturity model}, doi = {10.1007/978-3-319-60131-1_12}, author = {Andrea Gallidabino and Cesare Pautasso} } @conference {liquidjs:2016:wicsa, title = {On the Architecture of Liquid Software: Technology Alternatives and Design Space}, booktitle = {13th Working IEEE/IFIP Conference on Software Architecture (WICSA 2016)}, year = {2016}, month = {April}, address = {Venice, Italy}, abstract = {The liquid metaphor refers to software that operates seamlessly across multiple devices owned by one or multiple users. Liquid software architectures can dynamically deploy and redeploy stateful software components and transparently adapt them to the capabilities of heterogeneous target devices. The key design goal in liquid software development is to minimize the efforts that are related to multiple device ownership (e.g., installation, synchronization and general maintenance of personal computers, smartphones, tablets, home displays, cars and wearable devices), while keeping the users in full control of their devices, applications and data. In this paper we present a design space for liquid software, categorizing and discussing the most important architectural issues and alternatives. These alternatives represent relevant capabilities offered by emerging technologies and deployment platforms that are then positioned and compared within the design space presented in the paper.}, keywords = {design space, liquid software, liquid.js}, author = {Andrea Gallidabino and Cesare Pautasso and Ville Ilvonen and Tommi Mikkonen and Kari Systa and Jari-Pekka Voutilainen and Antero Taivalsaari} } @conference {liquidjs:2016:cbse, title = {Deploying Stateful Web Components on Multiple Devices with Liquid.js for Polymer}, booktitle = {19th International ACM Sigsoft Symposium on Component-Based Software Engineering (CBSE 2016)}, year = {2016}, month = {April}, pages = {85-90}, address = {Venice, Italy}, abstract = {Nowadays, the average users owns two or more Web-enabled devices (smart phones, personal computers and tablets), while more are coming: watches, cars, glasses. While responsive Web applications can adapt to the specific device (e.g., screen size or input method) on which they are deployed, they only provide limited support when one user connects from more than one device at the same time. In this paper we present Liquid.js for Polymer, a framework whose goal is to support developers that need to build liquid Web applications taking full advantage of multiple heterogeneous devices. It extends emerging Web components standards to enable the liquid user experience, whereby any device can be used sequentially or concurrently with applications that can roam from one device to another with no effort required by users controlling them. This way, users do not need to stop and resume their work on their Web application as they switch devices. Developers using Liquid.js do not need to worry about the underlying connectivity, pairing and synchronization issues of their stateful Web components. }, keywords = {liquid software}, author = {Andrea Gallidabino and Cesare Pautasso} } @demo {liquidjs:2016:www, title = {The Liquid.js Framework for Migrating and Cloning Stateful Web Components across Multiple Devices}, year = {2016}, month = {April}, pages = {183-186}, publisher = {ACM}, address = {Montreal, Canada}, abstract = {We are heading toward an era in which users own more than one single Web-enabled device. These devices range from smart phones, tablets and personal computers to smart Web-enabled devices found in houses and cars. The access mechanisms and usage patterns of Web applications are changing accordingly, as users interact more and more with Web applications through all their devices, even if the majority of Web applications are not ready to offer a good user experience taking full advantage of multiple devices. In this demonstration we introduce Liquid.js, a framework whose goal is to enable Web developers to take advantage of multiple heterogeneous devices and offer to their users a liquid user experience, whereby any device can be used sequentially or concurrently with Web applications that can effortlessly roam from one device to another. This way, as highlighted in the demonstration users do not need to stop and resume their work on their Web application as they migrate and clone them across different devices. The demo will also show how developers can easily add such liquid behavior to any Polymer Web component.}, keywords = {demo, liquid software, liquid.js, web components}, url = {http://www2016.net/proceedings/companion/p183.pdf}, author = {Andrea Gallidabino and Cesare Pautasso} } @inproceedings {icwe:2015:rmc:wls, title = {Mashup Development with Web Liquid Streams}, year = {2016}, pages = {98-117}, publisher = {Springer}, address = {Rotterdam, The Netherlands}, abstract = {Web services such as Twitter and Facebook provide direct access to their streaming APIs. The data generated by all of their users is forwarded in quasi-real-time to any external client requesting it: this continuous feed opens up new ways to create mashups that differ from existing data aggregation approaches, which focus on presenting with multiple widgets an integrated view of the data that is pulled from multiple sources. Streaming data flows directly into the mashup without the need to fetch it in advance, making it possible to exchange data between mashup components through streaming channels. In this challenge submission we show how streaming APIs can be integrated using a stream processing framework. Mashup components can be seen as stream operators, while the mashup can be defined by building a streaming topology. The mashup is built with \wls, a dynamic streaming framework that takes advantage of standard Web protocols to deploy stream topologies both on Web servers and Web browsers.}, keywords = {mashup development, rapid mashup challenge, web liquid streams}, author = {Andrea Gallidabino and Masiar Babazadeh and Cesare Pautasso} } @conference {lisa:2015:esocc, title = {Decentralized Stream Processing over Web-enabled devices}, booktitle = {4th European Conference on Service-Oriented and Cloud Computing}, volume = {9306}, year = {2015}, month = {September}, pages = {3-18}, publisher = {Springer}, organization = {Springer}, address = {Taormina, Italy}, keywords = {liquid software, stream processing}, doi = {10.1007/978-3-319-24072-5_1}, author = {Masiar Babazadeh and Andrea Gallidabino and Cesare Pautasso} } @conference {lws:icwe:2015, title = {Liquid Stream Processing across Web browsers and Web servers}, booktitle = {15th International Conference on Web Engineering (ICWE 2015)}, year = {2015}, month = {June}, pages = {24-33}, publisher = {Springer}, organization = {Springer}, address = {Rotterdam, NL}, abstract = {The recently proposed API definition WebRTC introduced peer-to-peer real time communication between Web browsers, allowing streaming systems to be deployed on browsers in addition to traditional server-side execution environments. While streaming applications can be adapted to run on Web browsers, it remains difficult to deal with temporary disconnections, energy consumption on mobile devices and a potentially very large number of heterogeneous peers that join and leave the execution environment affecting the quality of the stream. In this paper we present the decentralized control approach followed by the Web Liquid Streams (WLS) framework, a novel framework for streaming applications running on Web browsers, Web servers and smart devices. Given the heterogeneity of the deployment environment and the volatility of Web browsers, we implemented a control infrastructure which is able to take operator migration decisions keeping into account the deployment constraints and the unpredictable workload.}, keywords = {liquid software, stream processing, web liquid streams}, doi = {10.1007/978-3-319-19890-3_3}, author = {Masiar Babazadeh and Andrea Gallidabino and Cesare Pautasso} }