SPSBoston 2016-09-10 - Best Practices for Small-Scale Client-Side Development in SharePoint
-
Upload
marc-anderson -
Category
Technology
-
view
3.844 -
download
4
Transcript of SPSBoston 2016-09-10 - Best Practices for Small-Scale Client-Side Development in SharePoint
![Page 1: SPSBoston 2016-09-10 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070516/586fcefd1a28aba24c8b7de3/html5/thumbnails/1.jpg)
Best Practices for Small-ScaleClient-Side Development in SharePointMarc D AndersonPresident, Sympraxis Consulting LLC
![Page 2: SPSBoston 2016-09-10 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070516/586fcefd1a28aba24c8b7de3/html5/thumbnails/2.jpg)
SPS Boston 2016 is made possible by our Sponsors
MindsharpContego Cyber
Solutions
![Page 3: SPSBoston 2016-09-10 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070516/586fcefd1a28aba24c8b7de3/html5/thumbnails/3.jpg)
Visit extaCloud’s booth for Drink Tickets!
Champions Bar6pm
LOCATED IN BOSTON MARRIOTT CAMBRIDGE
2 Cambridge Center Cambridge, MA 02142
(1 min walk from Microsoft)http://
www.championscambridge.com/
ShareP nt
![Page 4: SPSBoston 2016-09-10 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070516/586fcefd1a28aba24c8b7de3/html5/thumbnails/4.jpg)
Who Is Marc? Co-Founder and President of Sympraxis Consulting LLC, located in the Boston suburb of Newton, MA, USA. Sympraxis focuses on enabling collaboration throughout the enterprise using the SharePoint application platform.
Over 30 years of experience in technology professional services and software development. Over a wide-ranging career in consulting as well as line manager positions, Marc has proven himself as a problem solver and leader who can solve difficult technology problems for organizations across a wide variety of industries and organization sizes.
Author of SPServices Awarded Microsoft MVP for SharePoint Server 2011-2016
![Page 5: SPSBoston 2016-09-10 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070516/586fcefd1a28aba24c8b7de3/html5/thumbnails/5.jpg)
• We can build real solutions by using SharePoint and Office 365 as service endpoints that provide us with all sorts of critical business data. On the spectrum between power user dev and enterprise development, there’s plenty of room for departmental or even company-wide solutions that work entirely client side. Often the difference between “enterprise” development and the rest comes down to two factors:• The governance or guidance around deployment• The size of the development team
• In this in-depth session, we’ll look at some better practices for building solutions, storing and managing code, and source code control for smaller size projects that don’t have complex deployment requirements.
Overview
![Page 6: SPSBoston 2016-09-10 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070516/586fcefd1a28aba24c8b7de3/html5/thumbnails/6.jpg)
SharePoint Development ModelEvolution
2003
ASP.NETASP.NET Web Parts, Full Trust APIs, Server Side Event Receivers…
2007
ASP.NETASP.NET Web Parts, Full Trust APIs, Server Side Event Receivers…
2010
ASP.NETASP.NET Web Parts, Full Trust APIs, Server Side Event Receivers…
2013ASP.NETASP.NET Web Parts, Full Trust APIs, Server Side Event Receivers…
2001
ASP Digital Dashboards, File System Storage, etc.
Server Side Development
of customers are leveraging cloud for their applications—from pilots to production apps2
72%“Nearly of large enterprises will likely have hybrid cloud deployments by the end of 2017”1
50%
Sources:1. Gartner, Inc. 2013. Press Release: http://www.gartner.com/newsroom/id/25993152. 451 Research, Hosting and Cloud Study, 2014
![Page 7: SPSBoston 2016-09-10 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070516/586fcefd1a28aba24c8b7de3/html5/thumbnails/7.jpg)
Development models Across SharePoint Versions Server Side Client Side
Sandboxed solutions
App modelSandboxed solutions
App modelSandboxed solutions
App modelSandboxed solutions
SharePoint Framework
![Page 8: SPSBoston 2016-09-10 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070516/586fcefd1a28aba24c8b7de3/html5/thumbnails/8.jpg)
Client Side Code Has Been in SharePoint Forever
![Page 9: SPSBoston 2016-09-10 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070516/586fcefd1a28aba24c8b7de3/html5/thumbnails/9.jpg)
This Is Not Your Grandfather's Client Side…
…or your Grandmother's, for that matter
![Page 10: SPSBoston 2016-09-10 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070516/586fcefd1a28aba24c8b7de3/html5/thumbnails/10.jpg)
• Use your favorite tools• Choose your favorite frameworks• Write your solutions with HTML, CSS, and JavaScript• Watch your users smile
SharePoint Development Is [Becoming] Web Development
![Page 11: SPSBoston 2016-09-10 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070516/586fcefd1a28aba24c8b7de3/html5/thumbnails/11.jpg)
• Decide what you need the functionality to be
• Choose your development tools to best achieve the functionality
• Consider how you might package• Build• Devise your deployment scheme• Deploy
Decouple Development and Deployment Decisions
![Page 12: SPSBoston 2016-09-10 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070516/586fcefd1a28aba24c8b7de3/html5/thumbnails/12.jpg)
"Client Side" Is Not One ThingSimple
Complex
Content Editor Web Part
SharePoint Framework
One-off, quick solutions with JavaScript / HTML embedded directly in the CEWPCode can still be centralized
Script Editor Web Part
Centralized code artifacts with a light development pipeline
Centralized code artifacts with a more robust development pipeline
Reusable components (Client Side Web Parts) with a more formal development processCentralized admin and deployment
Each approach still has value, even in the "modern" era
![Page 13: SPSBoston 2016-09-10 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070516/586fcefd1a28aba24c8b7de3/html5/thumbnails/13.jpg)
High Level Structure of Building SharePoint Solutions
Data Access / Initial Manipulation
"Document Ready"
ViewModel / Application Logic
Templates
JavaScript HTMLApplication Styling
CSS
•Has to coexist with SharePoint's CSS•Be very specific with your selectors
•Avoid hauling in SharePoint's baggage unless you need it
![Page 14: SPSBoston 2016-09-10 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070516/586fcefd1a28aba24c8b7de3/html5/thumbnails/14.jpg)
Services Across SharePoint Versions
Deprecated
Deprecated
Endpoint
/_vti_bin/listdata.svc
/_apiDeprecated
NoneSOAP REST
https://graph.microsoft.com/v1.0
![Page 15: SPSBoston 2016-09-10 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070516/586fcefd1a28aba24c8b7de3/html5/thumbnails/15.jpg)
Widgets in one Site Collection
Widget in one tenant/farm, multiple site collections
Widgets used across multiple tenants/farms*
Store code in a library in a specific subsite X XStore code in a library in the root site of the Site Collection XStore code in a Site Collection specifically for client side code O OCreate an actual CDN (Azure, AWS, dedicated server, other commercial CDN provider…)**
X O - Good solution O – Optional solution, potentially overkill X – Not a great choice* - Not referencing any code that would be part of a commercial solution.** - CDNs or Content Delivery Networks allow “content” to be made highly available to end users everywhere.
See: Code Creep - SharePoint "CDN" by Julie Turner (@jfj1997)
Where Should I Put My Stuff?
If you store your code in a different Site Collection or CDN, you may need to bootstrap it into place.
![Page 16: SPSBoston 2016-09-10 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070516/586fcefd1a28aba24c8b7de3/html5/thumbnails/16.jpg)
• Microsoft guidance is to no longer edit the master page – and we don't have to
• Adding a User Custom Action allows you to load the first JavaScript file with a ScriptLink
• RequireJS (or several alternatives – see system.js) allow you to bootstrap the rest of your code into the page
• Because your script references can be built in code, you can even do versioning
Bootstrapping JavaScript
See: The easiest way to add Script and Brand your SharePoint and SharePoint Online by John Liu
![Page 17: SPSBoston 2016-09-10 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070516/586fcefd1a28aba24c8b7de3/html5/thumbnails/17.jpg)
• HTML files are trickier to load because CEWPs can't use a Content Link outside the Site Collection• jQuery $.get()• Widget Wrangler• RequireJS with text plugin
Bootstrapping HTML
See: jQuery $.get(), Office Dev PnP Web Cast – Introducing Widget Wrangler for SharePoint development, RequireJS text plugin
![Page 18: SPSBoston 2016-09-10 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070516/586fcefd1a28aba24c8b7de3/html5/thumbnails/18.jpg)
• Don't be caught up in the "shiny penny" syndrome
• Compare your known requirements with the frameworks' capabilities
• Ask yourself:•What types of solutions do we need to build?•What does our governance tell us about our deployment model?•How big is the development team?•What are our current skills?
Choose a Framework
![Page 19: SPSBoston 2016-09-10 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070516/586fcefd1a28aba24c8b7de3/html5/thumbnails/19.jpg)
The Popularity Contest
See: The State Of JavaScript: Front-End Frameworks: A few preliminary results
![Page 20: SPSBoston 2016-09-10 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070516/586fcefd1a28aba24c8b7de3/html5/thumbnails/20.jpg)
Source Control and Code Management
See: Sympraxis’ SharePoint Client Side Development Pipeline
spsave
Code Editor
![Page 21: SPSBoston 2016-09-10 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070516/586fcefd1a28aba24c8b7de3/html5/thumbnails/21.jpg)
Source Control and Code Management: gulpfile
See: Sympraxis’ SharePoint Client Side Development Pipeline
![Page 22: SPSBoston 2016-09-10 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070516/586fcefd1a28aba24c8b7de3/html5/thumbnails/22.jpg)
• SPFx uses common Web development tools and frameworks
• How deeply you go depends on your specific needs
What Do You Need to Know?
![Page 23: SPSBoston 2016-09-10 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070516/586fcefd1a28aba24c8b7de3/html5/thumbnails/23.jpg)
• Developing SharePoint Widgets in TypeScript with Bob German @ 2:30
• Preparing for the next shift in SharePoint development with Jay Landrum @ 4pm
SharePoint Framework Sessions
![Page 24: SPSBoston 2016-09-10 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070516/586fcefd1a28aba24c8b7de3/html5/thumbnails/24.jpg)
Demos
![Page 25: SPSBoston 2016-09-10 - Best Practices for Small-Scale Client-Side Development in SharePoint](https://reader035.fdocuments.us/reader035/viewer/2022070516/586fcefd1a28aba24c8b7de3/html5/thumbnails/25.jpg)
Contact InformationEmail [email protected]
Twitter @sympmarcBlog http://sympmarc.com
SPServices http://spservices.codeplex.comSPXSLT http://spxslt.codeplex.comBooks http://sympmarc.com/books
The Middle Tier Manifesto http://bit.ly/middletier