Declarative Assembly of Web Applications from Predefined Concepts
Total Page:16
File Type:pdf, Size:1020Kb
Declarative assembly of web applications from predefined concepts The MIT Faculty has made this article openly available. Please share how this access benefits you. Your story matters. Citation Perez De Rosso, Santiago et al. "Declarative assembly of web applications from predefined concepts." Proceedings of the 2019 ACM SIGPLAN International Symposium on New Ideas, New Paradigms, and Reflections on Programming and Software (Onward! ’19), Athens, Greece, Association for Computing Machinery, 2019. © 2019 Association for Computing Machinery As Published http://dx.doi.org/10.1145/3359591.3359728 Publisher ACM Press Version Author's final manuscript Citable link https://hdl.handle.net/1721.1/126599 Terms of Use Creative Commons Attribution-Noncommercial-Share Alike Detailed Terms http://creativecommons.org/licenses/by-nc-sa/4.0/ Declarative Assembly of Web Applications from Predefined Concepts Santiago Perez De Rosso Daniel Jackson Maryam Archie MIT CSAIL MIT CSAIL MIT CSAIL Cambridge, MA, USA Cambridge, MA, USA Cambridge, MA, USA [email protected] [email protected] [email protected] Czarina Lao Barry A. McNamara III MIT CSAIL MIT CSAIL Cambridge, MA, USA Cambridge, MA, USA [email protected] [email protected] Abstract Keywords application development, web applications, con- A new approach to web application development is pre- cepts, design, software design, modularity sented, in which an application is constructed by configuring ACM Reference Format: and composing concepts drawn from a catalog developed by Santiago Perez De Rosso, Daniel Jackson, Maryam Archie, Czarina experts. Lao, and Barry A. McNamara III. 2019. Declarative Assembly of A concept is a self-contained, reusable increment of func- Web Applications from Predefined Concepts. In Proceedings of the tionality. Each concept includes both front-end and back-end 2019 ACM SIGPLAN International Symposium on New Ideas, New functionality, and exports a collection of components—full- Paradigms, and Reflections on Programming and Software (Onward! stack GUI elements, backed by application logic and database ’19), October 23–24, 2019, Athens, Greece. ACM, New York, NY, USA, storage. 15 pages. https://doi.org/10.1145/3359591.3359728 To build an app, the developer imports concepts from the catalog, tunes them to fit the application’s particular needs via configuration variables, and links concept components 1 Introduction together to create pages. Components of different concepts 1.1 Motivation may be executed independently, or bound together declara- As a user, you might have noticed the fundamental similari- tively with dataflows and synchronization. The instantiation, ties between the many applications you use on a day-to-day configuration, linking and binding of components is allex- basis. Maybe it was the day you were scrolling through your pressed in a simple template language that extends HTML. Facebook news feed and then through your Twitter feed; or The approach has been implemented in a platform called giving a 5-star review to a restaurant on Yelp, and then to Déjà Vu, which we outline and compare to conventional a book on Amazon. And just as you, as a user, experience web application architectures. We describe a case study in the same rating concept in different variants in multiple ap- which a collection of applications previously built as team plications, so the developers of those applications are, for projects for a web programming course were replicated in the most part, implementing that concept afresh as if it had Déjà Vu. Preliminary results validate our hypothesis, sug- never been implemented before. gesting that a variety of non-trivial applications can be built In each of these cases, the developer may be implementing from a repository of generic concepts. something slightly different: a rating of a post in one case, CCS Concepts • Software and its engineering → Ab- and of a user in another. The premise of this paper, however, straction, modeling and modularity; Organizing princi- is that these are merely instantiations of the same generic ples for web applications; Very high level languages; Modules / concept, and that if this genericity could be captured, ap- packages; Designing software. plication development could be recast as a combination of pre-existing concepts in novel ways. This might then allow Onward! ’19, October 23–24, 2019, Athens, Greece applications to be assembled with much less effort, since the © 2019 Copyright held by the owner/author(s). Publication rights licensed core functionality of the individual concepts would not need to ACM. to be repeatedly rebuilt. This is the author’s version of the work. It is posted here for your personal Our paper shows how this can be done in the context use. Not for redistribution. The definitive Version of Record was published in of a new platform called Déjà Vu. An application is con- Proceedings of the 2019 ACM SIGPLAN International Symposium on New Ideas, New Paradigms, and Reflections on Programming and Software (Onward! ’19), structed by assembling concepts that are implemented as October 23–24, 2019, Athens, Greece, https://doi.org/10.1145/3359591.3359728. reusable, full-stack modules. The assembly requires no pro- cedural code: concept components are glued together by Onward! ’19, October 23–24, 2019, Athens, Greece Santiago Perez De Rosso, Daniel Jackson, Maryam Archie, Czarina Lao, and Barry A. McNamara III declarative bindings that ensure appropriate synchroniza- Low-Code Tools. A third option is to use a low-code devel- tion and dataflow. These bindings are expressed in a simple opment platform (e.g., Microsoft Power Apps5), or one of the HTML-like template language, augmenting conventional lay- many tools and languages for end-user programming of data- out declarations that determine which user interface widgets centric apps (e.g., [19, 30]). These tools typically offer a visual from which concepts are used, and how they are placed on interface and domain-specific languages to specify a schema, the page. The net result, as we demonstrate through a case queries, updates, and views. For standard CRUD (create- study, is that fairly complex applications can be built with read-update-delete) functionality, these platforms can work little effort. well, and they allow arbitrary customization of queries and updates (which our Déjà Vu platform does not). Code for 1.2 Building Web Apps: The Status Quo handling the mechanics of GUI elements, data storage, server Suppose you wanted a simple clone of Hacker News1, called requests, etc., is provided and hidden, and this is a great help. Slacker News (SN), in which registered users can post links, But unlike Déjà Vu, which provides implementations of rich comment on posts, and upvote posts or comments. How behavior, a low-code approach will still require each new would you build such an app? concept to be implemented anew. Moreover, functionality that is not expressible in the language—because it involves General-Purpose Tools. You might use general-purpose pro- some algorithmic complexity, or a more complex user in- gramming languages, coupled with a web framework, some terface widget—must be provided by pre-built plug-ins. For web libraries and a database. Even if you are an advanced web example, SN might require posts to be recommended to users developer, it would take days to build such an app. You could based on the preferences they expressed in their upvoting perhaps save time by using full-stack components provided of other posts; this might be provided as a machine learning 2 by a web API service. For example, you could use Disqus to plug-in. As with CMSs, such plug-ins can only be composed implement comments. If the commenting functionality were in ad hoc ways, and may require complex glue code. isolated from the rest of the app’s functionality, this could be done with very little effort (usually by just including some 1.3 Déjà Vu’s Approach JavaScript and writing a little HTML). But SN intertwines Concept as Modules. In our approach, concepts are the commenting with upvoting and posting: you want Disqus’s building blocks of applications. A concept is a self-contained, users to be the same users that can post links, and you want reusable increment of functionality that is motivated by a users to be able to upvote comments as well as posts. Even purpose defined in terms of the needs of an end user[17]. if the API were flexible enough for you to be able to pull For example, a comment concept manages the creation and off such an integration, it would likely require you toopen display of comments, and a scoring concept lets users as- up the full-stack black box, and write server-side code. For sign scores to items. Concepts are more fine-grained than example, you might need to create a notification hook so traditional plug-ins or microservices, which would likely, for that your app is notified when a comment is created, so that example, treat all the concepts associated with user review- it can be given an initial score. ing (such as scoring, comments and recommendations) as Content Management Systems. Another option would be part of a single plug-in or service. to use a content management system (CMS) such as Drupal3 Full-Stack Modules. A Déjà Vu application is a set of con- or WordPress4. A CMS supports the creation of websites cept instances that run in parallel. Each instance is a full- whose functionality primarily involves reading and writing stack service in its own right, with front-end GUI compo- content. Many CMSs provide a large suite of plug-ins that nents, a back-end server and data storage, and all the code allow a website to be extended with new features. Like our necessary to coordinate them.6 By default, these services concepts, these plug-ins are full-stack, and importing and run entirely independently of one another, in complete iso- configuring them is usually straightforward.