building the next generation of browser apps today
DESCRIPTION
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.TRANSCRIPT
![Page 1: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/1.jpg)
![Page 2: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/2.jpg)
Building the Next Generation of Web Apps TodayRandy WilliamsEnterprise Trainer and EvangelistAvePoint
![Page 3: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/3.jpg)
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 [email protected] @tweetraw
![Page 4: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/4.jpg)
Agenda
Core Concepts
Client Object Model
OData Web Services
jQuery HTML5
![Page 5: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/5.jpg)
Agenda
Core Concepts
![Page 6: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/6.jpg)
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!
![Page 7: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/7.jpg)
Agenda
Client Object Model
![Page 8: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/8.jpg)
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
![Page 9: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/9.jpg)
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
![Page 10: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/10.jpg)
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
![Page 11: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/11.jpg)
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
![Page 12: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/12.jpg)
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
![Page 13: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/13.jpg)
Sample from JavaScript
![Page 14: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/14.jpg)
Sample from Silverlight
![Page 15: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/15.jpg)
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
![Page 16: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/16.jpg)
Demo
Client Object Model
![Page 17: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/17.jpg)
Agenda
OData Web Services
![Page 18: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/18.jpg)
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
![Page 19: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/19.jpg)
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
![Page 20: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/20.jpg)
Demo
OData
![Page 21: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/21.jpg)
Agenda
jQuery
![Page 22: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/22.jpg)
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
![Page 23: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/23.jpg)
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
![Page 24: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/24.jpg)
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
![Page 25: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/25.jpg)
Demo
jQuery
![Page 26: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/26.jpg)
Agenda
HTML5
![Page 27: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/27.jpg)
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)
![Page 28: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/28.jpg)
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>
![Page 29: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/29.jpg)
Unsupported elements <frame> <frameset> <noframes> <center> <font> <dir> <strike>
![Page 30: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/30.jpg)
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
![Page 31: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/31.jpg)
Canvas Draw 2D graphics on the page using JavaScript Lines, curves, gradients, shadows, rotations
![Page 32: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/32.jpg)
Inline Scalable Vector Graphics (svg)
![Page 33: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/33.jpg)
New DocType Clean and simple
![Page 34: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/34.jpg)
Using HTML5 in SharePoint Edit master page to reflect DocType Specify IE 9 content
![Page 35: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/35.jpg)
Demo
HTML5
![Page 36: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/36.jpg)
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
![Page 38: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/38.jpg)
Thanks to Our Sponsors
![Page 39: Building the next generation of browser apps today](https://reader035.vdocuments.us/reader035/viewer/2022070301/54533081af7959ce428b8b9e/html5/thumbnails/39.jpg)
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