Marcel MedinaSharePoint Developer / Consultant www.sharepoint4developers.net

Leveraging SharePoint Single Page Apps

Who Am I?

SharePoint Developer / Consultant @ Datacom

Over 13 years field experience

Passionate about technology, music, food and football.

Marcel Medina

Agenda• What is a Single Page App?

• SPA Pros

• SPA Cons

• SPA Frameworks (and libraries)

• SharePoint App Architecture

• SharePoint APIs

• REST x CSOM

• Breeze

What is a Single Page App?

Web app that fits on

a single web page

Leverage client side

code to provide a great UX

Uses AJAX to load all

necessary code with a single page

load

Also known as SPA

Pros Responsive Design

Pros Rich User Experience

Fits on a single web page

Keeps navigation

history, deep linking

Persists state on the

client (in cache or

local storage)

Pros Reduced Round Tripping

Fully (or mostly)

loaded in the initial page

load

Progressively

downloads resources

as required

Cons

Heavy utilization

of javascript

SEO challeng

es

Time consuming

/difficult if not utilising a SPA framework or

libraries

DemoSample SPANavigation history and deep linkingCaching

What SPA frameworks can I use?

SPA Frameworks (and libraries)

emberjsangularjs durandaljs backbonejs

And more at todomvc.com

SPA Common Components

MV*

Model

View

Controller

Presenter

ViewModel

Routing

Data Binding

DOM Templates

Views

Pub / Sub

DI

DemoMV*RoutingData BindingDOM templatesViewsDIPub/Sub

How to fit this to SharePoint?

SharePoint App Architecture

SharePoint APIs

Note: JSOM (implicitly is CSOM) and REST

REST x JSOM (CSOM)?

REST x JSOM (CSOM)Feature

.NET Framework or Silverlight object models

JavaScript object modelREST/OData endpoints called from a Windows platform or JavaScript

Object-oriented programming Yes Yes No

Batch processing Yes Yes NoAPIs for conditional processing and exception handling

Yes No No

Availability of LINQ syntax Yes No No

Combining list data from different SharePoint web applications

Yes No Yes

Familiarity to experienced REST/OData developers

No No Yes

Similarity to non-Windows programming or JavaScript programming

No Yes Yes

Strong typing for list item fields

No (except with LINQ) NoYes, from Windows platformNo, from JavaScript

Leveraging jQuery, Knockout, and other JavaScript libraries

No YesNo, from Windows platformYes, from JavaScript

DemoREST x JSOM (CSOM)

REST x JSOM (CSOM) Complement each other Can coexist in the same app

With AngularJS, REST integrates better.

More details:SPC:423 Deep dive: REST and CSOM comparison

Breeze Client-Side ORM

Like a javascript version of Entity Framework with features:

Cache Data Validation Automatic hook into AngularJS

To work with SharePoint REST API. Get Nuget: Breeze.DataService.SharePoint

DemoBreeze

Summary • What is a Single Page App?

• SPA Pros

• SPA Cons

• SPA Frameworks (and libraries)

• SharePoint App Architecture

• SharePoint APIs

• REST x CSOM

• Breeze

Agenda

References

• SharePoint 2013 .NET Server, CSOM, JSOM, and REST API indexhttp://msdn.microsoft.com/en-us/library/office/dn268594(v=office.15).aspx

• Choose the right API set in SharePoint 2013http://msdn.microsoft.com/en-us/library/office/jj164060(v=office.15).aspx

• SPC:423 Deep dive: REST and CSOM comparisonhttp://channel9.msdn.com/Events/SharePoint-Conference/2014/SPC423

• http://todomvc.com/

• http://www.johnpapa.net/spa/

Q&A

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.