SPFx allows developers to build client-side SharePoint solutions using open-source tools and modern web technologies like React, Angular, and Knockout. It provides components like Node.js, npm, Gulp and TypeScript to build and run applications that work with both SharePoint Online and on-premises. SPFx solutions can be developed locally using the SharePoint Workbench and deployed to SharePoint as web parts.

1. SharePoint
Framework
(SPFx)
Gosia Borzecka
@gosiaborzecka

2. About me
@gosiaborzecka
www.gosiaborzecka.net

3. What is SharePoint?

4. SharePoint
on-premises
SharePoint
Online

5. What is Office 365?

6. Office 365 Roadmap

7. SharePoint Development
Farm based
Sanboxes
SharePoint Add-ins
Manual injecting JS file

8. What is SharePoint Framework (SPFx)?
Client-side SharePoint development
Open Source tooling
Responsive and mobile-ready
Works for SharePoint Online and SharePoint on-premises

9. Main Components
• build & run the applications
NodeJS
• manages the dependencies required for the application
Npmjs
• automate the tasks of building and running the solution
Gulp
• Build the application and compile into clean, simple
JavaScript codeTypeScript
• create a solution structure for the application
Yeoman

10. Extra Components
• edit and manage the source code
Visual Studio Code
• contribute the source
GitHub
• use any type of JS Framework
(React, AngularJS, KnockoutJS etc..)JS Frameworks

11. How to start?
npm install –g bower npm install –g yo npm install –g tsd npm install –g gulp-cli
npm i
@microsoft/generator-
sharepoint

16. DEMO

17. Helpful commands
yo
@microsoft/sharepoint
create new project / add new web part
gulp bundle
build and bundle project
gulp serve
bundle project and start Workbench
gulp package-solution
build solution package (.spapp)
gulp nuke
delete build and intermediate folders
gulp test
run tests
--ship
argument to execute a release build

18. Property Pane
PropertyPaneTextField – get this by default with project
PropertyPaneButton
PropertyPaneCheckbox
PropertyPaneChoiceGroup
PropertyPaneCustomField
PropertyPaneDropdown
PropertyPaneHorizontalRule
PropertyPaneLabel
PropertyPaneLink
PropertyPaneSlider

19. Environment
import { EnvironmentType } from '@microsoft/sp-
client-base';
this.context.environment.type
Values:
•EnvironmentType.Tests – Tests context
•EnvironmentType.Local – SharePoint Workbench
•EnvironmentType.SharePoint – Modern SharePoint page
•EnvironmentType.ClassicSharePoint – Classic SharePoint Page

20. UI Fabric
Fonts, icon Colour

21. Microsoft Graph

22. SPFx is open source
https://github.com/OfficeDev/office-ui-fabric-react
https://github.com/OfficeDev/generator-office
https://github.com/SharePoint/sp-dev-docs

23. If you want to know more!
Dev Office
• https://dev.office.com/sharepoint/docs/spfx/sharepoint-
framework-overview
Waldek Mastykarz • https://blog.mastykarz.nl/
Andrew Connell • http://www.andrewconnell.com/
SharePoint Saturday • http://www.spsevents.org/
UK Community Days • http://uk.communities.tech/

24. https://resources.office.com/ww-landing-sharepoint-virtual-
summit-2017

25. https://dev.office.com/

26. @gosiaborzecka
www.gosiaborzecka.net