As browsers evolve and mobile devices proliferate, are your SharePoint applications keeping up? Are you still using old-school, server-side technologies in web parts or application pages? By unleashing the browser’s full potential, you can deliver unparalleled responsiveness and cross-device richness. In this session, come learn how HTML 5, jQuery, and SharePoint’s client object model can spice up your applications. We’ll also see how these technologies let you “break out of the sandbox”, enhancing both on premise and SharePoint Online solutions.

2. Building the Next
Generation of Web
Apps Today
Randy Williams
Enterprise Trainer and Evangelist
AvePoint

3. 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
 Columnist: SharePoint Pro magazine
 randy.williams@avepoint.com
 @tweetraw

4. Agenda

5. Agenda

6. Core Concepts
 Treat browser clients as smart clients
 Smart clients make intelligent requests
 Most roads lead to JavaScript
 Not all browsers are created equal
 Devices rule!

7. Agenda

8. Client Object Model (CSOM)
 Based on the AJAX model - provides rich UX
 Available in three different forms
 Some similar patterns with Server OM
 Much easier than calling web services directly
 Designed to work with data within a site collection

9. How CSOM Works
Content
Databas
e

10. ClientContext object
 ClientContext is your handle to all other objects
 Optimizes communication to server by batching requests
 Typical usage:

11. Getting a reference to ClientContext
 JavaScript
 Silverlight
 .NET Managed

12. Adding project references
 JavaScript (link from code)
 Silverlight references
 .NET Managed references

13. Sample from JavaScript

14. Sample from Silverlight

15. 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

16. Demo

17. Agenda

18. OData (REST)
 SharePoint list data is exposed
 Data access can be strongly typed
 Data access is limited to items in lists
 Supports full CRUD operations
 Data can be accessed from virtually any client application
 Use datajs to easily call OData web services

19. OData Examples
 View available lists
 View data in the contacts list
 View the contact with ID of 1
 View contact items ordered by modified date
 View filtered contact items
 Select certain columns
 http://sp2010/_vti_bin/listdata.svc/Contacts/?$select=LastName,FirstName

20. Demo

21. Agenda

22. 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

23. Using jQuery in SharePoint
 Works great in sandboxed web parts
 Use it to call web services from browser
 Use with SPServices to easily call SharePoint web
services

24. How to reference the jQuery libraries?
 Reference from existing CDN
or
 Deploy as a module-type feature
 Copy manually to designed libraries
 Shared vs individual instances
 Best to not rename file

25. Demo

26. Agenda

27. 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)

28. New Elements
 Structural
<header />
<nav />
<article> <aside>
<section> <section />
 Others <h2>Lorem Ipsum</h2> </aside>
</section>
</article>
<footer />

29. Unsupported elements
 <frame>
 <frameset>
 <noframes>
 <center>
 <font>
 <dir>
 <strike>

30. Media Support
 Stream audio & video – no plug in 
 No single encoding format – currently browser dependent 
Browser MP4 WebM Ogg
Internet Explorer
YES NO NO
9
Firefox 4.0 NO YES YES
Google Chrome 6 YES YES YES
Apple Safari 5 YES NO NO
Opera 10.6 NO YES YES

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

32. Inline Scalable Vector Graphics (svg)

33. New DocType
 Clean and simple

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

35. Demo

36. 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

37. Thank you

39. 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).