1. Understanding SharePoint Framework and Modern Development
Paolo Pialorsi
PiaSys.com

2. Paolo Pialorsi PiaSys.com Project Manager, Consultant, Trainer
About 50 Microsoft certification exams passed
MCSM – Charter SharePoint
MVP Office Servers and Services
SharePoint PnP Core Team Member
Focused on SharePoint since 2002
Author of many books about XML, SOAP, .NET, LINQ, SharePoint, and Office 365
Speaker at main IT conferences
Twitter

3. SharePoint Extensibility Principles
9/21/2018 7:41 AM
SharePoint Extensibility Principles
To provide an Application Development Framework that aligns 1st and 3rd parties
To build industry leading client side solutions On-Premises and in the Cloud
Unlocking the potentials of SharePoint and the Microsoft Graph on desktops or any device
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, 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.

4. SharePoint Framework (SPFx)
New framework to build Modern UI customizations
Built on the well-known web stack
Open model, not only for .NET/Microsoft-oriented developers
Works well on the cloud
It is available on-premises, too (SP FP2 or later)
Enterprise-ready when used with back-end services
REST API and micro-services, Azure Functions, etc.
Not a new model, but an additional model to build UI elements for the Modern UI
We can build client-side Web Parts or client-side Extensions

5. Building out the User Experience
TechReady 23
9/21/2018 7:41 AM
Building out the User Experience
SharePoint Framework
Provider Hosted
Web Parts
Extensions
Add-ins
Experiences
MS Graph
Package Deployment
CSOM
Client side Tools
SP APIs
Development
© 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

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

7. Technology Mapping C# MS Build IIS Express VS Project 
New  <Template> C#

8. Development Machine Setup
Node.js (LTS – Long Term Support) -
NPM v. 3
npm install –g
Yeoman and Gulp
npm install -g yo gulp
Yeoman SharePoint Generator
npm install
Configure SSL for localhost testing environment
gulp trust-dev-cert

9. Console and Code Editor
Source control system and Project management
GitHub
VSTS
Etc.
Additional tooling
Fiddler -
Postman -
Console for Node.js
PowerShell
CMDER for Windows -
Etc.
Code Editor
Visual Studio Code
Visual Studio 2015/2017
Atom
Storm
Sublime

10. What can we build with SPFx?
Client-side Web Parts
Client-side Extensions
Application Customizer
Command Set
Field Customizer

11. DEMO Hello World Client-Side Web Part
Paolo Pialorsi
PiaSys.com

12. Property Pane Controls
Label
TextField
Checkbox
DropDown
Toggle
Button
Horizontal Rule
Slider
Link
Custom community controls:

13. DEMO Property Pane Controls
Paolo Pialorsi
PiaSys.com

14. Provisioning of Artifacts
You can deploy custom artifacts through your custom SPFx solutions
Can be provisioned only
Fields/Site Columns
Content Types
List Instances
List instances with custom schema
It leverages the “old school” feature framework
Life could be better  …
You need to create a sharepoint/assets folder in the root folder of your project
Create elements.xml files and schema.xml files based on CAML syntax
Declare the assets in the package-solution.json configuration file

15. Versioning of provisioned artifacts
You can use the Upgrade Actions of the feature framework
Supported upgrade actions are
ApplyElementManifest
AddContentTypeField
Provide one or more upgradeActions items in the package-solution.json configuration file
It’s feature framework, the old and well know one
And you will struggle with all the challenges of feature framework versioning 

16. Deployment through a CDN
You can deploy your SPFx solutions to whatever CDN you like
The out of the box tooling natively supports Azure CDN
And you can easily use the Office 365 CDN, too
The overall goal is to make your solution better served and more achievable

17. Deploying on Azure CDN Create an Azure Blob Storage account
Create a blob container
Configure the Azure CDN Profile to target that specific container
Configure the deploy-azure-storage.json config file to target your Azure CDN
workingDir
account
container
accessKey
Configure the write-manifests.json config file with the CDN Profile base URL
cdnBasePath
Execute “gulp --ship” and “gulp deploy-azure-storage“
Package and publish the solution on SharePoint

18. Deploying on Office 365 CDN
Enable and configure Office 365 CDN
Configure the write-manifests.json config file with the CDN base URL
cdnBasePath
Execute “gulp bundle --ship"
Upload the output (./temp/deploy) into the target library
Package and publish the solution on SharePoint

19. Security Model of client-side Web Parts
Client-side web parts run with the same permissions as the current user
They can do whatever the current user can do
They can be installed by tenant administrators only
It is responsibility of tenant admins to trust (or to not trust) a SPFx component
In the future it will change at site collection scope …
They share the same DOM and the same code with the whole page
Another client-side web part can do malicious things
Don’t store sensitive data in the client-side web part
Rely on server-side infrastructural services

20. DEMO Client-Side Extensions with SPFx
Paolo Pialorsi
PiaSys.com

21. What should I learn to be ready?
TypeScript
Node.js, npm, gulp, and web stack in general
Any JavaScript framework of your choice
Angular.js, React, Knockout, etc.
Office UI Fabric
SharePoint Framework Web Parts development
SharePoint PnP

22. Useful Links about SPFx

23. Thanks for watching!