mesh-enabled web applications
TRANSCRIPT
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