Mavo Create: A WYSIWYG Editor for Mavo by Francesca Rose Cicileo 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 2018 ○c Massachusetts Institute of Technology 2018. All rights reserved. Author................................................................ Department of Electrical Engineering and Computer Science May 25, 2018 Certified by. David Karger Professor Thesis Supervisor Accepted by . Katrina LaCurts Chair, Master of Engineering Thesis Committee 2 Mavo Create: A WYSIWYG Editor for Mavo by Francesca Rose Cicileo Submitted to the Department of Electrical Engineering and Computer Science on May 25, 2018, in partial fulfillment of the requirements for the degree of Master of Engineering in Electrical Engineering and Computer Science Abstract Mavo Create provides the data storage and computation abilities of Mavo through the interface of a WYSIWYG (What-You-See-Is-What-You-Get) editor. Mavo extends HTML, providing attributes that one can use to set up data storage for a web applica- tion. This data can be created, amended, and populated into the web application use Mavo attributes. Further, Mavo provides expressions for performing computations on the data and visualizing the results of those computations in the Mavo application. One limitation of Mavo is that a user must know or become familiar with HTML in order to use Mavo. Mavo Create attempts to abstract away the programming part of using Mavo by providing a visual website editor that can be used to create Mavo applications. Mavo Create was built using GrapesJS, a WYSIWYG website tem- plate creation application. Mavo Create uses drag-and-drop HTML elements with WYSIWYG editing for styling and for adding Mavo capabilities. After creating the template of a Mavo application in Mavo Create, one can download source code and begin using his application. The goal of Mavo Create is to make the creation of Mavo applications accessible to people who do not know HTML or programming. Thesis Supervisor: David Karger Title: Professor 3 4 Acknowledgments I would like to thank my thesis supervisor, Professor David Karger, for his guidance and support with this thesis. I would also like to thank Ph.D. student Lea Verou for all of her support and technical help with this project. Thank you both for continuously meeting with me, brainstorming ideas, and guiding the development of this thesis. I thank the MIT EECS Department, Professor Patrick Henry Winston, and Pro- fessor Randall Davis for providing me with the Teaching Assistant positions that supported my work. 5 6 Contents 1 Introduction 11 1.1 Motivation . 11 1.2 Objective . 12 1.3 Target Users . 12 2 Background 13 2.1 Mavo . 13 2.1.1 Creating and Manipulating Data . 14 2.1.2 Computations with Data . 14 2.1.3 Data Storage . 15 2.2 Previous Work . 15 2.3 Research into Existing WYSIWYG Editors . 17 2.3.1 GrapesJS . 18 3 Interface Design 19 3.1 Creating Elements . 20 3.2 Navigating the Canvas . 21 3.3 Styling and Editing Elements . 22 3.4 Command Toolbar . 23 4 Implementation 27 4.1 Mavo Create Application . 27 4.2 Blocks . 28 7 4.3 Components and Traits . 28 4.4 Expressions . 30 4.5 Data Storage . 32 4.6 Completing the Mavo App . 33 5 User Study 35 5.1 Study Design . 35 5.1.1 Introduction . 36 5.1.2 Tutorial . 37 5.1.3 Timed Tasks . 37 5.1.4 Post-Study Interview . 38 5.2 Pilot Study . 40 5.3 Experiment and Results . 40 5.3.1 Participants . 41 5.3.2 Results and Interesting Findings . 41 5.4 Discussion . 43 6 Conclusion 45 6.1 Future Work . 45 8 List of Figures and Tables 2-1 Initial prototype of Mavo Create . 16 2-2 Interacting with the prototype Template display . 17 3-1 Mavo Create Editor . 19 3-2 Components of Mavo Create . 20 3-3 Editing Toolbar Views . 21 3-4 Mavo Storage Settings Modal . 23 3-5 Mavo Expressions Creation Modal with Popover Open . 24 3-6 Mavo Expressions Popover Opened from the Canvas . 24 5-1 Static Template for Tutorial Webpage . 36 5-2 Static Template for Timed Tasks Webpage . 38 5-3 User Study Tasks and Average Time to Task Completion (in minutes and seconds) . 39 9 10 Chapter 1 Introduction 1.1 Motivation There are many people who have no experience with programming or web develop- ment, but who have a need or desire to create a website. WYSIWYG (What-You- See-Is-What-You-Get) website-building tools are available that people can use freely or for purchase. Several such tools exist in the form of online or desktop applications. These tools allow users to visually create a website with their desired appearance. However, the capabilities of these WYSIWYG tools are usually limited to static web- sites without any database services. As a result, creating a website that allows the user to create, store, and manipulate data is not feasible with currently available tools. Mavo is an extension of HTML. It is a tool that allows users to create websites that store and manipulate data simply by adding attributes and text with certain syntax to standard HTML. Mavo allows people who do not know how to program in JavaScript, but are able to learn HTML, to create more interactive websites. There is no need to learn JavaScript to create a backend for the website; Mavo builds the data storage system for the user. For a person who cannot program in JavaScript and who does not want to take the time to learn HTML, current WYSIWYG editors cannot provide the same website functionalities that someone with HTML experience would be able to create using 11 Mavo. This thesis is focused on building and testing Mavo Create, a WYSIWYG tool for people with limited or no programming abilities to use in order to create Mavo applications. Mavo Create will extend an existing WYSIWYG editor, GrapesJS, to incorporate Mavo capabilities, allowing users to create Mavo applications. Traditional WYSI- WYG editors provide an interface between the user and HTML. Since Mavo is an extension to HTML, it is sensible and feasible to extend a WYSIWYG editor to also recognize Mavo syntax. Thus, Mavo Create will enable users to create Mavo applications using a WYSIWYG interface. 1.2 Objective The primary objective of Mavo Create is to allow users to create dynamic web ap- plications where they can add, manipulate, and perform calculations on data. Mavo Create aims to make this easy for users with little to no web development experience through a WYISIWYG editor interface. 1.3 Target Users Mavo Create is specifically targeted toward people with little to no web development background. The Mavo Create editor was build with the goal of having an intuitive interface to build web applications without the user being exposed to any code. The capabilities that Mavo provides are exposed in the editor in the form of various WYSIWYG tools, making Mavo Create a usable tool for web development novices. 12 Chapter 2 Background Mavo Create presents some of the core capabilities of Mavo to users in the form of a WYSIWYG editor. This section describes the Mavo language, research into existing WYSIWYG editors, and a description of a precursor prototype to this thesis. 2.1 Mavo Mavo[4] is a project currently being developed in the Haystack group at CSAIL (Computer Science and Artificial Intelligence Laboratory). One of the main goals of Mavo is to make it easier for people without JavaScript knowledge to create websites that can store and manipulate data. Currently, if a person wants to store, display, and manipulate data on his website, he must build some sort of backend service to correspond to the HTML front end of his website. This is an obstacle to the many people who can write HTML and CSS, but have no other programming experience in languages such as JavaScript. Mavo is a tool that extends HTML with certain attributes. These attributes allow users to implement data schemas simply by adding the attributes to their HTML code. Thus, Mavo makes building complex websites possible for people who do not know programming languages, but are able to learn HTML. 13 2.1.1 Creating and Manipulating Data One core component of Mavo is the property attribute. If an HTML element is given a property attribute, then, when in the editing mode of his Mavo app, a user can edit that element. The content of the element is stored. Another core piece of Mavo is the mv-multiple attribute. The mv-multiple attribute allows an element in a Mavo application to be repeatable. If an element has this attribute, and also has a property name, then when the user is editing his Mavo app through the Mavo app editing mode, he can click a button that will duplicate the element. The duplicate has the same HTML structure as the original element, but has no data in it. The user is left to fill in the data of the new element. Withthe mv-multiple attribute, the element assigned the attribute can be repeated as many times as desired by the user, each time producing a new empty template. Thus, the mv-multiple attribute allows for the creation of data collections that are then stored and can be later manipulated. Editable elements in a Mavo app each have some default component that is edited when in editing mode of the Mavo app. For text elements, such as a <p> element, the default is the content of the text element.