Building the next generation of browser apps today

Building the NextGeneration of WebApps 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 Columnist: SharePoint Pro magazine randy.williams@avepoint.com @tweetraw

Agenda

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!

Agenda

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

How CSOM Works Content Databas e

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

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

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

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

Agenda

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

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

Agenda

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 Use it to call web services from browser Use with SPServices to easily call SharePoint web services

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

Agenda

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 /> <nav /> <article> <aside> <section> <section /> Others <h2>Lorem Ipsum</h2> </aside> </section> </article> <footer />

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

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

Silverlight or HTML5? Silverlight HTML5Technology Status Mature and Stable EmergingDevice support IE, Safari, Firefox New browsers, iDevice, mobileBrowser compatibility Strong Varying support; must be testedMarkup & Code XAML & Managed code HTML, CSS & JavaScriptPlug in required? Silverlight NonePerformance Faster execution Faster StartupWeb service support Good Limited, improved with jQuery

Thank you

Join us right after the event at Firehouse Grillfor a free drink, kindly provided by AvePoint andRackspace! 1765 East Bayshore Road EastPalo Alto, CA 94303 (Next to Nordstrom Rack).

Building the next generation of browser apps today

by Randy Williams on Jun 04, 2012

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Building the next generation of browser apps today Presentation Transcript