SlideShare a Scribd company logo
Building Rich
December 1st, 2012
                               Interface
                        Components with
                            SharePoint




Louis-Philippe Lavoie
SharePoint Specialist
GSoft
@lplavoie
@lplavoie
Who am I?
        Louis-Philippe Lavoie




            http://spdynamite.net   @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 board
     jQuery + 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

     • louis-philippe.lavoie@gsoft-group.com

     • http://spdynamite.net
            • GSoft’s SharePoint Team Blog




@lplavoie
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

More Related Content

What's hot

To infinity and Beyond with Plone 5!
To infinity and Beyond with Plone 5!To infinity and Beyond with Plone 5!
To infinity and Beyond with Plone 5!
Rikupekka Oksanen
 
Frontender in-2016
Frontender in-2016Frontender in-2016
Frontender in-2016
Filip Bruun Bech-Larsen
 
Getting SEO performance in Angular Meteor with ngmeta
Getting SEO performance in Angular Meteor with ngmetaGetting SEO performance in Angular Meteor with ngmeta
Getting SEO performance in Angular Meteor with ngmeta
Will Haire
 
Content as a Service: What to Know About Decoupled CMS
Content as a Service: What to Know About Decoupled CMSContent as a Service: What to Know About Decoupled CMS
Content as a Service: What to Know About Decoupled CMS
Pantheon
 
Our Battle Against Technical Debt
Our Battle Against Technical DebtOur Battle Against Technical Debt
Our Battle Against Technical Debt
ifnu bima
 
Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21
Chris Danford
 
HTML5のご紹介
HTML5のご紹介HTML5のご紹介
HTML5のご紹介
yoshikawa_t
 
Web Development Today
Web Development TodayWeb Development Today
Web Development Today
bretticus
 
WordPress as a Service
WordPress as a ServiceWordPress as a Service
WordPress as a Service
Andrew Bauer
 
Intro to drupal
Intro to drupalIntro to drupal
Intro to drupal
hernanibf
 
Careers in SharePoint, Office 365, Azure & Power BI
Careers in SharePoint, Office 365, Azure & Power BICareers in SharePoint, Office 365, Azure & Power BI
Careers in SharePoint, Office 365, Azure & Power BI
Matthew J. Bailey , MCT
 
Making Wcm Easy With Alfresco Share 3 2
Making Wcm Easy With Alfresco Share 3 2Making Wcm Easy With Alfresco Share 3 2
Making Wcm Easy With Alfresco Share 3 2
Alfresco Software
 
Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...
Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...
Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...
Eric Greene
 
Html5
Html5Html5
Html5
Nasla C.K
 
WordPress as a CMS - Case Study of an Organizational Intranet
WordPress as a CMS - Case Study of an Organizational IntranetWordPress as a CMS - Case Study of an Organizational Intranet
WordPress as a CMS - Case Study of an Organizational Intranet
Tech Liminal
 
Making Multisite Work for You
Making Multisite Work for YouMaking Multisite Work for You
Making Multisite Work for You
drywallbmb
 
Concrete5 workshop
Concrete5 workshopConcrete5 workshop
Concrete5 workshop
Russell Searle
 
Service Workers: no more offline!
Service Workers: no more offline!Service Workers: no more offline!
Service Workers: no more offline!
maciej-adamczak
 
tTecniche di sviluppo mobile per share point 2013 e office 365
tTecniche di sviluppo mobile per share point 2013 e office 365 tTecniche di sviluppo mobile per share point 2013 e office 365
tTecniche di sviluppo mobile per share point 2013 e office 365
Fabio Franzini
 
Building Responsive Intranet using Sharepoint Framework solutions - Asish Pad...
Building Responsive Intranet using Sharepoint Framework solutions - Asish Pad...Building Responsive Intranet using Sharepoint Framework solutions - Asish Pad...
Building Responsive Intranet using Sharepoint Framework solutions - Asish Pad...
Asish Padhy
 

What's hot (20)

To infinity and Beyond with Plone 5!
To infinity and Beyond with Plone 5!To infinity and Beyond with Plone 5!
To infinity and Beyond with Plone 5!
 
Frontender in-2016
Frontender in-2016Frontender in-2016
Frontender in-2016
 
Getting SEO performance in Angular Meteor with ngmeta
Getting SEO performance in Angular Meteor with ngmetaGetting SEO performance in Angular Meteor with ngmeta
Getting SEO performance in Angular Meteor with ngmeta
 
Content as a Service: What to Know About Decoupled CMS
Content as a Service: What to Know About Decoupled CMSContent as a Service: What to Know About Decoupled CMS
Content as a Service: What to Know About Decoupled CMS
 
Our Battle Against Technical Debt
Our Battle Against Technical DebtOur Battle Against Technical Debt
Our Battle Against Technical Debt
 
Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21
 
HTML5のご紹介
HTML5のご紹介HTML5のご紹介
HTML5のご紹介
 
Web Development Today
Web Development TodayWeb Development Today
Web Development Today
 
WordPress as a Service
WordPress as a ServiceWordPress as a Service
WordPress as a Service
 
Intro to drupal
Intro to drupalIntro to drupal
Intro to drupal
 
Careers in SharePoint, Office 365, Azure & Power BI
Careers in SharePoint, Office 365, Azure & Power BICareers in SharePoint, Office 365, Azure & Power BI
Careers in SharePoint, Office 365, Azure & Power BI
 
Making Wcm Easy With Alfresco Share 3 2
Making Wcm Easy With Alfresco Share 3 2Making Wcm Easy With Alfresco Share 3 2
Making Wcm Easy With Alfresco Share 3 2
 
Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...
Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...
Building WordPress sites with AngularJS and the RESTful plugin JSON API @ Dev...
 
Html5
Html5Html5
Html5
 
WordPress as a CMS - Case Study of an Organizational Intranet
WordPress as a CMS - Case Study of an Organizational IntranetWordPress as a CMS - Case Study of an Organizational Intranet
WordPress as a CMS - Case Study of an Organizational Intranet
 
Making Multisite Work for You
Making Multisite Work for YouMaking Multisite Work for You
Making Multisite Work for You
 
Concrete5 workshop
Concrete5 workshopConcrete5 workshop
Concrete5 workshop
 
Service Workers: no more offline!
Service Workers: no more offline!Service Workers: no more offline!
Service Workers: no more offline!
 
tTecniche di sviluppo mobile per share point 2013 e office 365
tTecniche di sviluppo mobile per share point 2013 e office 365 tTecniche di sviluppo mobile per share point 2013 e office 365
tTecniche di sviluppo mobile per share point 2013 e office 365
 
Building Responsive Intranet using Sharepoint Framework solutions - Asish Pad...
Building Responsive Intranet using Sharepoint Framework solutions - Asish Pad...Building Responsive Intranet using Sharepoint Framework solutions - Asish Pad...
Building Responsive Intranet using Sharepoint Framework solutions - Asish Pad...
 

Similar to Building rich interface components with SharePoint

HTML5
HTML5HTML5
Spsbe2012 sessie start to-jquery
Spsbe2012 sessie start to-jquerySpsbe2012 sessie start to-jquery
Spsbe2012 sessie start to-jquery
Marijn Somers
 
HTML 5
HTML 5HTML 5
Mobile ECM with JavaScript - JSE 2011
Mobile ECM with JavaScript - JSE 2011Mobile ECM with JavaScript - JSE 2011
Mobile ECM with JavaScript - JSE 2011
Nuxeo
 
#SPSOttawa 2017 migrate to the #SharePoint Framework #spfx
#SPSOttawa 2017 migrate to the #SharePoint Framework #spfx#SPSOttawa 2017 migrate to the #SharePoint Framework #spfx
#SPSOttawa 2017 migrate to the #SharePoint Framework #spfx
Vincent Biret
 
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
Marc D Anderson
 
#SPSNYC 2018 Migrate your custom components to the #SharePoint Framework #SPFX
#SPSNYC 2018 Migrate your custom components to the #SharePoint Framework #SPFX#SPSNYC 2018 Migrate your custom components to the #SharePoint Framework #SPFX
#SPSNYC 2018 Migrate your custom components to the #SharePoint Framework #SPFX
Vincent Biret
 
#SPSToronto 2018 migrate you custom development to the SharePoint Framework
#SPSToronto 2018 migrate you custom development to the SharePoint Framework#SPSToronto 2018 migrate you custom development to the SharePoint Framework
#SPSToronto 2018 migrate you custom development to the SharePoint Framework
Vincent Biret
 
Google Developers Group Cloud Los Angeles, Progressive Web Applications by Ta...
Google Developers Group Cloud Los Angeles, Progressive Web Applications by Ta...Google Developers Group Cloud Los Angeles, Progressive Web Applications by Ta...
Google Developers Group Cloud Los Angeles, Progressive Web Applications by Ta...
Marie Smith
 
Pearls and Must-Have Tools for the Modern Web / .NET Developer
Pearls and Must-Have Tools for the Modern Web / .NET DeveloperPearls and Must-Have Tools for the Modern Web / .NET Developer
Pearls and Must-Have Tools for the Modern Web / .NET Developer
Ofer Zelig
 
Exploring Content API Options - March 23rd 2016
Exploring Content API Options - March 23rd 2016Exploring Content API Options - March 23rd 2016
Exploring Content API Options - March 23rd 2016
Jani Tarvainen
 
Vincent biret azure functions and flow (ottawa)
Vincent biret azure functions and flow (ottawa)Vincent biret azure functions and flow (ottawa)
Vincent biret azure functions and flow (ottawa)
Vincent Biret
 
Vincent biret azure functions and flow (toronto)
Vincent biret azure functions and flow (toronto)Vincent biret azure functions and flow (toronto)
Vincent biret azure functions and flow (toronto)
Vincent Biret
 
API Architecture Summit 2014- APIs: A Mobile Developer's Perspective
API Architecture Summit 2014- APIs: A Mobile Developer's PerspectiveAPI Architecture Summit 2014- APIs: A Mobile Developer's Perspective
API Architecture Summit 2014- APIs: A Mobile Developer's Perspective
Niall Roche
 
The Characteristics of a Successful SPA
The Characteristics of a Successful SPAThe Characteristics of a Successful SPA
The Characteristics of a Successful SPA
Gil Fink
 
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Brian Culver
 
Bringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePointBringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePoint
Chad Schroeder
 
Sps toronto introduction to azure functions microsoft flow
Sps toronto introduction to azure functions microsoft flowSps toronto introduction to azure functions microsoft flow
Sps toronto introduction to azure functions microsoft flow
Vincent Biret
 
Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!
Jeremy Likness
 
Code for Startup MVP (Ruby on Rails) Session 1
Code for Startup MVP (Ruby on Rails) Session 1Code for Startup MVP (Ruby on Rails) Session 1
Code for Startup MVP (Ruby on Rails) Session 1
Henry S
 

Similar to Building rich interface components with SharePoint (20)

HTML5
HTML5HTML5
HTML5
 
Spsbe2012 sessie start to-jquery
Spsbe2012 sessie start to-jquerySpsbe2012 sessie start to-jquery
Spsbe2012 sessie start to-jquery
 
HTML 5
HTML 5HTML 5
HTML 5
 
Mobile ECM with JavaScript - JSE 2011
Mobile ECM with JavaScript - JSE 2011Mobile ECM with JavaScript - JSE 2011
Mobile ECM with JavaScript - JSE 2011
 
#SPSOttawa 2017 migrate to the #SharePoint Framework #spfx
#SPSOttawa 2017 migrate to the #SharePoint Framework #spfx#SPSOttawa 2017 migrate to the #SharePoint Framework #spfx
#SPSOttawa 2017 migrate to the #SharePoint Framework #spfx
 
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
SPS Monaco 2017 - The Lay of the Land of Client-Side Development circa 2017
 
#SPSNYC 2018 Migrate your custom components to the #SharePoint Framework #SPFX
#SPSNYC 2018 Migrate your custom components to the #SharePoint Framework #SPFX#SPSNYC 2018 Migrate your custom components to the #SharePoint Framework #SPFX
#SPSNYC 2018 Migrate your custom components to the #SharePoint Framework #SPFX
 
#SPSToronto 2018 migrate you custom development to the SharePoint Framework
#SPSToronto 2018 migrate you custom development to the SharePoint Framework#SPSToronto 2018 migrate you custom development to the SharePoint Framework
#SPSToronto 2018 migrate you custom development to the SharePoint Framework
 
Google Developers Group Cloud Los Angeles, Progressive Web Applications by Ta...
Google Developers Group Cloud Los Angeles, Progressive Web Applications by Ta...Google Developers Group Cloud Los Angeles, Progressive Web Applications by Ta...
Google Developers Group Cloud Los Angeles, Progressive Web Applications by Ta...
 
Pearls and Must-Have Tools for the Modern Web / .NET Developer
Pearls and Must-Have Tools for the Modern Web / .NET DeveloperPearls and Must-Have Tools for the Modern Web / .NET Developer
Pearls and Must-Have Tools for the Modern Web / .NET Developer
 
Exploring Content API Options - March 23rd 2016
Exploring Content API Options - March 23rd 2016Exploring Content API Options - March 23rd 2016
Exploring Content API Options - March 23rd 2016
 
Vincent biret azure functions and flow (ottawa)
Vincent biret azure functions and flow (ottawa)Vincent biret azure functions and flow (ottawa)
Vincent biret azure functions and flow (ottawa)
 
Vincent biret azure functions and flow (toronto)
Vincent biret azure functions and flow (toronto)Vincent biret azure functions and flow (toronto)
Vincent biret azure functions and flow (toronto)
 
API Architecture Summit 2014- APIs: A Mobile Developer's Perspective
API Architecture Summit 2014- APIs: A Mobile Developer's PerspectiveAPI Architecture Summit 2014- APIs: A Mobile Developer's Perspective
API Architecture Summit 2014- APIs: A Mobile Developer's Perspective
 
The Characteristics of a Successful SPA
The Characteristics of a Successful SPAThe Characteristics of a Successful SPA
The Characteristics of a Successful SPA
 
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
 
Bringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePointBringing HTML5 alive in SharePoint
Bringing HTML5 alive in SharePoint
 
Sps toronto introduction to azure functions microsoft flow
Sps toronto introduction to azure functions microsoft flowSps toronto introduction to azure functions microsoft flow
Sps toronto introduction to azure functions microsoft flow
 
Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!Single Page Applications: Your Browser is the OS!
Single Page Applications: Your Browser is the OS!
 
Code for Startup MVP (Ruby on Rails) Session 1
Code for Startup MVP (Ruby on Rails) Session 1Code for Startup MVP (Ruby on Rails) Session 1
Code for Startup MVP (Ruby on Rails) Session 1
 

Recently uploaded

Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
SynapseIndia
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
shanihomely
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
Anant Gupta
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
bellared2
 
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision MakingConnector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
DianaGray10
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
Priyanka Aash
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
Safe Software
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
Zilliz
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
SAI KAILASH R
 
Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10
ankush9927
 
Mastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for SuccessMastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for Success
David Wilson
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
alexjohnson7307
 
WhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring AppsWhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring Apps
HackersList
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
Jimmy Lai
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
Steven Carlson
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
Tailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer InsightsTailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer Insights
SynapseIndia
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Muhammad Ali
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
Priyanka Aash
 

Recently uploaded (20)

Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptxUse Cases & Benefits of RPA in Manufacturing in 2024.pptx
Use Cases & Benefits of RPA in Manufacturing in 2024.pptx
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
 
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes..."Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
"Mastering Graphic Design: Essential Tips and Tricks for Beginners and Profes...
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
 
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision MakingConnector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
 
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
(CISOPlatform Summit & SACON 2024) Digital Personal Data Protection Act.pdf
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
 
Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10
 
Mastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for SuccessMastering OnlyFans Clone App Development: Key Strategies for Success
Mastering OnlyFans Clone App Development: Key Strategies for Success
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
 
WhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring AppsWhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring Apps
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
Tailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer InsightsTailored CRM Software Development for Enhanced Customer Insights
Tailored CRM Software Development for Enhanced Customer Insights
 
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
Litestack talk at Brighton 2024 (Unleashing the power of SQLite for Ruby apps)
 
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
(CISOPlatform Summit & SACON 2024) Keynote _ Power Digital Identities With AI...
 

Building rich interface components with SharePoint

  • 1. Building Rich December 1st, 2012 Interface Components with SharePoint Louis-Philippe Lavoie SharePoint Specialist GSoft @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
  • 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
  • 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
  • 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