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

OVERVIEW

2. SproutCore

• 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

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

Migrate to the CloudCLOUD WEB APPLICATIONS

Cloud ComputingCLOUD WEB APPLICATIONS

2009 2010 20140

58,668,3

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

58,668,3

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

Desktop Application

Cloud Web ApplicationWeb Application

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

Browser

• 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

• 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

Browser

• Connection using REST interface;

• Server-agnostic;

• DataSource interface to be implemented

• fetch, retrieveRecord, createRecord, updateRecord, destroyRecord

Interaction with serversSPROUTCORE

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

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

2. load apps

1.first access

2. load apps

GET /apps.php

1.first access

2. load apps

[{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

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" },{}]}

GET /events.php

1.first access

2. load apps

3.select an app

load events of

this week

4.navigate graphs

1.first access

2. load apps

3.select an app

load events of

this week

4.navigate graphs

1.first access

2. load apps

3.select an app

load events of

this week

4.navigate graphs

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

JavaScript EnginesEXTRA

WebKit 3.0

WebKit 3.1

SquirrelFish

SquirrelFish Extreme

0 20 40 60 80

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

Evolution of Web TechnologiesCLOUD WEB APPLICATIONS

Static pagesof hyperlinks

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

HTMLJavaScrip

1991 1993-1994 2001

HTML CGI PHP ASP

HTML HTML HTML

Ruby on RailsJBoss

ASP.NET

HTML HTML HTML

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

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

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

(gzip)

Computation

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

Browser

slider_valueController

update value

value updated

Cloud web applications: the new perspective of sproutcore

Technology

Transcript of Cloud web applications: the new perspective of sproutcore

Multi-Cloud Management from a People Perspective

SproutCore: Amber

IIA Cloud Computing An Internal Audit Perspective · Cloud Computing An Internal Audit Perspective ... The KPMG name, ... Cloud Computing – An Internal Audit Perspective 18.

Cloud Security- In Perspective

Cloud Foundry a Developer's Perspective

Cloud Computing (A Backend Perspective)

Cloud and IT: A CIO Perspective

Cloud Computing: A perspective - Defense Information Systems ...

Business Intelligence on Cloud: A Business Perspective

Cloud Computing from a Networking Perspective

Pronounced S-pro-ut-Co-re (Introduction to SproutCore)

77932716 Cloud Computing an Internal Audit Perspective

JOHN DERR - SR. APPLICATION DEVELOPER - CARESOURCE … · HISTORY Roots in Sproutcore a widget library used by apple to create MobileMe (c. 2008) Sproutcore 2.0 was an MVC framework

A CISO's Perspective on Cloud Compliance

Cloud Opportunities in India – a CIOs Perspective

Cloud Security: A New Perspective

An Enterprise Perspective on Cloud Innovation

Cloud Computing From Different Perspective. but first, What is cloud? Why is it called cloud?

Cloud Computing and SOA from Enterprise Perspective

SproutCore GTUG