The CloudBrowser Web Application Framework - Virginia Tech

The CloudBrowser Web Application Framework - Virginia Tech

The CloudBrowser Web Application Framework Brian McDaniel 5/2/12 Outline Overview of Web Applications 2 AJAX Web Applications Server-centric Web Applications CloudBrowser Web Applications Demo

Implementation Evaluation Related and Future Work Conclusion Software Trends Applications moving from the desktop to the web. Users expect these applications to behave like desktop applications. 3 Email (Gmail), Word Processing (Google Docs) Rich user interfaces; interactivity Web Applications

The Web wasnt designed for applications. JavaScript was added to allow some simple interactions with web pages. The basic building blocks are repurposed to create web applications: 4 Originally for sharing static documents Document - > GUI JavaScript -> Application Development Language Web Application Styles Multi-page Applications

5 Similar browsing to static documents. HTML dynamically generated by server. Each view has a unique URL. Navigating between views causes a full refresh. Single-page AJAX Applications Single-page AJAX Applications Initial page loaded, then AJAX requests to load additional data and modify view. Closer to desktop application experience. Server Machine AJAX

Request AJAX + HTML Response JavaScript 6 AJAX Reques HTTP Request Applicati t Response Serve AJAX on Code HTML r + JavaScr ipt Issues with AJAX Web Applications Client-side state is transient.

Lost on page refresh and navigation. Reconstructing client-side state is difficult. Changing programs requires both client and server programming. Model-View-Controller pattern is distributed. 7 No unique mapping of URLs to particular views. Distributed controller logic. Network programming manually handled by developer.

Server-centric Web Applications Client Browser DOM Events HTML + JS Changes JavaScript Engine Client Engine 8 Server Machine HTTP HTML Applicatio Serve

+ JS n Code r Modificatio Instantiat ns es Components Update Instructions Events Events Issues with Existing Server-centric Frameworks Client-side state is still transient.

9 Components instantiated on each request. Client state must be manually reconstructed. Difficult to debug due to component translation process. Designers and developers must learn new markup and programming languages. CloudBrowser Client Browser DOM Events Client Engine (JavaScript) Changes Constru ct

JavaScript Engine Client Engine 10 Server Machine HTTP Serve r Applicatio n Code Modificatio Instantiat ns es Load Events s Virtual Browser

Request for Update DOM Instructions Serialized Events DOM DOM CloudBrowser Virtual browser lifetime decoupled from client lifetime. Server-centric application model for developers.

Clients can disconnect and reconnect state is saved. Provides natural co-browsing support. Client/server communication details hidden from developer. Applications written in pure JavaScript, HTML, and CSS. 11 No component translation process. Allows use of existing client-side libraries. Demo Meeting Scheduler 14 Demo Meeting Scheduler

66 lines of CoffeeScript, 108 lines of HTML Leverages existing client-side libraries: jQuery: DOM manipulation Bootstrap CSS: styling Knockout.js: data bindings and templating Moment.js: time strings Co-browsing based application. 15 Real-time collaboration for free. Demo Meeting Scheduler Creating the possible times list: model =

... possibleTimes : ko.observableArray() ...

Possible times:

16 Demo Meeting Scheduler E-mailing participants: smtp = require('nodemailer') smtp = nodemailer.createTransport 'SMTP', service: 'Gmail' auth: user: '[email protected]' pass: 'topsecret'

$('#send-mail').click () -> for p in model.participants() addr = continue if addr == 'none' msg = "Hey #{}, here are the available times:\n" msg += "\t#{time}\n" for time in model.possibleTimes() mail = from: "CloudBrowser " to: addr subject: "Available Meeting Times" text: msg smtp.sendMail(mail) 17 Storing Model Data 3 ways: All data in virtual browser. Shared data as JavaScript objects, accessible from

multiple virtual browsers. ex: chat room application Traditional means, such as a database or file system. 18 ex: meeting scheduler Useful when model storage needs to be scaled. Implementation Implementation Platform Processing Client Events

Synchronization Protocol Detecting Virtual Browser Changes JavaScript Execution 19 Implementation Platform Node.js JSDOM Built on Google s V8 JavaScript Engine One language client- and server-side Automatic integration with virtual browser Large library ecosystem

Node.js W3C DOM implementation 20 2-way socket connection between browser and server Client-side Events Client Browser Server Machine DOM Events Changes JavaScript Engine Client Engine

21 HTTP Serve r Applicatio n Code Modificatio ns Events Virtual Browser Update Instructions Events DOM Processing Client Events Block client-side event processing.

Register capturing event listeners on those events. 22 Call event.stopPropagation(). Call event.preventDefault(). Synchronization Protocol Client Browser Server Machine DOM Events Changes JavaScript Engine Client Engine

23 HTTP Serve r Applicatio n Code Modificatio ns Events Virtual Browser Update Instructions Events DOM Synchronization Protocol: Communication We establish RPC endpoints on the client and

server. Client Methods PageLoaded(records) DOMNodeInsertedIntoDocument(recor ds) DOMNodeRemovedFromDocument(rec ords) DOMAttrModified(target, name, value) DOMPropertyModified(target, property, value) DOMCharacterDataModified(target, value) DOMStyleChanged(target, attribute, value) AddEventListener(target, type) PauseRendering() ResumeRendering() 24 Server Methods processEvent(event) setAttribute(target, attribute,value) Detecting Virtual Browser Changes

Client Browser Server Machine DOM Events Changes JavaScript Engine Client Engine 25 HTTP Serve r Applicatio n Code Modificatio ns

Events Virtual Browser Update Instructions Events DOM Detecting Virtual Browser Changes Changes detected using aspect-oriented programming. Add wrapper methods (advice) around DOM manipulation methods. Example: var oldMethod 26

= DOM.Node.appendChild; DOM.Node.appendChild = function () { var rv = oldMethod.apply(this, arguments); browser.emit('DOMNodeInsertedIntoDocument', { target: arguments[0], parent: this }); return rv; }; JavaScript Execution Each virtual browser needs a faithful JavaScript environment. Must match existing browser environments. Required to run existing client-side libraries.

Node.js doesnt expose an API to provide isolated execution environments with the right semantics. We wrote Contextify, a C++ addon for Node 27 Adopted upstream by JSDOM. Evaluation Goals What is the latency cost of processing events on the server? Whats the memory cost of instantiating virtual browsers on the server? Whats the memory cost of adding additional clients to a virtual browser (co-browsing)? How good is our DOM implementation?

28 Evaluation Setup Hardware: Server: 2- 2.5 GHz quad-core processors, 16 GB RAM Client: 3.00 GHz quad-core processor, 8 GB RAM Connected by gigabit LAN. Cant use traditional benchmarking means. 29 CloudBrowser isnt stateless.

We want to simulate user interactions with a virtual browser. Latency Response times (Nielson, Usability Engineering) < 100ms: feels instantaneous. < 1 second: noticeable, but doesnt interrupt workflow. Keynote Internet Health report considers latency < 90ms between backbones as good. Ping from Blacksburg to Austin, TX (measured by me):

30 ~60 ms Latency Experimental setup: Scripted client: Connect to a new virtual browser. while !done 31 Start clock. Send a precomputed event. Wait for response.

Stop clock; compute latency; save in results array. Latency 32 Latency 33 Virtual Browser Memory Usage Question: whats the memory cost of a virtual browser? Experimental procedure: 34 Connect a client to a new virtual browser (cause

allocation). Force a garbage collection. Collect V8 heap memory usage (Node.js API) Virtual Browser Memory Usage Application Hello World Chat Room Meeting Scheduler Effect of JavaScript: jQuery: 1.05 MB Knockout.js: 0.33 MB Moment.js: 103 KB Effect of CSS: 35

Bootstrap: 820 KB Memory Usage 164 KB 2.58 MB 4.45 MB Additional Client Memory Usage Question: whats the memory cost of adding clients to a single virtual browser? Experimental procedure: Connect a scripted client to the virtual browser. Force a garbage collection. Collect memory usage.

Result: ~16 KB per connected client 36 DOM Conformance jQuery Test Suite Results Test Suite Core Callbacks Deferred Support Data Queue Attributes Events Selector Traversing Manipulation CSS AJAX Effects Dimensions Exports Offset

Selector (jQuery) 37 Pass 1306 418 155 28 290 32 453 476 310 297 530 58 329 367 61 1 N/A N/A Total 1309

418 155 38 290 32 473 482 314 298 547 93 349 452 83 1 N/A N/A % Passed 99.77% 100.00% 100.00% 73.68% 100.00% 100.00% 95.77%

98.76% 98.73% 99.66% 96.89% 62.37% 94.27% 81.19% 73.49% 100.00% Limitations with CloudBrowser Approach No access to computed layout Cant support libraries that rely on client-side layout information. element.offsetWidth, element.offsetTop, etc.

CSS3 can eliminate this need for many use cases. Latency-sensitive applications (e.g. games) 38 Not every application should be a CloudBrowser application. Limitations with CloudBrowser Implementation DOM conformance Lacking support for browsing pages in the wild. As JSDOM implementation improves, so does CloudBrowser. Multi-core scaling

39 Node.js is single threaded. Need to distribute framework to multiple procceses. Initial implementation done, but requires improvement. Related Work ZK Server-centric, Java-based framework. Uses components; instantiated on each request. ItsNat

40 Server-centric, Java-based framework. Uses a DOM on server. Applications written in HTML, CSS, and Java. Future Work Multi-process scaling improvements. Improved CloudBrowser API. Improved DOM conformance. Virtual browser management: 41 Persistence Garbage collection

Conclusion CloudBrowser is a server centric web application framework where applications run in virtual browsers on the server. User interface state is automatically preserved across navigation, refresh, and disconnection. CloudBrowser introduces acceptable latency and memory overhead for many use cases. The distributed nature of web applications is hidden from developers. 42 Question s? 43

Scaling to Multiple Processes Client Browser Front-end Server app1 Server (multiproces s) Virtual Browser pipe Virtual Browser pipe Virtual Browser app2 Server

(single-process) Virtual Browser 44 pipe Virtual Browser

Recently Viewed Presentations

  • Who Wants To Be A Millionaire? - Primary Resources

    Who Wants To Be A Millionaire? - Primary Resources

    Who Wants To Be A Millionaire? Mr Harrison's Ancient Egypt Edition ... £300 Question 4 What shape is the base of a pyramid? What shape is the base of a pyramid? £500 Question 5 What material were pyramids made from?...
  • Kirchengeschichte der Frühen Neuzeit

    Kirchengeschichte der Frühen Neuzeit

    Kirchengeschichte der Frühen Neuzeit Einführung Universität Duisburg-Essen, Winter-Semester 2006/07 Index 1.1 Prüfungs- und Studienordnung Prüfungsordnung: staatlich vorgegebener Katalog von Anforderungen, die für einen Studienabschluss zu erbringen sind 1.1 Bereiche und Module Lehramtsprüfungsordnung - LPO vom 27.03.2003, gültig seit 1.
  • Meta Ethics The Last Module eeeeek! Ethical Language

    Meta Ethics The Last Module eeeeek! Ethical Language

    Naturalism A key question when trying to reach a definition of morality etc. is the is-ought gap (or the Naturalistic Fallacy). Naturalistic theories of ethics attempt to define good in terms of something that can be identified in the world...
  • OCEN 201 Introduction to Ocean & Coastal Engineering

    OCEN 201 Introduction to Ocean & Coastal Engineering

    Buoy & Mooring System Buoy types and uses Reading assignment (pp 195-198, old edition: pp166-168) Buoys are floating or submerged objects. They can be cylindrical, spherical, disc, cone, or toroid in shape. They are usually moored to anchors at the...
  • Clean hands = healthy students

    Clean hands = healthy students

    Clean hands = healthy students5/16/16For use by high school teachers for classroom education. Faye Salzer, RN. HAI Activities Coordinator. ... Scrub your hands while singing the Happy Birthday Song twice.
  • An Analysis of Sources Used to Answer Reference

    An Analysis of Sources Used to Answer Reference

    ATLA Religion Database. Basic Biosis. Biographical Encyclopedia of Mathematicians. Biography & Genealogy Master Index. Biography Index. Book Review Digest. Books from the 1950s. Books in Print. Books on Customs. Books on Manners. Books on Superstition. Character Sketches of Romance, Fiction,...
  • DCA Manufactured Building Program

    DCA Manufactured Building Program

    Upload documents to BCIS web site Plan is given a plan tracking number by web site Third parties can order insignias Type II B Factory Built Schools Plans Review Review Process Changes in code Submit confirmation letter from A/E of...
  • World Religions - Weebly

    World Religions - Weebly

    World Religions Judaism Christianity Islam Hinduism Buddhism 1. Judaism Original of the Abrahamic Religions. Started over 3,500 years ago in present day Israel/Middle East. Monotheistic (belief in one god) religion with covenant with god. Traditional laws are kept in the...