• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Building the next generation of browser apps today
 

Building the next generation of browser apps today

on

  • 1,127 views

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

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.

Statistics

Views

Total Views
1,127
Views on SlideShare
1,127
Embed Views
0

Actions

Likes
1
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Introduction slide
  • 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.
  • Concepts Smart clientClient Object ModelWeb ServicesjQueryHTML5
  • Concepts Smart clientClient Object ModelWeb ServicesjQueryHTML5
  • Concepts Smart clientClient Object ModelWeb ServicesjQueryHTML5
  • Concepts Smart clientClient Object ModelWeb ServicesjQueryHTML5
  • Concepts Smart clientClient Object ModelWeb ServicesjQueryHTML5
  • Concepts Smart clientClient Object ModelWeb ServicesjQueryHTML5
  • New semantic tags New functional elementsGradiantsRounded cornersOpacity
  • Introduction slide
  • Introduction slide

Building the next generation of browser apps today Building the next generation of browser apps today Presentation Transcript

  • 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
  • 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
  • Demo
  • 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
  • Demo
  • 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
  • Demo
  • 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
  • Demo
  • 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).