building rich interface components with sharepoint
TRANSCRIPT
Building Rich Interface
Components with SharePoint
Louis-Philippe LavoieSharePoint SpecialistGSoft@lplavoie
December 1st, 2012
@lplavoie
@lplavoie
Target Audience
• Developer / Advanced• 1-3 years of SharePoint
• Web development background
• Know • HTML, jQuery
• Bonus: JSON & OData
• You should be here if :• Building (complex) InfoPath forms
• Using Silverlight
@lplavoie
Agenda
• What is a Rich Interface?
• Why would I want one?
• How do I build it? [+ Demo]
• Things to keep in mind
• Peek at SharePoint 2013
Objective : Understand the tools and techniques required to build rich interfaces on SharePoint
@lplavoie
What?
@lplavoie
Rich Interface
• Browser-based with features and UX similar to desktop-based
• Uses a number of technologies:• Before: Browser plug-ins
• Now:• JavaScript
• AJAX / JSON
• CSOM or web services
• HTML Templates
@lplavoie
Why?
@lplavoie
Why : Better User Experience
• No post backs (aka faster UI)
• More intuitive
• Better usability
• More modern look / less cluttered
@lplavoie
Why : Good Developer mojo
• Gain new, cutting-edge skills• Get ahead
• Increase your value
• SharePoint 2013 is all about JavaScript
• Faster development cycle• No code (or very little)
• Easier to deploy and debug
@lplavoie
Why : Happier IT Admins
• Scalability• Minimize bandwidth, server processing and database IO
• Delegate processing to client (but it’s not security!)
• Security• Isolation of privileged server-side code and
authenticated client-side requests
• Separation of responsibilities
• Administration• Easier / lighter to deploy
• Integration & Interoperability
@lplavoie
Why : Satisfied Managers
• Recent Industry standards (future-proof)
• Larger developer base to pick from• Web developers
• Faster development cycle• Rapid prototyping
• Faster delivery
@lplavoie
How?
@lplavoie
Tools
• Base : JavaScript• jQuery : De-facto standard with SharePoint
• UI Design• jQuery UI or jQuery Mobile : Best integration with
jQuery• Twitter Bootstrap, Foundation, etc. : Very promising but CSS do not
play well with SP
• Architecture• KnockoutJS
• MVVM design• Auto-bindings• HTML Templating
@lplavoie
SharePoint’s end points
• End Points• REST services (Listdata.svc / OData)• JSOM (Client.svc)• SPServices• SOAP endpoints / asmx web services : Deprecated
• Sample: Simple Item Repository • Works with: Chrome, Firefox, Safari (OSX, iPhone, iPad),
IE8+• IE7 : JSON2.js (https://github.com/douglascrockford/JSON-js)
• Simple or Grouped items
@lplavoie
Features : Drag & Drop + Touch
Possible with: Chrome, Firefox, Safari (OSX, iPhone, iPad), IE7+
• Major players (for SharePoint):• jQuery UI + jQuery Touch Punch
• jQuery Mobile
• Drag & Drop is part of the HTML5 spec
@lplavoie
Features : Responsive
Possible with: Chrome, Firefox, Safari (OSX, iPhone, iPad), IE8+
• @media Queries or a responsive framework (Foundation, Bootstrap Twitter)
• IE7, IE8 : HTML5Shims but UX is degraded
• See also : SharePoint HTML5 Master Pages
@lplavoie
Build it! : Task boardjQuery + jQueryUI + KnockoutJS
@lplavoie
SP2013 : REST oriented
• More exhaustive REST endpoints• Available for most service applications
• More commands and data
• Web app model specifically for this
• Hosted or Cloud-hosted• More integration points
@lplavoie
SP2013 : JavaScript oriented
• Remote-Loadable Chrome Control
• Client Side Rendering• HTML Templating (JSLink / micro templating)
• No more XSLT
• Minimal Download Strategy• Leverage AJAX to minimize postbacks and bandwidth
• Must be built into custom controls
• HTML5/CSS3/JavaScript now part of SP2013 Certification
@lplavoie
Keep in mind
• Localization : Objects are referred to by display name
• MUI may cause display names to change• Use SP’s built-in handler for resource localization
• Limited data/state management• Best: Cookies or server-side• HTML5 will help
• Behaviour of browser back button • Modern frameworks now handle it
• Client-side is outside DMZ (i.e. not secure)
@lplavoie
Build up your skills!
• Browser ecosystem can be unforgiving (IE7 ?!)• Modern frameworks and a good test strategy will solve that
• Asynchronous processing can be complex• See Promises (Deferred)
• Modules don’t always cooperate
• Many different options• For client-server communication• For architecture• For UI
• Many ways to do it wrong• Read up on best practices
@lplavoie
Summary
• We have seen:• What is a “Rich Interface”
• Tools and Techniques used to build one
• Live example
• Peek at SP2013
• Caveats + possible solutions
@lplavoie
Additional Resources
• FREE HTML5/CSS3/JavaScript courses• http://www.microsoftvirtualacademy.com/tracks/developing-html5-apps-jump-start
• See also : PluralSight ($)• http://pluralsight.com/training/Courses/TableOfContents?courseName=knocko
ut-mvvm
• FREE Certification (Exam 70-480)
• KnockoutJS Tutorials• http://learn.knockoutjs.com/
@lplavoie
Thank You!
• @lplavoie
• http://spdynamite.net• GSoft’s SharePoint Team Blog
@lplavoie
Join us for SharePint today!
Date & Time: Dec 1st, 2012 @6:00 pm
Location: Pub Italia
Address: 434 ½ Preston Street
Parking: On street with meters $
Site: http://www.pubitalia.ca/
Remember to fill out your evaluation forms to win some great
prizes!
&