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
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 www.gmail.com AJAX
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.
+ 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.
Request for Update DOM Instructions Serialized Events DOM DOM CloudBrowser Virtual browser lifetime decoupled from client lifetime. Server-centric application model for developers.
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 =
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
21 HTTP Serve r Applicatio n Code Modificatio ns Events Virtual Browser Update Instructions Events DOM Processing Client Events Block client-side event processing.
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
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
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?
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
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
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
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 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.
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...
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 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.
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,...
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 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...
Ready to download the document? Go ahead and hit continue!