Building the Next Generation of Web Apps TodayRandy WilliamsEnterprise Trainer and EvangelistAvePoint

Randy Williams Enterprise Trainer & Evangelist Based in San Diego, CA SharePoint MVP for 2009, 2010, 2011 Speaker at many global conferences

20+ years in IT Developer, consultant, trainer, author

Columnist: SharePoint Pro magazine randy.williams@avepoint.com @tweetraw

Agenda

Core Concepts

Client Object Model

OData Web Services

jQuery HTML5

Agenda

Core Concepts

Core Concepts Treat browser clients as smart clients Smart clients make intelligent requests

i.e., web service calls Think of the AJAX model

Most roads lead to JavaScript Not all browsers are created equal Trade off between best-of-breed vs least common

denominator Addressing backward compatibility Devices rule!

Agenda

Client Object Model

Client Object Model (CSOM)

Based on the AJAX model - provides rich UX Available in three different forms

ECMAScript (JavaScript) Silverlight .NET Managed

Some similar patterns with Server OM Much easier than calling web services directly Designed to work with data within a site collection

How CSOM Works

JavaScript Controls and Logic

JavaScript OM

ProxyXML Request

JSON Response

Proxy

Managed OM

Managed Controls and Logic

Client.svcXML

Request

JSON Response

Content

Database

Server OM

SharePoint Server

Client

ClientContext object ClientContext is your handle to all other objects

Site, Web, List, Item, File Optimizes communication to server by batching

requests Typical usage:

Define a query to retrieve or modify SharePoint objects Pass the query to one of the ClientContext’s Load

methods Use ClientContext to execute the query Work with results returned

Getting a reference to ClientContext JavaScript

Use the default constructor of ClientContext to reference the current site

Instantiate a new instance of ClientContext using the server relative Url of a site

Silverlight Instantiate a new instance of ClientContext using the address of

the site as a string or Uri Use the static ClientContext.Current

.NET Managed Instantiate a new instance of ClientContext

using the address of the site as a string or Uri

Adding project references

JavaScript (link from code) /_layouts/SP.js

Silverlight references Microsoft.SharePoint.Client.Silverlight.dll Microsoft.SharePoint.Client.Silverlight.Runtime.d

ll .NET Managed references

Microsoft.SharePoint.Client.dll Microsoft.SharePoint.Client.Runtime.dll

Sample from JavaScript

Sample from Silverlight

Some CSOM limitations ClientContext is bound to functionality within a site

collection Feature set is restricted to SharePoint Foundation Access to data in fields is not strongly typed Cannot execute code with elevated permissions SystemUpdate not available Versions are not accessible

Demo

Client Object Model

Agenda

OData Web Services

OData (REST) SharePoint list data is exposed

http://sp2010/site/_vti_bin/listdata.svc Provided by WCF Data Services

Data access can be strongly typed Data access is limited to items in lists Supports full CRUD operations

Read, Insert, Update, Delete Data can be accessed from virtually any client application Use datajs to easily call OData web services

http://datajs.codeplex.com

OData Examples View available lists

http://sp2010/_vti_bin/listdata.svc View data in the contacts list

http://sp2010/_vti_bin/listdata.svc/Contacts View the contact with ID of 1

http://sp2010/_vti_bin/listdata.svc/Contacts(1) View contact items ordered by modified date

http://sp2010/_vti_bin/listdata.svc/Contacts/?$orderby=Modified View filtered contact items

http://sp2010/_vti_bin/listdata.svc/Contacts/?$filter=(FirstName eq ‘John’) Select certain columns

http://sp2010/_vti_bin/listdata.svc/Contacts/?$select=LastName,FirstName

Demo

OData

Agenda

jQuery

Using jQuery Multi-purpose JavaScript library Basic purpose: Retrieve elements on the page and

perform actions Create interactive and usable apps With it, you will write less JavaScript Cross-browser support No need to deploy assemblies Thousands of jQuery plugins

Using jQuery in SharePoint Works great in sandboxed web parts

Great way to “break out” of the sandbox Use it to call web services from browser Use with SPServices to easily call SharePoint web

services http://spservices.codeplex.com

How to reference the jQuery libraries? Reference from existing CDN

https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js

or Deploy as a module-type feature Copy manually to designed libraries

e.g. SiteAssets Shared vs individual instances Best to not rename file

e.g. keep as jquery-1.7.2.js

Demo

jQuery

Agenda

HTML5

HTML5 Overview The future standard of HTML Replaces HTML 4.01 from 1999 New elements New styles (CSS 3.0) New JavaScript APIs Better error handling Device independent (browsers, tablet, etc) Avoid browser plug ins Still in development Varying support from browsers (partial adoption)

New Elements Structural

<header> <footer> <nav> <article> <section>

Others <figure> <dialog> <meter> <progress>

<header />

<nav />

<footer />

<article> <section> <h2>Lorem Ipsum</h2> </section></article>

<aside> <section /></aside>

Unsupported elements <frame> <frameset> <noframes> <center> <font> <dir> <strike>

Media Support Stream audio & video – no plug in No single encoding format – currently browser dependent

Browser MP4 WebM Ogg

Internet Explorer 9 YES NO NO

Firefox 4.0 NO YES YES

Google Chrome 6 YES YES YES

Apple Safari 5 YES NO NO

Opera 10.6 NO YES YES

Canvas Draw 2D graphics on the page using JavaScript Lines, curves, gradients, shadows, rotations

Inline Scalable Vector Graphics (svg)

New DocType Clean and simple

Using HTML5 in SharePoint Edit master page to reflect DocType Specify IE 9 content

Demo

HTML5

Silverlight or HTML5?Silverlight HTML5

Technology Status Mature and Stable Emerging

Device support IE, Safari, Firefox New browsers, iDevice, mobile

Browser compatibility Strong Varying support; must be tested

Markup & Code XAML & Managed code HTML, CSS & JavaScript

Plug in required? Silverlight None

Performance Faster execution Faster Startup

Web service support Good Limited, improved with jQuery

randy.williams@avepoint.com@tweetraw

Thank you

Thanks to Our Sponsors

Join us right after the event at Firehouse Grill for a free drink, kindly provided by AvePoint and Rackspace! 1765 East Bayshore Road  East Palo Alto, CA 94303 (Next to Nordstrom Rack). 

Don’t Forget SharePint