Building the NextGeneration of WebApps TodayRandy WilliamsEnterprise Trainer and EvangelistAvePoint
Randy Williams            Enterprise Trainer & Evangelist            Based in San Diego, CA            SharePoint MVP f...
Agenda
Agenda
Core Concepts Treat browser clients as smart clients Smart clients make intelligent requests Most roads lead to JavaScr...
Agenda
Client Object Model (CSOM) Based on the AJAX model - provides rich UX Available in three different forms Some similar p...
How CSOM Works                 Content                 Databas                    e
ClientContext object ClientContext is your handle to all other objects Optimizes communication to server by batching req...
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 ...
Demo
Agenda
OData (REST) SharePoint list data is exposed Data access can be strongly typed Data access is limited to items in lists...
OData Examples View available lists View data in the contacts list View the contact with ID of 1 View contact items or...
Demo
Agenda
Using jQuery Multi-purpose JavaScript library Basic purpose: Retrieve elements on the page and    perform actions   Cre...
Using jQuery in SharePoint Works great in sandboxed web parts Use it to call web services from browser Use with SPServi...
How to reference the jQuery libraries? Reference from existing CDNor Deploy as a module-type feature Copy manually to d...
Demo
Agenda
HTML5 Overview   The future standard of HTML   Replaces HTML 4.01 from 1999   New elements   New styles (CSS 3.0)   N...
New Elements Structural               <header />               <nav />               <article>                  <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...
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     Emer...
Thank you
Join us right after the event at Firehouse Grillfor a free drink, kindly provided by AvePoint andRackspace! 1765 East Bays...
Building the next generation of browser apps today
Building the next generation of browser apps today
Upcoming SlideShare
Loading in...5
×

Building the next generation of browser apps today

821

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
821
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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 &lt;header&gt; &lt;nav&gt;New functional elementsGradiantsRounded cornersOpacity
  • Introduction slide
  • Introduction slide
  • Transcript of "Building the next generation of browser apps today"

    1. 1. Building the NextGeneration of WebApps TodayRandy WilliamsEnterprise Trainer and EvangelistAvePoint
    2. 2. 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
    3. 3. Agenda
    4. 4. Agenda
    5. 5. 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!
    6. 6. Agenda
    7. 7. 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
    8. 8. How CSOM Works Content Databas e
    9. 9. ClientContext object ClientContext is your handle to all other objects Optimizes communication to server by batching requests Typical usage:
    10. 10. Getting a reference to ClientContext JavaScript Silverlight .NET Managed
    11. 11. Adding project references JavaScript (link from code) Silverlight references .NET Managed references
    12. 12. Sample from JavaScript
    13. 13. Sample from Silverlight
    14. 14. 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
    15. 15. Demo
    16. 16. Agenda
    17. 17. 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
    18. 18. 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
    19. 19. Demo
    20. 20. Agenda
    21. 21. 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
    22. 22. 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
    23. 23. 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
    24. 24. Demo
    25. 25. Agenda
    26. 26. 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)
    27. 27. New Elements Structural <header /> <nav /> <article> <aside> <section> <section /> Others <h2>Lorem Ipsum</h2> </aside> </section> </article> <footer />
    28. 28. Unsupported elements <frame> <frameset> <noframes> <center> <font> <dir> <strike>
    29. 29. 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
    30. 30. Canvas Draw 2D graphics on the page using JavaScript Lines, curves, gradients, shadows, rotations
    31. 31. Inline Scalable Vector Graphics (svg)
    32. 32. New DocType Clean and simple
    33. 33. Using HTML5 in SharePoint Edit master page to reflect DocType Specify IE 9 content
    34. 34. Demo
    35. 35. 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
    36. 36. Thank you
    37. 37. 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).
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×