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: ://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 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. !

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 browser and A large portion of the 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 -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 development in the as the 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- , 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 , 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 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. without having to rely on a a separate medium - This limits the capabilities of web applications i.e. a web browser. Native applications also gen- when interacting with the user’s system, like erally don’t have to make network requests for accessing the file system or taking advantage new interface content, allowing them to have of OS components. The reduction a tighter and more responsive feel. This can of native features limits the capabilities a web- be taken into account in web-based systems by based application. W3C has been working to building single-page applications, which load increase the access web developers have to na- all of their interface upon loading. tive systems; recent APIs like fullscreen access [9], messaging between pages [10], and socket 3.5 Security and Privacy networking [11] show that there is a commit- Security on the web is an incredibly impor- ment to increasing web features, but many tant aspect of the platform. Many of the W3C major browsers have not yet implemented the standards are designed to user data from being numerous API specifications. Until an API has intercepted, and browser architecture reflects majority support, it will often go unused in pro- each vendor’s committment to security. In any duction codebases due to browser compatibility situation where data is being transferred over a issues. network, it substantially increases the security risks both in reality and in the mind of the user. Strong practical reasons as well as a mas- 3.3 Performance sive user demand for security have required Although still lacking in feature richness, web browsers to meet an incredible level of security. technologies - which once had serious speed In [14], the rendering system is disadvantages over native apps - have seen re- separated from the browser process and sand- cent improvements in JavaScript speeds as well boxed. From just the browser point of view, it as improved web APIs to support more inten- is a relatively secure application given proper sive work. Substantial photo and video editing, implemenation. CAD modeling, or game rendering were once The majority of web security problems stem too intensive for client-side processing, but new from poor development practices. In 2014, the standards like WebGL [12], which provides ac- most common web vulnerabilities stemmed cess a high-performance graphics library, have from errors in application code [15]. These vul- allowed for applications of web technologies nerabilities include: cross-site scripting attacks, to be realized. JavaScript performance has also SQL injection, sensitive data leakage, and cross- been greatly improved by new engines like site request forgery. If native applications are Chrome V8 [13] produced Google. These ad- moving data across a network, then they can vances have removed speed as an inhibitor to similarly be affected by network-related secu- the developer and user. rity flaws like SQL injection or man-in-the- 4 middle attacks. Exploring vulernabilities on a system. These sites would be able to produce an per-application basis would not provide a valid improved native-like interface, while keeping picture of the actual security of the platform, their web delivery scheme. but would rather reveal deficits in develop- ment practices. The only comparison we can make ia between the operating systems and 4.1 Requirements the browser, the advantages and disadvantages of which are also implemenation specific. Each The advantages and disadvantages of both ap- platform and its implementations have their plication schemes have been discussed. The own security flaws, known or unknown. proposed platform would have the following features and abilities:

3.6 Summary • The platform would support applications Each platform has significant advantages and written in web-based technologies like disadvantages. Web applications are best in HTML, CSS, and JavaScript to be universally terms of development speed, code simplicity, compatible across opereating systems. and near universal operating system compati- • The platform would provide secure ac- bility. They do not require installation or up- cess to operating system features like the dating from the user, and are easily accessed on taskbar/dock, menu control, and OS inter- any computer with a browser. face components. Native applications lead in terms of oper- • Applications on the platform would never ating system integration, allowing for a more need to be installed or updated, merely nav- fluid user experience and workflow than web igated to. browser tabs can provide. This advantage along with reduced loading times can be a significant enough reason to choose a native implementa- 4.2 Design tion over a web one. The success of a product ultimately depends on people wanting to use it, The applications will support web technologies, making user experience paramount. so it follows from a infrastructue perspective In 2011, Mokkonen and Taivalsaari de- that they continued to be served as such and scribed the race between native and web appli- viewable from within a web browser as well as cations as the “battle of the decade”[16]. They this new platform. Therefore, web browsers - a discussed the potential outcomes of each win- platform already optimized for processing the ning said battle. While the battle is not yet over, web - would be the most appropriate to meet the question we ask is why there needs to be a these requirements, especially because they are battle? already such a heavily used class of application. The web browser would be able to adapt its presentation of a page based on whether it is 4 PLATFORM GOALS a web app or is content focused. Web applica- We have discussed that the differences between tions would be opened as fully-featured native web and native applications have become min- applications - rendered by the browser - while imal. A platform which combined the ease, content-based sites could retain their current speed, and portabily enjoyed by web-based -bar model. apps, with the integration of a native applica- The web launcher - a combination browser tion, would resolve the primary disadvantages and application launcher - would make the of the two types. In this section we propose web the source of all content and applications. such a system. Rather than treating all equally, the An App Web site would benefit the most web launcher would allow the user to access all from a combined native-experience web-based content in the best possible manner. 5 5 EXISTING SYSTEMS 5.2 Native-like Interfaces

5.1 Adaptable Browsing While adaptive features have not been a topic of interest for browser vendors and web develop- Henricksen and Indulska [17] discussed the ers, creating a native-like experience has been a idea of adapting the browser to contextual major goal of both parties. was an early changes. They advocated for browsers to be investigator into this user-experience concept. able to adapt their interfaces to the sites they They developed a language called XUL (XML display. By using data like a user’s browsing User Interface Language) [23], which is a simple history, experience level, language setting and way of defining relationships between interface display size, it would produce a customized elements, especially toolbars, menus, and navi- experience for the user. They focused primarily gation buttons. At one point, many of Mozilla’s on the browser adapting to system data rather products were built with XUL. Mozilla also than page content. In 2003, Tenenbaum and included a feature within that allowed Caballero [18] filed a patent for a “Contextually sites to remotely load XUL documents [24], Adaptive Web Browser”. The opening of the allowing developers to quickly build naviga- patent’s abstract reads: tional systems for their sites that matched the A web browser’s layout, available features interface of the host operating system. Remote and tools are adapted to the instanta- XUL was eventually disabled in 2.0 due neous environment, without the use of to major security concerns. downloadable, up-loadable or resident pro- Two projects out of Mozilla Labs also grams, plug-ins or agents. pushed the concept forward. Prism [25] was a The patent describes adding buttons and other Firefox extension which allowed web sites to interface elements based on the contents of the be split out of the browser and be rendered in a page, and gives examples on how this might separate window. The site would accompanied be done on or . The by a desktop icon in the taskbar/dock as well. patent is cited by 114 other patents pertaining The basis of the extension was XULRunner [26] to browser interfaces, but the patent’s scope is - a program that compiles and renders XUL. too narrow and outdated for its owner to take Prism supported customized context menus, effective action in today’s courts. and a printing feature as well. Prism’s major The concept of an adaptable browser has disadvantage is that developers also had the been in circulation for much of the web’s exist- option to provide additional app features by nece. Unfortunately, most of the major browsers creating app bundles. These bundles had to be have largely not built this type of functionality downloaded and installed separately from the into their products. One example of a minor site, and the site could then load the bundle addition of adaptability is in the Android ver- with a custom HTML . Prism never reached sion of Google Chrome. Developers can add an a 1.0 release, the project was renamed WebRun- HTML tag to their site that sets the color of the ner [27], and Mozilla subsequently shutdown toolbar [19]. the project. Browsers do not tend to have a built-in con- Google produced a concept similar to Prism: tent adapatation systems. Vendors have gener- Chrome Apps [28]. Chrome Apps are a type of ally chosen to focus on making their products extension that install a small app bundle on the fast and secure. For example, many browsers user’s machine, and are built using web tech- have built-in systems fo phishing and malware nologies. The bundles are either held locally or detection [20] [21] [22], which notify the user if can be hosted by the publisher. Local installa- they are potentially navigating to a potentially tion allows the apps to be used in offline-mode, malicious site. Most adaptive browsing features and they are also able to autoupdate. Hosted browsers have built in are generally not meant applications still require the installation of a to increase the quality of the experience. small file that provides details about the app. 6 Chrome has expanded their reach by pro- much of the HTML5 standard defines rules for ducing the Embedded Framework browsers which aim to restrict the privleges of (CEF) [29]. The package modularizes the ren- untrusted code [35]. A hestitancy has existed in dering systems of Chromium Project - the open- regards to extending the privleges of JavaScript source project which Chrome originates from - because of the massive security risk it would and allows it be injected into other applications entail. Even so, W3C has been pushing forward to render and display web pages. CEF makes in defining new web APIs to provide secure it much simple for developers to integrate web access to low level functionality. Google and technologies into native applications. Data can Mozilla also experiment with custom web APIs be ferried between the CEF data structures and that are not meant for production use, but are native code. CEF allows a project with an al- intended as proofs-of-concept. ready existing web application to quickly build In order to allow for JavaScript to be given a native app and reuse much of their existing lower level control over the operating system, code. Companies like Evernote [30] and Spotify the most important task is to mitigate poten- [31] each have substantial web applications, but tial security risks. There is a history of pro- also publish native applications which use CEF. posed methods to do this. A group at The CEF API allows for extensive fine- proposed a device-local service [36] for mobile grained control over the rendering system, phones. A reported 52% of developers [37] in making it, by nature, more difficult to work 2013 were using HTML5 technology within mo- into products quickly. Electron [32] is a product bile applications. Site JavaScript can use Web- built by GitHub which abstracts much of the Sockets [11] to communicate with the device- complexity out of CEF, allowing development local service in order to access the native layer speed to be greatly increased. of the mobile device with a platform agnos- Another Mozilla Labs project called tic protocol. While they proposed the method Chromeless [27] was a combination of XUL specifically for mobile devices, there is no rea- and Prism. Chromeless is a platform that son this could not also be implemented on a allowed native applications to be built out desktop. This system allows native-level APIs of web technologies, with the intial concept to be quickly developed and maintained from a being to use web technologies to build a native standardized location. The authors did call the browser application. The system is very similar security of the system into question. Though to CEF and Electron, but never gained traction they implemented a handshake-like protocol the other two did. The source for Chromeless for the they do concede that us- is available on GitHub, but is listed as an ing sockets in this manner is still poking a archive project on the Mozilla . A project hole through the render process’s sandbox. It is similar to Chromeless was developed by Sun worth mentioning then that Chrome and other Microsystems in 2008 called [33]. browsers already use similar platform-based It is a JavaScript framework that gave pages a systems to implement the existing web APIs desktop-like environment for interaction. The that involves using IPC to communicate with environment had all the features of a desktop, render processes, also degrading the sandbox. as well as development capabilities. Rather Another Microsoft research group proposed than make the web seem native, Lively Kernel a system called Embassies [38], which is meant made a native environment within the web. to remedy the problem of puncturing holes in the render process by completely removing the render process from the local platform. They 5.3 Extending Web Features propose a pico-datacenter: a native container Web technoliges have generally been limited system that can only communicate with the in their access to the operating system primar- outside world via IP. It allows any stack to be ily for security reasons. Remote JavaScript is run on the user’s machine, while maintaining the source of major security concerns [34] and strong isolation thanks to its container model. 7 This is a huge advantage for developer free- Monarch is a browser and an application dom, and singular code-bases, but requi In this launcher. It contains all the normal features case, developers would have to send the tech of Chromium - a typical browser - but also stack along with their application, which can the advanced features of Monarch. By adding include a rendering platform for their product. the native application features to an existing Embassies also allows access to native view browser, it makes the browser the central lo- tools, allowing applications to use the operating cation for all their applications. system’s interface elements. Monarch uses two pieces of consistent vo- cabulary. The first is app mode: a page in app mode is opened as a native application, and dif- 6 MONARCH ferentiated from the UI of the regular browser. Monarch - for the butterfly - is a prototype The second is Monarch Dynamic Application or web launcher, and a novel solution to the MDA. An MDA is the name of the system native v. web “battle”. Monarch is a hybrid which opens, controls, updates, and closes a web browser and application launcher built for web page in app mode. Each individual site is Apple’s OS X operating system, which allows considered its own MDA. users to seemlessly open web sites as native applications. Users do not move through an 6.1.1 Navigation installation workflow, and apps open as soon There are two primary methods of opening an as they are navigated to. Monarch also contains MDA. The user may want to either open a URL a simple HTML API that allows developers to in an MDA directly, or open an existing tab in define menu structue and execution actions for an MDA. In order to open an MDA directly OS X’s menu bar. from a URL, a user simply types the desired URL into Monarch’s omnibox (search/address 6.1 Design bar) and an option in the suggestions drop- down menu will allow the URL to be opened Monarch is meant to bring the App Web closer directly as an MDA. By selecting the menu to a native experience, without sacrificing the item, the MDA is opened immediately. accessiblity and speed the web enjoys. Monarch The second method concerns already is a of the Chromium web browser [14], the opened web sites. There are three actions pos- open-source project that is the primary source sible that will convert an existing site into an of Google’s Chrome web browser. It is backed MDA. Monarch’s View menu in the menu bar by the rendering engine [39], as well as always has a Enter App Mode item. Selecting Google’s JavaScript engine, Chrome V8 [13]. this item will close the current tab and open its The rendering engine is responsible for loading URL in an MDA. Users can also select a similar web pages, parsing their HTML, and calculat- option by opening the context menu by right- ing how their appearance on the screen. The clicking on the page. The hotkey for this action JavaScript engine interprets a site’s JavaScript is Cmd + Shift + A. When opening an MDA code and works with the rendering engine to from an existing tab, the state of the page is enact changes to the not conserved, though this is a goal of a future (DOM), a data structure that manages the state implemenation. of the page. Monarch’s feature set was built on top of the Chromium and Blink source. Chromium was chosen as the base project 6.1.2 Native App beacuse it is a well known open-source project The native application is designed to seem like with extensive documentation. Chromium also a standalone application bundle. The main app has an OS X desktop app extension system [28] window is a regular rendering of the web page, that provides much of the basic infrastructure with the normal OS X window bar at the top. that Monarch is built upon. No browser interface items are present, and the 8 window gives no indication it has a relation to mdamenu has two useful attributes that can be the browser. assigned. The first is the title which defines The window is accompanied by an icon what will be displayed as the menu name. The appearing on the OS X dock. If Monarch has root menu does not need a title and it will not a cached for the MDA’s URL, then the be displayed. The second attribute is to denote favicon will be resized and used as the dock which menu at depth 1 of the tree corresponds icon. If Monarch does not have a cached icon to the MDA’s name. On all OS X menu bars, for the application, a full resolution custom icon the application’s name is the title of the first made specifcally for MDAs is used. menu. An MDA menu does not require this Finally, the developer has the option to de- menu to be defined in the tree structure, but fine the MDA’s menu bar structure. The app if the developer does want to define it, they can window has a customized menu as well, with add the app attribute to a mdamenu to set the four default menus - File, Edit, View, and Win- application’s title. dow - as well as a menu for the title of the MDA There are three attributes for mdamenuitem with its customary About and Quit options. De- elements. Menu items also have a title at- velopers can also define as many custom items tribute, which is the displayed name of the as they want. The HTML API allows developers menu option. Most importantly, they support to connect JavaScript expressions to these menu an action attribute, which can be set to any items, which allows users to interact with the valid JavaScript expression within the context page via an operating system interface. of the site’s main page. From these actions, MDAs allow developers to produce an al- developers can access functions defined within most perfect native-like experience without the JavaScript environment of the MDA in or- requiring a different codebase or packaging. der to react to the menu item being selected. MDAs are able to recreate the experience of an The third attribute allows the item to be dis- application made with Electron without requir- abled to prevent user interaction depending on ing any download or installation. state. By adding the disabled attribute to a menu item, it will gray out the menu item. 6.2 API See the Resources section for information Monarch’s additional HTML API is its major about complete documentation. advantage over existing systems. It gives devel- opers the ability to keep their web application’s 6.3 Implementation existing codebase, allowing their application to be Monarch compatible in minutes. Monarch’s source is forked from Chromium, The prototype API currently allows devel- so it inherits Chromium’s stability and reli- opers to create menu structures for their ap- abilty. Chromium includes the Chrome Apps plications which get injected into OS X’s menu feature, which allows vendors to create spe- bar when the MDA is in focus. Menu structures cialized application packages and users can are simply trees, which is perfect for encoding download from the Chrome Web Store to run into HTML. Two HTML elements are currently as faux-native applications through Chromium. in the API: mdamenu and mdamenuitem.A Chromium installs a small app-shim bundle mdamenu element can contain other mdamenu which is configured as a valid OS X application elements or mdamenuitem elements, though bundle. These bundles are very small and act mdamenuitem children will be ignored. A as a way of notifying Chromium that the user mdamenuitem represents a leaf of the menu is trying to open the application it corresponds tree, and is a selectable action, while a nested to. The app-shim bundle then cedes control mdamenu represents a child menu that contains back to Chromium, which is the process run- a subset of menu items. ning the application. Chromium opens a new Each element has a set of attributes that window and renders the web page inside of it. help define their appearance in the menu bar. A Chromium then replaces it’s normal menu bar 9 with the app’s menu bar. Doing this gives the with Monarch essentiallly eliminates the need illussion that the application is a separate entity. for any Electron-run application, thus reducing The major problem with Chrome Apps is the number of installed applications on the the user must find the desired application - user’s machine. if the vendor has decided to release it - and Monarch allows the user interfaces of web download it themselves. Many of these apps applications to become more standardized by simply link back to the vendor’s already re- adopting OS X’s use patterns. The user is able sponsively designed web application, making to better predict where menu items may be, it just another step for users. allowing them to learn how to use the web ap- Monarch injects web page information into plication quicker. This can be especially useful a template Chrome App, which it progamat- for inexperienced users like children or eldery. ically installs when the user wants to open an MDA. During the application’s lifetime, the 7.2 Security bundle is installed as an internal extension Security is always the most important aspect of which remains invisible to the user. When the any web-based platform. Browsers have been user closes the application, Monarch uninstalls snuffed out of existence by public reactions to the app bundle and cleans up the files. A user security flaws, and almost all new web APIs may have open as many app bundles as they make security a top priority. Since Monarch want, even duplicate source sites. is based on Chromium, it carries Chromium’s If the web page has defined a MDA menu security background with it. structure for itself, the renderer will notify the The changes to the render process supports browser when the menu structure is wholly two additional HTML elements, which includes parsed and the corresponding app’s menu is bindings to the JavaScript engine as well. These updated dynamically. This also means that any elements are defined and follow the same pat- changes to the menu elements in the DOM will terns as other existing HTML elements. When also be propogated to the app’s menu bar. the renderer recognizes these elements have changed, it sends a message to the browser pro- 7 DISCUSSION cess to update the corresponding MDA’s menu, and passes the menu structure with it. The ren- Monarch is meant to be a step forward in derer builds simple string and boolean structs merging the native and web experiences both based on the HTML structure, and passes it in the context of the user, and the context of the over IPC. There are multiple other instances developer. Monarch allows developers to use where similar processing takes place, and poses the flexible web technology ecosystem to easily no additional security risk. build an application that is easily deployed on The menu data that is sent to the browser the web which, with Monarch, also serves as a process gets converted into Objective-C objects native application. to be displayed in the menu bar. This system is also just as secure as Chromium. The menu ac- 7.1 User Interface tion’s send a string - sent to the browser process by the renderer - back to the renderer to be run An MDA’s interface is nearly identical to one as JavaScript, but this poses no more security which could be produced with Electron. Each risk than a user opening the development tools app has its own window, dock icon, and menu and using the JavaScript console. bar. By separating web applications from the browser experience, it allows users to easily locate and more efficiently move between their 7.3 Current Deficits pivotal apps. It also increases the user’s sense The shortfalls of the current implementation of of the app’s permanence, making it feel more Monarch are few and can be easily addressed important than just another browser tab. A user in future releases. MDA’s dock icons are the REFERENCES 10 opened site’s enlarged , given that it be extended to allow the render window’s ini- is available in the browser’s cache. This means tial dimensions to be designated by the de- that MDA app icons are either the default icon, veloper. The window’s title bar could also be or a horribly pixelated version of the favicon. customized by allowing developers to change This could be solved by extending the HTML the window title, or hide the bar all together. API to include the desired dock icon as a resource, then dynamically updating the icon 8 CONCLUSION after the page is parsed. Currently, the full extent of the OS X menu We presented and discussed the idea of the API is not supported within Monarch’s HTML App Web - a category of web sites which are API. Some things that are not implemented in- meant to allow users to perform some type of clude right-justified keyboard shortcuts, menu action or make a task easier - and contrasted separators, and the Help search bar. These fea- it with the content web. The app web ties into tures were not considered vital for the initial the debate over whether to build native or web prototype, but could easily be added future applications. Monarch is presented as a solution releases. to this debate, and a compromise between the Finally, when using OS X’s Expose´ feature. best of both platforms. Monarch allows for a Expose´ allows users to view windows grouped native-like experience, while allowing for the by application and quickly switch between spontaneity and ease of the web application. them. Since MDA windows are being created Monarch’s simple HTML API allows web and rendered by the Monarch process, Expose´ applications to easily support use in as an groups all MDAs with the Monarch windows. MDA. While it is an addition to the already This could be fixed by moving the window bloated web API, it is the most straight forward creation system to the app-shim process, and path to support currently built applications. connecting to the renderer process to access its The API has the possibility for many simple view. MDAs would then be separated from one additions that would greatly increase the ability another within Expose,´ allowing faster appli- of the developer to control their site’s MDA, as cation switching. This feature would mean a well as their site’s presence as an application, substantial refactoring of many pre-existing ser- rather than a page. vices in Monarch and was not possible within Monarch is a meant to be a proof-of-concept the scope of this project, but with proper re- for a grander vision. The use and content of sources could be done in the future. the web has fundamentally changed in its short life. The next question then is how best to adapt to this change. Monarch is meant to be 7.4 Future Work a glimpse at what the web could become: not There are some features that do not warrant just a series of sites and pages, but a complete, an explicit platform deficit, but would still be and immediately accesible application suite. useful in a production version. One is an addi- tion to the HTML API which would allow the 9 RESOURCES browser to detect that the site should be opened as an MDA if available, and define specific • Monarch is available for download at http: settings for how to open it. This would allow //halfbyte.io/projects. Monarch to be more aware of the type of page • The source code can be accessed at https: it is displaying and more appropriately tailor //.com/danrwhitcomb/Monarch. the experience. • Documentation is available at The inclusion of OS specific interface com- https://github.com/danrwhitcomb/ ponents within the MDA’s window or menu Monarch/wiki/Menu-API bar would also be advantageous in making integrated experiences. The HTML API could REFERENCES 11

REFERENCES [17] K. Henricksen and J. Indulska, “Adapt- [1] Google. (2016). Google photos, [Online]. ing the web interface: An adaptive web Available: https : / / photos . google . com browser”, in Australian Computer Science (visited on 04/22/2016). Communications, IEEE Computer Society, [2] Trello. (2016). Trello, [Online]. Avail- vol. 23, 2001, pp. 21–28. able: https : / / trello . com (visited on [18] S. Tenenbaum and M. Caballero. (May 04/22/2016). 2003). Contextually adaptive web [3] Wolfram. (2016). Wolframalpha, [Online]. browser. US Patent App. 10/116,763, Available: https : / / wolframalpha . com [Online]. Available: https : / / www . (visited on 04/22/2016). google.com/patents/US20030080995. [4] Buzzfeed. (2016). Buzzfeed, [Online]. [19] Google. (Nov. 2014). Support for theme- Available: https://buzzfeed.com (visited color in chrome 39 for android, [Online]. on 04/22/2016). Available: https : / / developers . google . [5] T. N. Y. T. Company. (2016). The new com/web/updates/2014/11/Support- york times, [Online]. Available: https:// for - theme - color - in - Chrome - 39 - for - nytimes.com (visited on 04/22/2016). Android?hl=en (visited on 04/22/2016). [6] Facebook. (2016). Facebook, [Online]. [20] I. Fette. (Nov. 14, 2008). Understand- Available: https://facebook.com (visited ing phishing and malware protection in on 04/22/2016). google chrome, [Online]. Available: http: [7] Google. (2016). Angularjs, [Online]. / / blog . chromium . org / 2008 / 11 / Available: https : / / angularjs . org/ understanding - phishing - and - malware . (visited on 04/22/2016). (visited on 04/24/2016). [8] Facebook. (2016). Reactjs, [Online]. Avail- [21] Mozilla. (2016). How does built-in phish- able: https://facebook.github.io/react/ ing and malware protection work?, [On- (visited on 04/22/2016). line]. Available: https://support.mozilla. [9] A. van Kesteren and T. C¸elik, Eds., org/en-US/kb/how-does-phishing-and- Fullscreen api, Apr. 18, 2014. malware-protection-work. [10] I. Hickson, Ed., Html5 web messaging, [22] M. E. Team. (May 11, 2015). Microsoft Nov. 18, 2010. edge: Building a safer browser, [Online]. [11] I. Hickson, Ed., The api, Apr. 19, Available: https://blogs.windows.com/ 2011. msedgedev / 2015 / 05 / 11 / microsoft - [12] K. Group, Webgl specification, ed. by D. edge-building-a-safer-browser/. Jackson, The Khronos Group, Oct. 27, [23] (Apr. 14, 2014). Xul, [Online]. Available: 2014. https://developer.mozilla.org/en-US/ [13] Google. (2016). Chrome v8, [Online]. docs / Mozilla / Tech / XUL (visited on Available: https : / / developers . google . 04/22/2016). com/v8/ (visited on 04/22/2016). [24] Mozilla. (Nov. 21, 2013). Using re- [14] (2016). Chromium, [Online]. Available: mote , [Online]. Available: https : https : / / www . chromium . org / Home / / developer . mozilla . org / en - (visited on 04/22/2016). US / docs / Mozilla / Tech / XUL / [15] Cenzic, “Application vulnerability trends Using%5C Remove%5C XUL (visited on report: 2014”, Tech. Rep., 2014. 04/24/2016). [16] T. Mikkonen and A. Taivalsaari, “Apps [25] (Apr. 14, 2014). Prism, [Online]. Avail- vs. open web: The battle of the decade”, able: https : / / developer. mozilla . org / in Proceedings of the 2nd Workshop on Soft- en - US / docs / Archive / Mozilla / Prism ware Engineering for Mobile Application De- (visited on 04/21/2016). velopment, 2011, pp. 22–26. [26] ——, (Nov. 24, 2015). Xulrunner, [Online]. Available: https : / / developer . mozilla . 12 org / en - US / docs / Archive / Mozilla / Available: http : / / www. visionmobile . XULRunner. com/product/developer-economics-q3- [27] (May 26, 2014). Chromeless, [Online]. 2013-state-of-the-developer-nation/. Available: https : / / developer . mozilla . [38] J. Howell, B. Parno, and J. R. Douceur, org / en - US / docs / Archive / Mozilla / “Embassies: Radically refactoring the Chromeless (visited on 04/21/2016). web”, in Proceedings of the USENIX [28] M. Mahemoff. (Sep. 2010). Extensions Symposium on Networked Systems Design and apps in the chrome web store - and Implementation (NSDI), USENIX, Apr. google chrome, [Online]. Available: https: 2013. / / developer . chrome . com / webstore / [39] (2016). Blink, [Online]. Available: http:// apps%5C vs%5C extensions (visited on www. chromium . org / blink (visited on 04/21/2016). 04/22/2016). [29] (Apr. 18, 2016). Chromium embedded framework, [Online]. Available: https:// bitbucket.org/chromiumembedded/cef (visited on 04/21/2016). [30] Evernote. (2016). Evernote: Evernote: The note-taking space for your life’s work, [Online]. Available: https : / / evernote . com. [31] Spotify. (2016). Spotify: Music for every- one, [Online]. Available: https://spotify. com. [32] (2016). Electron, [Online]. Available: http: / / electron . atom . io/ (visited on 04/21/2016). [33] A. Taivalsaari, T. Mikkonen, D. Ingalls, and K. Palacz, “Web browser as an appli- cation platform: The lively kernel expe- rience”, Mountain View, CA, USA, Tech. Rep., 2008. [34] N. Bielova, “Survey on secu- rity policies and their enforcement mech- anisms in a web browser”, The Journal of Logic and Algebraic Programming, vol. 82, no. 8, pp. 243–262, 2013, Automated Spec- ification and Verification of Web Systems, ISSN: 1567-8326. [35] W. W. W. Consortium, Html5, ed. by H. et al., Oct. 28, 2014. [36] A. Puder, N. Tillmann, and M. Moskal, “Exposing native device apis to web apps”, in Proceedings of the 1st Interna- tional Conference on Mobile Software En- gineering and Systems, ser. MOBILESoft 2014, Hyderabad, India: ACM, 2014, pp. 18–26, ISBN: 978-1-4503-2878-4. [37] (Jul. 2013). Developer economics q3 2013: State of the developer nation, [Online].