cloud web applications: the new perspective of sproutcore

Bolzano - July 23, 2010

Non-Invasive Personal Tracking

Andrea Girardello

Thesis supervisor: Prof. Giancarlo Succi

Bolzano, 24 July 2009

CLOUD WEB APPLICATIONS: THE NEW PERSPECTIVE OF SPROUTCORE

THE DEVELOPMENT OF APPAWARE ANALYTICS

DAVID SAITTA

Thesis Co-Supervisor:

Prof. Paolo Ceravolo

Thesis Supervisor:

Prof. Ernesto Damiani

OVERVIEW

1. Cloud Web Applications

2. SproutCore

3. AppAware Analytics

• Tendency to migrate from desktop applications to web applications on the Cloud;

• Software as a Service;

• Software developed using web technologies;

Migrate to the CloudCLOUD WEB APPLICATIONS

Cloud ComputingCLOUD WEB APPLICATIONS

2009 2010 20140

37,5

75

112,5

150

58,668,3

148,8

cloud services revenue (billions of $)

Gartner report “Forecast: Public Cloud Services, Worldwide and Regions, Industry Sectors, 2009-2014

↑+16.6%

↑+117.8%


2009 2010 20140

37,5

75

112,5

150

58,668,3

148,8

cloud services revenue (billions of $)

Gartner report “Forecast: Public Cloud Services, Worldwide and Regions, Industry Sectors, 2009-2014

↑+16.6%

↑+117.8%

Can web applications compete with desktop applications?

Desktop vs Web ApplicationsCLOUD WEB APPLICATIONS

Desktop Application

Data BusinessLogic

Web Application

Data BusinessLogic


Desktop Application

Cloud Web Application

BusinessLogic

Web Application

Data


Desktop Application

Cloud Web ApplicationWeb Application

BusinessLogic

Data

Data BusinessLogic

Data BusinessLogic

Main AspectsCLOUD WEB APPLICATIONS

• hybrid between traditional desktop applications and traditional web applications;

• Like desktop apps • rich user experience;• immediate response to user actions;• offline mode;

• Like web apps • universal / cross platform;• not installed on computer;• take advantage of the Cloud by storing all the data on it;• mobile access.

Main AspectsCLOUD WEB APPLICATIONS

• hybrid between traditional desktop applications and traditional web applications;

• Like desktop apps • rich user experience;• immediate response to user actions;• offline mode;

• Like web apps • universal / cross platform;• not installed on computer;• take advantage of the Cloud by storing all the data on it;• mobile access.

Which tools? Which language? Which structure?

OVERVIEW


2. SproutCore


• Its goal is to allow developers to create web applications

with advanced capabilities and user experiences

• moves business logic to the client;

• applications are full-fledged programs, written in JavaScript that is

executed in the browser;

• freeing up servers (and server engineers) to focus on

delivering data as quickly and reliably as possible.

In a nutshellSPROUTCORE

SproutCore is an HTML5 application framework for building responsive, desktop-like

apps in any modern web browser, without plugins.

StructureSPROUTCORE

V

C

M

Browser

REST

• jQuery and Prototype are utility libraries;

• SproutCore has more in common with Cocoa, .NET or Eclipse Rich Client Platform;

• The Display layer is based on jQuery DOM functionalities.

Isn’t it Ajax?SPROUTCORE

• Connection using REST interface;

• Server-agnostic;

• DataSource interface to be implemented

• fetch, retrieveRecord, createRecord, updateRecord, destroyRecord

Interaction with serversSPROUTCORE

REST

Browser

• Young Framework;• Development started in 2007;

• First stable release March 2010;• Investmens from Apple Inc.• Used to develop MobileMe

• Mature core and structure;

• Immature advanced views and documentations;

• Extensible using plugins and frameworks;• DSUI (http://github.com/d4v1d82/DSUI)

Mautre?SPROUTCORE

http://github.com/d4v1d82/DSUI

http://github.com/d4v1d82/DSUI

OVERVIEW


2. SproutCore


AppAware ProjectAPPAWARE ANALYTICS

• Developed as a research project by Information Management group at the ETH Zürich

AppAware is a mobile application that tracksinstallations, updates, and removals

of Android programs

AppAware ! AppAware AnalyticsAPPAWARE ANALYTICS

• poor statistics pages;

• from February 2010 collected more than 5 milions of events with about 60-70 thousand events for day.

AppAware ! AppAware AnalyticsAPPAWARE ANALYTICS

• Prototype ! AppAware Analytics

• main requirements:

1. create a cloud web application;

2. allow users to easily interact with the system;

3. minimize the server-side computation (i.e. changing chart visualizations, user interactions, UI modifications, etc.);

4. minimize the bandwidth usage: the server provides only a collection of data information objects.

Client-Server interactionAPPAWARE ANALYTICS

1.first access


1.first access

2. load apps


1.first access

2. load apps

GET /apps.php


1.first access

2. load apps

JSON

[{id: 82, app_name: "Maps", package_name: "com.google.android.apps.maps", meter: 98, meter_img: "http://chart.apis.google.com/chart?chs=….", description: "Get the latest release of Google Maps. New features:n* Bicycling directions and map layer (US only)n* Navigation icon in app launchern* Share places by email, SMS, and morennAlso includes:n* Navigation (Beta)n* Search by voicen* My Locationn* Business listingsn* Directionsn* Trafficn* Street Viewn* Latituden* Google Buzz", icon: "http://AppAware.org/icons/com.google.android.apps.maps.png"â€¨},{id: 199, app_name: "Market", ...

GET /apps.php

http://chart.apis.google.com/chart?chs=

http://chart.apis.google.com/chart?chs=

http://AppAware.org/icons/com.google.android.apps.maps.png

http://AppAware.org/icons/com.google.android.apps.maps.png


1.first access

2. load apps

3.select an app

load events of

current week


1.first access

2. load apps

3.select an app

load events of

current week

GET /events.php


1.first access

2. load apps

3.select an app

load events of

current week

{"events": [{ "id": 3369952, "event_type": "updated", "user_id": "2001459694d7346d", "twitter_id": null, "model": "HTC Hero", "sdk": 7, "latitude": "53.16871628", "longitude": "-1.11738948", "created": "2010-06-14 00:17:36" },{}]}

JSON

GET /events.php


1.first access

2. load apps

3.select an app

load events of

this week

4.navigate graphs

Development - Chart ViewsAPPAWARE ANALYTICS

Development - Date SelectorAPPAWARE ANALYTICS

ProblemsAPPAWARE ANALYTICS

• AppAware Analytics:

• too many events/model data!

• difficult mobile support (because of memory);

• no cache support on computed charts;

Objects

Response Size

Response Size (gzip)

Computation time

2010-7-1 / 2010-7-19

20 days

2010-4-1 / 2010-7-19

110 days

2,839 27,900

508.5KB 5MB

99.6KB (80.4%) ~1MB (80.5%)

1.8sec 25sec

ProblemsAPPAWARE ANALYTICS

• SproutCore:

• bad documentation;

• poor examples;

• support only on newsgroup, blog, comments and IRC with developers;

• HTML5 standard still in draft

• Candidate Recommendation stage during 2012.

ConclusionsAPPAWARE ANALYTICS

• Yes: user interaction is responsible as a desktop application;

• Yes: Advanced views;

• Yes: interaction with multiple servers;

• Yes/No: when exchanging big amount of data with the server the latency increase (but the same with desktop application);


ConclusionsAPPAWARE ANALYTICS

• Yes/No: HTML5 is not fully standardized;

• No: interaction with custom hardware;


Future WorksAPPAWARE ANALYTICS

• Increase client-server REST interface to reduce data and bandwidth usage;

• Offline support;

• Mobile Views;

• Touch Devices support;

• Advanced events filtering;

• Porting to SproutCore 1.1 as soon as released.

?speaker: David Saitta


A style of Computing where scalable and elastic IT capabilities are provided as a service to multiple customers using Internet technologies.

Gartner

• Software as a Service;

• Software developed using web technologies;

JavaScript EnginesEXTRA

WebKit 3.0

WebKit 3.1

SquirrelFish

SquirrelFish Extreme

0 20 40 60 80

63,6

29,9

18,8

5,4

The chart shows WebKit’s JavaScript performance in different versionsbigger bars are better

Evolution of Web TechnologiesCLOUD WEB APPLICATIONS


Static pagesof hyperlinks

HTML

1991



HTML CGI PHP ASP

HTML HTML HTML

Dynamicgenerated pages

1991 1993-1994



HTML CGI PHP ASP

HTML HTML HTML


Ruby on RailsJBoss

ASP.NET

HTML HTML HTML

Dynamic MVCgenerated pages

1991 1993-1994 2001



HTML CGI PHP ASP

HTML HTML HTML


Ruby on RailsJBoss

ASP.NET

HTML HTML HTML


Dynamic/Static generated JavaScript

HTMLJavaScrip

1991 1993-1994 2001



HTML CGI PHP ASP

HTML HTML HTML


Ruby on RailsJBoss

ASP.NET

HTML HTML HTML


Dynamic/Static generated JavaScript

HTMLJavaScrip

Better Browser Support

HTML5/CSS3JavaScript EnginesW3C Standards

1991 1993-1994 2001

• server-side REST interfaces

• caching system to handle thousands of single events;

• PHP based;

• JSON format;

• GZip compression;

Development - RESTAPPAWARE ANALYTICS

App

Date Range

Number of Events

Original Size

Gzipped Size

Data Savings

Google Maps

April, 18 2010 to

June, 18 2010

10,551

~2MB (1922.11 KB)

371.38 KB

80.68%


1.first access

2. load apps

3.select an app

load events of

this week

4.navigate graphs

5.select another

date range

JSON

GET /events.php


1.first access

2. load apps

3.select an app

load events of

this week

4.navigate graphs

5.select another

date range

Objects

Response Size

Response Size

(gzip)

Computation

time

2010-7-1 / 2010-7-19

20 days

2010-4-1 / 2010-7-19

110 days

2,839 27,900

508.5KB 5MB

99.6KB (80.4%) ~1MB (80.5%)

1.8sec 25sec

Development - Google Map ViewsAPPAWARE ANALYTICS

• Full-stack MVC framework;

• Key-Value Coding (KVC);

• Key-Value Observing (KVO);

• Component Bindings;

StructureSPROUTCORE

REST

Browser

slider_valueController

22

update value

value updated

cloud web applications: the new perspective of sproutcore

Technology

cloud web applicationsmigrate

traditional web applications

web technologies

cloud software

cloud tendency

client applications

modern web browser

appaware analytics appaware