It’s tough for us professional SharePoint developers who have spent years perfecting our SharePoint skills, because now Microsoft is telling us we should use techniques like JavaScript on the client side instead. Wait a minute; isn’t JavaScript a sort of front-end hackers’ in-browser scripting language that was written over a weekend? While it’s true that JavaScript was produced in a hurry, and has a name that doesn’t make sense, it has matured a great deal in the last few years. A number of patterns and improvements have emerged to get around some of the shortcomings and support a more professional development model for building responsive client applications. In this talk we are going to see how far we can go with SharePoint Apps using JavaScript and client-side development for Windows, web and mobile applications.

1. SharePoint Apps - The Good, the Bad,
and the Pot of Gold at the End of the
Rainbow
Bill Ayers

2. MCM/MCSM SharePoint
MCTS, MCITP, MCSD, MCAD, MCSA, MCDBA, MCT etc.
Consultant currently specialising in SharePoint Development and
Architecture for Web Content Management and
Collaboration. (I also do some mobile development on the
side)
Blog: www.SPDoctor.net
E-mail: BillA@flosim.com
Twitter: @SPDoctor
Moderator on SharePoint.StackExchange.com

3. Agenda





Why SharePoint Apps?
The Bad
The Good
The pot of gold at the end of the rainbow
Conclusions

4. SharePoint Development Timeline…





SharePoint 2001 – forget it
SharePoint 2003 – Limited, not aligned with
ASP.NET, complex ALM
SharePoint 2007 – Server-side object model (farm
solutions)
SharePoint 2010 – Sandboxed solutions
SharePoint 2013 – SharePoint Apps.

5. Apps for SharePoint
SharePoint
Hosted App
• Development models
•
•
SharePoint-hosted
Cloud-hosted
• Interaction
•
•
•
Full page
App part
Command extensions
Web Pages
Scripts
Style
Sheets
Cloud
Hosted App
Web Pages
Scripts
Style Sheets
Server-Side
Code
Databases

6. Cloud Hosted Apps
SharePoint
Database
Web Server
S2S Trust
Host Web
Remote Web
Managed CSOM
Cross Domain Library

7. “Apps” are everywhere!

8. Opening up to web developers
“Use your existing skills to build
apps and take advantage of
familiar tools, languages, and
hosting services. You can use any
language, such as HTML,
JavaScript, PHP, or .NET, and you
can use your favorite web
development tools”
MSDN

9. What are “Apps” anyway?






Easy distribution
Self-contained
Clean Uninstall
Sandboxed
Some degree of vetting
Marketplace
infrastructure

10. Apps for SharePoint
• Distribution
•
•
Publish to App Catalog
Publish to Office Marketplace
• Self-contained, clean uninstall, sandboxed
•
•
No server-side code
All SharePoint artifacts hosted within app web

11. Skills needed:







JavaScript (done properly)
jQuery
JavaScript frameworks, e.g. MVVM
REST
OData
HTML5
CSS3.

12. Tools:







Visual Studio 2013
Chrome, IE developer tools (F12)
Fiddler
JSFiddle (or equivalent)
StackOverflow.com
JSLint, “use strict”
MVVM (Knockout.js)

13. Why REST/JSON?
• Address of the REST API
• URLs for Common SharePoint Objects
• Using OData Operators
http://intranet.contoso.com
/_api/web/lists/getbytitle("MyList")/items
?$select=ID,Title
&$order=Title
&$filter=startswith(Title,”A”)
$.getJSON(”http://litvs13/_api/web”,
function(data) {
$(“#title”).text(data.d.Title);
});

14. Demo: Using REST

15. How would we do this in traditional
SharePoint development?

16. Rich clients still matter
Source: Morgan Stanley

17. Mobile (i.e. phones and tablets)



Browsing – normal web site is
good solution (channels,
responsive design)
Specific tasks – mobile app is
better model
In general, mobile users want
apps – they don’t want to use a
web browser for Wikipedia,
they want a Wikipedia “app”

18. Mobile Platforms
iOS
XCode
Objective-C
Android
Eclipse
Java
Windows Phone
Visual Studio
C# or VB.NET
Windows 8
Visual Studio
C# or VB.NET
Other (Blackberry?)

19. Native vs. Web
Native
Native look
and feel,
performance
Codegen/
crosscompilers
HTML5
Hybrid
Web
apps
Web
Easy
deployment

20. JavaScript libraries:








jQuery – DOM element selection
Twitter Bootstrap – page structure, HTML5/CSS3
framework
Knockout.js – data binding/MVVM
Underscore.js – collections, iterations
Angular.js (alternative to knockout/Durnadal)
Require.js
Durandal – SPA framework
SPServices.js

21. JavaScript libraries and frameworks for mobile:



jQuery Mobile
PhoneGap (Cordova)
Kendo UI Mobile (commercial)

22. Model-View-ViewModel (MVVM)
ViewModel
Data binding
View
REST
Model

23. Demo: Butterfly project

24. Building HTML5 apps for different platforms:





Web – “native”
SharePoint – Visual Studio
Windows 8 – Visual Studio (“native” HTML5 apps)
Windows Phone 8 – Visual Studio
Android, iPhone, Blackberry…



PhoneGap Build (Adobe)
Icenium (Telerik)
Nomad (Redgate)

25. Demo: Cloud Build

26. Conclusions:





JavaScript – learn it, live it, love it!
You need some REST
Learn JavaScript libraries, especially jQuery
Server-side development is still valid
HTML5 Hybrid Apps not perfect, but allow skills
and code re-use for web and mobile

27. Resources:





70-480 http://
www.microsoftvirtualacademy.com/training-courses/learn-html5-with-javascript-css3-ju
Andrew Connell http://www.andrewconnell.com/blog/my-thoughts-on-thesharepoint-app-model-office-365-sharepoint-store-and-the-business-ofsharepoint-apps-today
Chris O’Brien http://www.sharepointnutsandbolts.com/2012/08/sharepoint2013-appsarchitecture.html
Jeremy Thake http://www.jeremythake.com/
SharePoint.StackExchange.com

28. Contact me:




Blog: www.spdoctor.net
Twitter: @spdoctor
Sharepoint.stackexchange.com (moderator)
Email: BillA@flosim.com