This document discusses the SharePoint Framework (SPFx) for developing client-side extensions for SharePoint. It provides a brief history of SharePoint development models and their limitations. SPFx is presented as the new model that allows for more control and uses modern web development tools and techniques. The document addresses questions about SPFx and discusses deployment, governance, security considerations, and resources for learning more. Demo code is shown to illustrate SPFx tooling and deployment.

1. Elio Struyf
Thomas Vochten
October 26th, 2017
Making Sense of the SharePoint
Framework for the Reluctant IT Pro

3. @thomasvochten
http://thomasvochten.com
mail@thomasvochten.com
Elio Struyf Thomas Vochten
@eliostruyf
https://www.eliostruyf.com
info@estruyf.be

4. Questions?

5. Questions
• Why did we need another development model?
• Why would we care as administrators?
• What do I need to know about the SharePoint Framework?
• How exactly are dark-themed command-line tools cool again?
• What about security?
• How do I control which customizations make it into my tenant?
• What about on-premises?
• Never mind. Show me some code!

6. SharePoint
Development
A brief lesson in
history

7. 2001
SharePoint
Portal Server 2001
2003
SharePoint
Portal Server 2003
2006
Office SharePoint
Server 2007
2009
SharePoint
Server 2010
2012
SharePoint
Server 2013
2016
SharePoint
Server 2016
Add-in model
Sandboxed solutions
Farm solutions - Feature pack (FTC)
Full Trust Code
Microsoft
Managed Solutions
Microsoft
Online Services
Office 365
SPFx

8. What could go wrong with farm solutions?

10. What’s wrong with Sandboxed Solutions?

11. Add-Ins maybe?
• Still supported in SharePoint Online
• Can work side-by-side with SPFx
• Allow for great flexibility
• Can become complicated very quickly
• Use a different security model (IFrame)
• Are not responsive (IFrame)
• Can be distributed through the Store

12. Uncontrolled JavaScript code
• Much simpler than SharePoint Hosted Add-Ins
• But doesn’t use any model
• Typically through content/script editor webparts
• Heavy dependency on the DOM (Document Object Model)
• Tendency to break when SharePoint Online changes
• Difficult to control by the administrators: On or Off only

14. What can go wrong with client-side code?
• What runs where?
• How many scripts?
• Do you actually know
who wrote it?
• What happens when
your server crashes?
• …

15. SharePoint Framework
(SPFx)
The new hotness

16. A better model for client-side development
• A unified and new way of working
• A set of development and deployment rules
• Tenant admins regain control over customizations
• Use the same tools as the product team
• Restrictions to development so SharePoint stays in control

17. SharePoint Framework v1.0.0
• Generally available since February 2017
• Focuses on user interface extensibility
• Currently only offers web-part like functionalities
• Uses client-side technologies
• Works with SharePoint Online
• New language, new tools, new frameworks

18. What is expected from you?
• Rather steep learning curve for seasoned SharePoint developers
• Embraces standard, modern web technologies
• A lot more freedom when it comes to tools
• Typically no Visual Studio is involved

19. Who benefits from SPFx?
• Enterprise developers
• General web developers
• Designers (Office UI Fabric)
• Administrators
• Vendors & integrators
• Citizen developers… but maybe not so much

20. Great, I want to use this on-premises too!
• SharePoint Server 2016 Feature Pack 2
• SharePoint Framework v1.3.2 à v1.1.0
• No SPFx extension support
• No support for older SharePoint versions

21. SPFx - the toolsAll about being
modern

22. • Tooling
• Node.js
• Yeoman
• Gulp
• TypeScript
• Visual Studio (Code)
• Frameworks – Choose yours
• React
• Angular.js
• Knockout
• Etc.
Typical tooling for SharePoint Framework

23. Web stack tooling comparison
IIS Express
VS Project à
New à <Template>

24. DemoSPFx tooling

25. SPFx Deployment &
Governance
It’s all about
control

26. Deploying SPFx customizations
• .sppkg files are your new friends
• Deployed tenant-wide
• Remove or disable the solution if needed
• Just upload a new version when you need to
• SharePoint Admin Center offers some statistics
• Site collection administrator can add the solution to the site
• Backup your package files and your CDN artifacts
• It’s still all about trust!

27. Deployment model
• Deploy to the App Catalog
• Assets need to be deployed to a
location under your control
• Validation during deployment
process by the admin
• Important: do not give developers
permissions to the app catalog
and asset location

28. Approval process

30. Tenant wide deployment

31. SPFx in the Enterprise (aka The Real World)
Create a plan!
• Which tools to use and how to train your staff
• Which frameworks to use
• How and where to deploy (CDN)
• Application Lifecycle Management and DevOps
• Pro Tip: Unblock npm & GitHub sites in your firewall J

32. DemoSPFx solution
deployment

33. SecurityGet off my lawn!

34. It all runs in the context of
the user

35. SharePoint Add-Ins have
security isolation

36. But do you trust your
developers?

37. Modern sites and “noscript”
• “Noscript” is by default enabled on Modern Sites
• What is the impact?
• No custom scripts on pages
• No JSLink in lists and libraries
• No custom actions

38. What about the file location?

39. What is a CDN?
Content & static assets
Website

40. What is a CDN?
Content
Website
CDN CDN
Static assets Static assets

41. Thoughts about using CDN’s
• Critical part of the deployment
• Choose a highly available & reliable one
• Security implications of using a CDN are potentially big
• Carefully consider and check every CDN in your organization
• Office 365 has its own CDN, can be enabled through PowerShell.
• Anonymous access!

42. DemoOffice 365 CDN

43. Questions?

44. www.biwug.be
@biwug

45. Resources
• https://docs.microsoft.com/en-us/sharepoint/dev/
• https://www.andrewconnell.com
• https://blog.mastykarz.nl
• https://www.eliostruyf.com

46. #SPUnite17 - @eliostruyf