1. Building Rich
December 1st, 2012
Interface
Components with
SharePoint
Louis-Philippe Lavoie
SharePoint Specialist
GSoft
@lplavoie

2. @lplavoie

3. Who am I?
Louis-Philippe Lavoie
http://spdynamite.net @lplavoie
@lplavoie

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

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

6. What?
@lplavoie

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

8. Why?
@lplavoie

9. Why : Better User
Experience
• No post backs (aka faster UI)
• More intuitive
• Better usability
• More modern look / less cluttered
@lplavoie

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

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

12. Why : Satisfied Managers
• Recent Industry standards (future-proof)
• Larger developer base to pick from
• Web developers
• Faster development cycle
• Rapid prototyping
• Faster delivery
@lplavoie

13. How?
@lplavoie

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

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

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

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

18. Build it! :
Task board
jQuery + jQueryUI + KnockoutJS
@lplavoie

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

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

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

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

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

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

25. Thank You!
• @lplavoie
• louis-philippe.lavoie@gsoft-group.com
• http://spdynamite.net
• GSoft’s SharePoint Team Blog
@lplavoie

26. Remember to fill out your evaluation forms to win some great
prizes!
&
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/
@lplavoie