Building RichDecember 1st, 2012                               Interface                        Components with            ...
@lplavoie
Who am I?        Louis-Philippe Lavoie            http://spdynamite.net   @lplavoie@lplavoie
Target Audience     • Developer / Advanced            • 1-3 years of SharePoint            • Web development background   ...
Agenda     • What is a Rich Interface?     • Why would I want one?     • How do I build it? [+ Demo]     • Things to keep ...
What?@lplavoie
Rich Interface     • Browser-based with features and UX similar to       desktop-based     • Uses a number of technologies...
Why?@lplavoie
Why : Better User     Experience     • No post backs (aka faster UI)     • More intuitive     • Better usability     • Mor...
Why : Good Developer mojo     • Gain new, cutting-edge skills            • Get ahead     • Increase your value     • Share...
Why : Happier IT Admins     • Scalability            • Minimize bandwidth, server processing and database IO            • ...
Why : Satisfied Managers     • Recent Industry standards (future-proof)     • Larger developer base to pick from          ...
How?@lplavoie
Tools     • Base : JavaScript            • jQuery : De-facto standard with SharePoint     • UI Design            • jQuery ...
SharePoint’s end points     • End Points            •   REST services (Listdata.svc / OData)            •   JSOM (Client.s...
Features : Drag & Drop +     Touch     Possible with: Chrome, Firefox, Safari     (OSX, iPhone, iPad), IE7+     • Major pl...
Features : Responsive     Possible with: Chrome, Firefox, Safari (OSX, iPhone,     iPad), IE8+     • @media Queries or a r...
Build it! :     Task board     jQuery + jQueryUI + KnockoutJS@lplavoie
SP2013 : REST oriented     • More exhaustive REST endpoints            • Available for most service applications          ...
SP2013 : JavaScript oriented     • Remote-Loadable Chrome Control     • Client Side Rendering            • HTML Templating...
Keep in mind     • Localization : Objects are referred to by display       name            • MUI may cause display names t...
Build up your skills!     • Browser ecosystem can be unforgiving (IE7 ?!)            • Modern frameworks and a good test s...
Summary     • We have seen:            •   What is a “Rich Interface”            •   Tools and Techniques used to build on...
Additional Resources     • FREE HTML5/CSS3/JavaScript courses            • http://www.microsoftvirtualacademy.com/tracks/d...
Thank You!     • @lplavoie     • louis-philippe.lavoie@gsoft-group.com     • http://spdynamite.net            • GSoft’s Sh...
Remember to fill out your evaluation forms to win some great                                 prizes!                      ...
Upcoming SlideShare
Loading in …5
×

Building rich interface components with SharePoint

1,335 views
1,095 views

Published on

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

No Downloads
Views
Total views
1,335
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Building rich interface components with SharePoint

  1. 1. Building RichDecember 1st, 2012 Interface Components with SharePointLouis-Philippe LavoieSharePoint SpecialistGSoft@lplavoie
  2. 2. @lplavoie
  3. 3. Who am I? Louis-Philippe Lavoie http://spdynamite.net @lplavoie@lplavoie
  4. 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. 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. 6. What?@lplavoie
  7. 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. 8. Why?@lplavoie
  9. 9. Why : Better User Experience • No post backs (aka faster UI) • More intuitive • Better usability • More modern look / less cluttered@lplavoie
  10. 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. 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. 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. 13. How?@lplavoie
  14. 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. 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. 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. 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. 18. Build it! : Task board jQuery + jQueryUI + KnockoutJS@lplavoie
  19. 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. 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. 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. 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. 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. 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. 25. Thank You! • @lplavoie • louis-philippe.lavoie@gsoft-group.com • http://spdynamite.net • GSoft’s SharePoint Team Blog@lplavoie
  26. 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

×