building the next generation of browser apps today
Post on 31-Oct-2014
6 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related