Mesh-Enabled Web Applications

Arash Ghanaie-SichanieSenior Program ManagerMicrosoft Corporation

Key Takeaways

Mesh Services extend Web applications into Desktop by providing Access to Live user Social Graph, Synchronized Storage and Offline Access

Live Services add Value to various Stages of application Development and Use Lifecycle

Live Framework provides Runtimes, API Kits, Resource Model, Tools and Controls to Build, Deploy, Run and Update Mesh-Enabled Web Applications

Synchronized Storage

Identity & Membership

Timely News

Deployment to Devices

Servicing and Update

Catalogue

Hosting and Execution

Analytics

Live Services for Applications

Mesh Applicatio

n

Mesh-Enabled Application LifecycleWhere Live Services Add Value

Evaluate &

Learn

Develop

Test & Debug

Deploy & Publish

License &

Market

Update & Maintain

AnalyzeUsage & Improve

Discover

Evaluate

License &

Acquire

Configure & Use

Share and

Socialize

Get Updates

Uninstall

Developers Users

Conventional Application Choices

Highpoints Access from Anywhere Instant On Updates Sandboxed to Browser Deployment & Update Discoverable via Search Shareable via URL

Challenges Occasional Connection(offline) Rich & Native User Experience Scalability

WebsitesReach

Highpoints Rich and Native User

Experience Occasionally Connected

(Offline) Hosted on OS

Challenges Deployment & Update Discoverability Ability to share Sandboxing & Access control

Client Applications

Rich

Mesh-Enabled Web Applications

Mesh-Enabled Web Applications

Websites

Devices & Social Mesh

Sync…

Sync…

Extending Websites to DesktopUsing Live and Mesh Services

demo

• Run Web App Offline• Sync Web App with User’s Devices • Tap into Live Social Graph

Key Tenants of “Mesh-Enabled Web Applications” Client-side Web Apps Hosted on Live Services or

Websites

• DHTML, JavaScript/Ajax, Silverlight, etc

Simple Feed-based Programming APIs

• AtomPub/RSS/XML/HTTP

Auto Deployment and Update

• Sync Web App Files

Socially Aware and Shareable

• Sync Web App data with users and devices

Accessed by Originating Website

• User controlled access of data

Runs in a Sandbox

• Browser sandbox Online & Offline

• Application Mesh Object• Data Feed(s)

• Application Data• Settings• User data

•Associated Mesh Objects• Access to user data

Mesh-Enabled Web Application

Mesh-Enabled W

eb Application

Architecture

Enclosure

PubSub

AtomPub/FeedSync/XML/HTTPSynchronization

Identity

Storage

Notification

Comm

unication

Live Desktop App

Live Services Store

Live Services

Device

Desktop Host

Client LOE

AtomPub/FeedSync/XML/HTTP

Cloud Live Operating Envrionment

Mesh Bar

Live Website

Mesh-Enabled Web App

SilverLight/AjaxKit & APIs

Mesh Bar

Mesh-Enabled Web App

Silverlight/AjaxKit & APIs

App Manager

App Host

App Catalogue

App ManagerApp Host

Third-Party Website

Contoso.com

Sandbox

Sandbox

Getting Started for Developers

Developer Portal Establish trust Manage Cloud Applications Billing and Licensing Analytics

Hello "Social" World

demo

Hello Live Social DataHello DevicesHello User data & permissions

Application and Data Concepts

Application(Catalogue)

Installed Application

DataInstance

Synchronized

Mesh Object

(DataFeeds)

User Private Data

User Installs

Use

r C

reate

sH

as

User Gives Access

∞

∞

∞1

User SharesMember

(Live User)

∞

Synchronizing your App Data

demo

Build a Synchronized, Offline Enabled Web App that is connected to Live Services

Adding Social and Device Context to your App

Live Framework APIs provide capabilities to:

• Manage app News• Manage app Members• View mapped Devices

App can use Live social and device context

Apps can build their own control/experience

Mesh Control is the current default implementation

News

Devices

Members

Silverlight API Kit

public Page() { InitializeComponent(); MeshApplicationService meshApp = Application.Current.GetMeshApplicationService(); meshApp.LoadCompleted += new EventHandler(app_Load); meshApp.Load(); } void app_Load(object sender, EventArgs e) { MeshApplicationService meshApp = Application.Current.GetMeshApplicationService(); RenderContent(meshApp); } void RenderContent(MeshApplicationService meshApp){ //Accessing Mesh myMesh = meshApp.LiveOperatingEnvironment.Mesh; //Accessing the Application Mesh Object meshApp.Resources.Title = "My Title";

JavaScript API Kit

MeshApp.run = function MeshApp$run() {    Microsoft.LiveFX.MeshApplication.loadAsync(windows.location.hostname,

Delegate.create(null, function(meshApplicationContext) {

        if (meshApplicationContext.state !== Microsoft.LiveFX.OperationState.Success) {

            MeshApp._showError('MeshApplication Load Failed');        }        else

{            var meshApplication = meshApplicationContext.resource;            meshApplication.get_runtimeEndpoint().get_mesh().loadAsync

(Delegate.create(null, function(meshOperationContext) {

                        MeshApp._onLoadMesh(meshOperationContext);            }));        }    }));

App Authentication Options

Mesh-Enabled Web Application

• Pre-authenticated• Pre-authorized to

only access user consented data

• Sandboxed to browser

• No token management is required

Web Apps• Request for

partial access to user data (Delegated Authentication)

• Pass requested permissions, App ID & Secret

• After user consent, gets a token to use against Live Services endpoint

Rich Client Apps

• App runs as the user, with full permission

• Access to Cloud or Client Live Services endpoints

Mesh-Enabled Apps SandboxingAll about putting users in control of their data and apps

• Apps not allowed to access disk, other apps and user private data• User can explicitly grant permission to private data

Application Secure Context

• Standard: Contacts, Profiles, News, LiveMeshFolder• Custom Offers: <Custom Type> of Mesh Objects (promotes app type sharing)

Offers & Roles (Read, Write, Full)

Client Sandbox: Shared secret and cookies isolate each application

Live Desktop Sandbox: Cookies, Iframe and domain isolation

Delegated Authentication Flow

User

Third Party

Web Site Live Website________

Live Services

1) Add App to Mesh

5) Del Auth Token

2) Consent Request

6) Call with Token

3) Consent Request UI

4) Agree to Consent

Enables users to share their Live data with Websites

How to authenticate websites with Live Servics

demo

How to connect websites to MeshHow to use Delegated Auth Tokens

Delegation AuthorizationKey Concepts

•Uniquely identifies a Live Mesh ApplicationApplication ID

•Used to authenticate a third party websiteSecret

•Permissions can be managed at Mesh Object, Profiles, Contacts and Mesh Application levelResources•Privileges requested/given to third party web sites•Read, Contribute, OwnRoles & Offers

•A request by a web site to get access to a Mesh resourceConsent Request

•User explicit permission to an application to access his/her data & applicationsUser Consent

•An encrypted token representing a granted consentDelegation Token

•Used to refresh a token for a granted consentRefresh Token

Auto Update and Versioning

Updating Applications is a pain point for developers and end-users

Mesh Auto update service updates all the instances of a Mesh App upon use

Triggered when developer uploads a new version into Application Catalogue

Auto update is optional (user decides whether and when to update)

App Catalogue stores and renders multiple versions of an application

Application Catalogue

Global Store for all Mesh-Enabled Web Applications

Install From Catalogue Or Website

Developer View vs End-user View

Application Approval Process

Applications are addressable & shareable via URL

Accessed via Live Desktop web site

Key Takeaways (take 2)

Live Framework Provides Tools and

APIs Kits for Building Live

Connected Apps

Users Control Access to their Apps and Data

Mesh Service Synchronizes App

Files and App Data

Mesh-enabled Web Apps Extend

Websites to run Offline on Desktop

© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after

the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

PowerPoint Guidelines

Font, size, and color for text have been formatted for you in the Slide MasterUse the color palette shown belowSee next slide for additional guidelinesHyperlink color: www.microsoft.com

Sample FillSample FillSample Fill

Sample FillSample FillSample Fill

PowerPoint TemplateSubtitle color

Example of a slide with a subheadSet the slide title in “title case”Set subheads in “sentence case”Generally set subhead to 36pt or smaller so it will fit on a single lineThe subhead color is defined for this template but must be selected; In PowerPoint 2007, it is the fourth font color from the left

Bar Chart Example

Categ

ory

1

Categ

ory

2

Categ

ory

3

Categ

ory

40

1

2

3

4

5

Series 1Series 2Series 3

Pie Chart Example

59%23%

10%9%

Chart Title

1st Qtr2nd Qtr3rd Qtr4th Qtr

Line Chart Example

Categ

ory

1

Categ

ory

2

Categ

ory

3

Categ

ory

40

1

2

3

4

5

6

Series 1Series 2Series 3Series 4

Area Chart Example

Category 1

Category 2

Category 3

Category 4

0

2

4

6

8

10

12

14

16

Series 5Series 4Series 3

Demo Title

NameTitleGroup

demo

Video Title

video

Partner Title

NameTitleCompany

partner

Customer Title

NameTitleCompany

customer

Announcement Title

announcing