Dartmouth College Dartmouth Digital Commons Dartmouth College Undergraduate Theses Theses and Dissertations 5-23-2016 Monarch: A Reimagined Browser for the Modern Web Daniel R. Whitcomb Dartmouth College Follow this and additional works at: https://digitalcommons.dartmouth.edu/senior_theses Part of the Computer Sciences Commons Recommended Citation Whitcomb, Daniel R., "Monarch: A Reimagined Browser for the Modern Web" (2016). Dartmouth College Undergraduate Theses. 107. https://digitalcommons.dartmouth.edu/senior_theses/107 This Thesis (Undergraduate) is brought to you for free and open access by the Theses and Dissertations at Dartmouth Digital Commons. It has been accepted for inclusion in Dartmouth College Undergraduate Theses by an authorized administrator of Dartmouth Digital Commons. For more information, please contact [email protected]. DARTMOUTH COLLEGE UNDERGRADUATE SENIOR THESIS Monarch: A Reimagined Browser for the Modern Web Daniel Whitcomb ‘16 supervised by Dr. Charles PALMER May 23, 2016 DARTMOUTH COMPUTER SCIENCE TECHNICAL REPORT TR2016-799 1 Abstract—Web browsers have become fast and flexible enough to allow web applications to be viable competition to native applications. Now that the web as a platform has become formidable, it has changed the types of web applications being produced, and the ways in which native applications are being built. This observation leads me to propose the concept of the App Web - a category of the world wide web which increases productivity - and its place in the current application experience. Monarch is a system designed to merge the advantages of native and web applications, improving experiences for both the developer and the user. F 1 INTRODUCTION for an ideal platform which would have the HE world wide web is one of the most advantages of both systems. Finally, we intro- T pervasive technologies in the modern day. duce Monarch, an web application browser and A large portion of the software being developed launching platform. Monarch aims to meet the today is based on web services. It is now the proposed goals of the ideal platform and bring standard to produce a mobile, web, and desk- together web and native applications. top version for every internet-based applica- tion. This can be a costly endeavor for many companies, and due to the recent advances in 2 THE APP WEB the speed and abilities of web technologies, A mix of new W3C APIs and a boom in it is common to forgo a desktop application JavaScript-centric web page development in the as the web browser can serve as a sufficient last 7 years lead to a shift in how web sites are platform. It is difficult to argue, however, that designed, and allowed the web application to the web browser offers a more productive and be an increasingly serious paradigm. The App integrated user experience than a native appli- Web is the category of web sites that can be cation. By focusing on web applications, ven- defined as a web application. dors are sacrificing the substantially superior Technically, web application refers to a site desktop environment: a separated application which uses logic to provide dynamic func- icon, menu system, and access to native APIs. tionality. This logic may be executed on the This is most important for vendors which are server, client, or both. These applications can producing site web applications - a type of web also sometimes save user’s data, handle interac- site that enable its users to be more productive tions between different users, and process data, on a certain task. Web applications represent a etc. Under this definition, almost all modern specific subset of website, which we call the web sites could technically be considered web App Web. This new category requires the us- applications. ability of a native application, but by nature, is usually delivered via a web browser. In this work, we will use a narrower defini- We will discuss the specifics of App Web tion because the traditional characteristics of a sites, and their place within a user’s workflow. web application, and the technologies that run Then we will review the differences between most sites have become practically ubitquitous native and web applications, and propose goals across the web. Rather than a technically- driven definition, we will utilize a content- driven defintion. A web application is a site • Daniel Whitcomb is an undergraduate student at Dartmouth College in the Computer Science Department. This work is the which is function-driven; the site is associated final product of his undergraduate thesis. with verbs like send, create, play, and manage. • The author was advised by Charles C. Palmer. Without the web application, the user would 2 lose some amount of productivity, or the utli- Native and web applications, while their tization of some function. Examples under this differences are shrinking, still have their own definition include: Google Photos [1], Trello [2], advantages and disadvantages. These differ- or WolframAlpha [3]. These differ from content- ences continue to determine the types of ap- driven sites which have the goal of providing plications that are developed, and which users content to the user. Users generally don’t visit choose to use. The type of application we these sites with the goal of a function, but are considering will by default have a server- rather to experience some kind of content. Sites side system accompanying it. The differences like Buzzfeed [4], The New York Times [5], or between back-end systems will not be dis- Facebook [6] fall under this definition. cussed here because they generally don’t affect To be fair, there are sites with features that whether a native or web application is built. allow them to fall under both definitions. For our purposes, though, a strict definition is not 3.1 Development required. In later sections, this definition will The major advantage of web technologies is serve as a guide on how to approach the place they provide a system agnostic medium for these applications have in a user’s workflow. building and running applications. The prob- The App Web is functionally different from lems with porting between platforms and op- the content-based web, and the purpose of this erating systems are delegated to browser engi- work is to argue and show that the differences neers, while the web is a standardized platform should be accounted for by the methods with and developers can trust - to a high degree - which they are accessed. The goal of the App that their applications will run the same regard- Web should be to become so tightly integrated less of operating system or browser. This makes with the native operating system that users will it easy to see why developers would continue to see no discernable difference between native choose to build web-based applications, rather applications and web-based applications. than native applications. Web-based apps can have a unified codebase. This avoids updating and porting issues, which can more easily occur 3 NATIVE VS WEB across multiple codebases, and keeps interface and experience consistent across all users. The web browser, and its accompanying ren- Development speed is also a key difference dering technologies, has become an increas- between the two platforms. The web devel- ingly powerful platform. This allows vendors opment community has produced many types to create increasingly versatile and useful prod- of libraries that allow teams to increase de- ucts. The abilities of web technologies have velopment speed. JavaScript frameworks like narrowed the gap between itself and the native AngularJS [7] or React [8] pushed the pref- platform, making soley web-based applications ered development model toward a Model- a viable option for vendors. Companies cre- View-Controller pattern. These libraries gener- ating products which fit into the App Web ally automate much of the boilerplate code for must weigh the differences between the two developers, allowing them to focus on inter- platforms, as their products might fit well with action and business logic. Other web libraries both. similarly streamline page styling, networking, For the remainder of the paper, we will use and document manipulation each making a term native when refering to an application that web developer’s job significantly easier. is running within the user’s operating system - Native application development speed can and uses the operating system’s local APIs for be dependent on which platforms are being graphics, network, etc. The terms web technolo- supported. Development speed will decrease gies or web-based will refer to applications run as the number of supported platforms increase by classical browser technologies like HTML, because each will generally require different CSS, and JavaScript. systems for building user interfaces. 3 3.2 Features 3.4 User Experience Web technologies have a significant advantage Based on this, the primary advantage of build- over native apps in ease of development and ing a native application over a web-based one depolyment, but their abilities are highly lim- is feature richness and a stronger coupling with ited in comparison to native applications. Na- the host operating system. These advantages tive applications generally have access to every lead to a significant increase in the quality of feature and control the operating system has to user experience. Native applications can take offer. direct control over system menus, contextual Web processes are highly cordoned off from menus, and notifications. They have a perma- the operating system. There are many APIs nent presence on the user’s screen and have the browser implements that allow web pages an icon either in the Window’s task bar, or OS secure native access, but support is severly X’s dock. They can act as their own entities, limited compared to that of native applications.