Topiary: Re-designing End-to-End Web Application Development by Sze Nga Wong B.S., M.I.T. 2018 Submitted to the Department of Electrical Engineering and Computer Science in partial fulfillment of the requirements for the degree of Master of Engineering in Electrical Engineering and Computer Science at the MASSACHUSETTS INSTITUTE OF TECHNOLOGY June 2019 ○c Massachusetts Institute of Technology 2019. All rights reserved. Author................................................................ Department of Electrical Engineering and Computer Science May 24, 2019 Certified by. Daniel Jackson Professor Thesis Supervisor Accepted by . Katrina LaCurts Chair, Master of Engineering Thesis Committee 2 Topiary: Re-designing End-to-End Web Application Development by Sze Nga Wong Submitted to the Department of Electrical Engineering and Computer Science on May 24, 2019, in partial fulfillment of the requirements for the degree of Master of Engineering in Electrical Engineering and Computer Science Abstract In this thesis, I built a tool for end-to-end web development, named Topiary, which experiments with a multi-table design to model the interactions between user interface components and the backend database. The main features of Topiary include a flat relational data model, a multi-table view with support for inter-table dependency, data compartmentalization via separate developer and user views, as well as flexible styling options. The frontend programming language is Javascript and in particular the React library, whereas the backend database is Firebase. Multiple sample apps have been built with Topiary to determine how powerful the tool is in building general applications for daily use. Thesis Supervisor: Daniel Jackson Title: Professor 3 4 Acknowledgments I would first like to thank my advisor Daniel Jackson for the inspiration andun- failing guidance in this project and beyond. Prof. Jackson deeply cares about the professional and personal development of his students. I would also like to thank my teammates Sophie Mori and Yang Yan for the helpful discussion and collaboration along the way. Last but not least, I express my gratitude towards my family and friends for showering me with support and encouragement. 5 6 Contents 1 Introduction 13 1.1 An Overview of Existing Spreadsheet Products . 14 1.2 Misalignment with Common User Cases of Spreadsheets . 15 1.3 Connecting Spreadsheets to Web Applications . 15 1.4 Main Objectives of Topiary . 16 2 A Quick Demo of Topiary 17 3 Data Model 23 3.1 Hierarchical Structuring of an Application . 23 3.2 Horizontal Object Layout . 24 3.2.1 Table, Row and Column Identifiers . 25 3.2.2 Table and Column Names . 25 3.3 Column Typing . 26 3.3.1 The String and Number Types . 26 3.3.2 The List Type . 26 3.3.3 The Button Type . 27 3.3.4 The Dropdown Type . 27 3.3.5 The Formula Type . 28 3.3.6 The HTML Type . 28 4 Software Tools in Topiary 29 4.1 Frontend Development . 29 7 4.2 Backend Database . 30 4.3 Connecting React and Firebase . 32 5 Multi-application and Multi-table View in Topiary 35 5.1 The Design View Versus the User View . 35 5.2 The Permission System . 36 5.3 User-parameterized Data Versus Public Data . 39 5.4 An Example of Design View Versus User View . 41 5.5 Multi-table View . 42 6 Formula Language API 45 6.1 Pre-binding of Table and Column Names . 45 6.2 Supported Functions in the Formula Language API . 46 6.3 Formula Tables . 49 6.4 Going Through the Shopping Cart Example . 50 7 Application Styling in Topiary 53 7.1 Styling Pages, Columns and Cells . 53 7.2 Styling Options . 54 8 Sample Web Applications Built with Topiary 57 8.1 Shopping Cart . 57 8.2 Time Tracker . 58 8.3 Room Reservation System . 60 9 Conclusion and Future Work 63 8 List of Figures 2-1 A demo of the design view of the shopping cart application . 18 2-2 A demo of the user view of the shopping cart application . 18 2-3 User view of the shopping cart application, after inputting quantity . 19 2-4 User view of the shopping cart application, after a merchandise has been added . 19 2-5 Design view of the shopping cart application, after a merchandise has been added . 20 2-6 Design view of the shopping cart application, after a merchandise has been added . 20 2-7 Design view of the shopping cart application, after a merchandise has been added . 21 4-1 The software tools used in implementing Topiary . 29 5-1 The location of the permission setting in the design view . 39 5-2 The location of the public vs user-parameterized data setting in the design view . 41 5-3 The design view of the shopping cart example . 42 5-4 The user view of the shopping cart example . 42 6-1 The Products and All_purchase_records tables in the design view . 51 6-2 The Cart table in the design view . 52 6-3 The Subtotal table in the design view . 52 7-1 Cell styling in the design view . 54 9 7-2 The user view of the shopping cart example after styling . 55 8-1 The user view of the shopping cart application . 58 8-2 The user view of the time tracker application . 59 8-3 The user view of the room reservation system application . 60 10 List of Tables 3.1 The basic layout of the Products table . 24 3.2 The basic layout of the Cart table . 24 3.3 The basic layout of the Subtotal table . 24 11 12 Chapter 1 Introduction A web application is a client-server computer program which stores data in remote servers and can be run in a web browser by the client. With the rapid expansion of the World Wide Web, web applications are now playing a more important role in the lives of many people, and quick development cycles are desired by application builders. As a result, instead of coding up the entire application using pure Javascript, HTML or CSS, application builders often utilize existing libraries and tools to simplify the coding process. A well-designed end-to-end web application development tool can thus be of great help to them. In particular, the spreadsheet model is chosen since tabular data are commonplace in webpages. For example, a shopping cart can be described as a table with each row representing a merchandise and columns comprising its names, description, prices, quantities and subtotals. Furthermore, spreadsheets gives users the privilege of example-driven programming. Users can use visual tools with sample data to design both the inbuilt logic and the look of spreadsheets. This is in contrast with low-level programming which hides away many of the interactions within the data. Altogether, Topiary is an end-to-end web development tool built with the incorporation of the spreadsheet model. Chapter 2 describes the data model of Topiary, including the hierarchical structure of an application, the notion of horizontal object layout, as well as column typing. Chapter 3 introduces the software tools used in the implementation of Topiary, namely Javascript and its libraries React and Re-base, as well as Firebase. The 13 reasoning to use each tool is also elaborated. Chapter 4 dives into the multi-application view in Topiary, namely the distinction between the design view and the user view, and various tools that application builders can utilize for a flexible user view. Chapter 5 describes the formula language API of Topiary and demonstrates its flexibility and comprehensiveness through examples. Chapter 6 goes through the styling options that application builders enjoy with Topiary. Chapter 7 presents multiple sample applications built with Topiary. Chapter 8 concludes the work done on Topiary, as well as suggests potential future work. 1.1 An Overview of Existing Spreadsheet Products Spreadsheets are interactive computer applications for storing and analyzing data in tabular form. When one thinks of spreadsheets, the immediate examples that come up may be Microsoft Excel, Google Sheets or Apple Numbers, with Microsoft Excel having a leading market share with over 750 million users worldwide. While each of these spreadsheet products offers the basic functionalities to handle data in various ways, they appeal to different spreadsheet users. Microsoft Excel is the most versatile; for example it offers a multitude of pre-loaded formulas and functions that arenot fully present in Google Sheets nor Apple Numbers. On the other hand, Google Sheets allows its users to collaborate on a document in real-time, and offers the abilities to use many of other Google products, including Google Translate, within Sheets. Last but not least, Apple Numbers, being the newest of the three, provides a simpler interface that makes it much easier to create spreadsheets with elaborate visual impact. 14 1.2 Misalignment with Common User Cases of Spread- sheets While spreadsheets offer features like creating charts, they are in fact often usedas tables; each column contains data of the same type, and each row contains a se- quence of data for an individual instance. However, a spreadsheet does not represent the notion of a table very well; rather it treats each cell individually, and as a con- sequence there is no relational operation to manipulate the data in an intuitive and effective manner. Therefore, an objective when designing Topiary is to correct this misalignment between data representation and manipulation. 1.3 Connecting Spreadsheets to Web Applications Often people complain about why building a web application is so hard, and even a simple event scheduler with basic user interface design is not a trivial project to accomplish. Organizations in need of a web application service usually turn to one of the following options: hire software developers to build the application (which can be costly), use some off-the-shelf product (which may not cater to the exact needs of the organizations), or use a combination of Google Forms, emails and/or other popular existing services (which may require manual processing that can otherwise be eliminated).