In "Modern development", the presence of client-side code is increasingly present. It is not least SharePoint, which thanks to the Online version introduced a new development framework based on client-side technologies called "SharePoint Framework " (SPFX). In This session we will see a brief introduction about why this Framework was created, the principle of operation, the development tools, the programming languages, and the client-side frameworks that you can use to create Customizations such as Web parts and expensions.

1. 1
All about the
SharePoint
Framework (SPFx)
Fabio Franzini
Fabiofranzini.com

2. @cloudgen_verona
#CodeGen
#dotnetconf

3. 3
Main sponsor

4. 4
Community sponsors

5. 5

6. • Introduction
• Web stack tooling
• Project Structure
• Debugging
• Package & Deploy
• References

8. 2009
SharePoint
Server 2010
2006
Office SharePoint
Server 2007
2003
SharePoint
Portal Server 2003
2001
SharePoint
Portal Server 2001
2012
SharePoint
Server 2013
2016 …
SharePoint
Server 2016, SPO

11. Web Parts

12. Adds scripts to the page, and
accesses well-known HTML
element placeholders and
extends them with custom
renderings
Application Customizers
Extends the SharePoint
command surfaces to add
new actions, and provides
client-side code that you
can use to implement
behaviors
Command Sets
Provides modified views
to data for fields within a
list
Field Customizers
SharePoint Framework Extensions enable you to extend the SharePoint user experience within modern pages
and document libraries, while using the familiar SharePoint Framework tools and libraries for client-side
development.

14. • Tooling
• Node.js
• Yeoman
• Gulp
• TypeScript
• Visual Studio (Code)
• Frameworks – Choose yours
• React
• Angular.js
• Knockout
• Etc.

15. IIS Express
VS Project →
New → <Template>
C#

16. https://nodejs.org/en/

17. http://yeoman.io

24. import { IHelloWorldWebPartProps } from './IHelloWorldWebPartProps';
export default class HelloWorldWebPart extends
BaseClientSideWebPart<IHelloWorldWebPartProps>
{
// code omitted
}

25. export interface IHelloWorldWebPartProps {
description: string;
}

26. {
"$schema": "../../../node_modules/@microsoft/sp-module-
interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
"id": "318dd20d-0c02-4c3d-acc5-e2c0fa84cf3f",
"alias": "HelloWorldWebPart",
"componentType": "WebPart",
"version": "0.0.1",
"manifestVersion": 2,
"preconfiguredEntries": [{
"groupId": "318dd20d-0c02-4c3d-acc5-e2c0fa84cf3f",
"group": { "default": "Under Development" },
"title": { "default": "HelloWorld" },
"description": { "default": "HelloWorld description" },
"officeFabricIconFontName": "Page",
"properties": {
"description": "HelloWorld"
}
}]
}

27. .container {
max-width: 700px;
margin: 0px auto;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.row {
padding: 20px;
}
.listItem {
max-width: 715px;
margin: 5px auto 5px auto;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}

28. /* tslint:disable */
require('./HelloWorld.module.css');
const styles = {
helloWorld: 'helloWorld_68b3b0f6',
container: 'container_68b3b0f6',
row: 'row_68b3b0f6',
listItem: 'listItem_68b3b0f6',
button: 'button_68b3b0f6',
label: 'label_68b3b0f6',
};
export default styles;
/* tslint:enable */

29. • Contains information about your bundle(s), any external
dependencies, localized resources
• Specifies the AMD script libraries used in the web part
{
"entries": [
{
"entry": "./lib/webparts/helloWorld/HelloWorldWebPart.js",
"manifest": "./src/webparts/helloWorld/HelloWorldWebPart.manifest.json",
"outputPath": "./dist/hello-world.bundle.js"
}
],
"externals": {
“jquery": "node_modules/jquery/dist/jquery.min.js"
},
"localizedResources": {
"helloWorldStrings": "webparts/helloWorld/loc/{locale}.js"
}
}

35. https://localhost
https://<your-sharepoint-site>/_layouts/workbench.aspx

40. {
"cdnBasePath": "<!-- PATH TO CDN -->"
}

43. http://dev.office.com
https://docs.microsoft.com/en-
us/sharepoint/dev/spfx/sharepoint-framework-
overview

44. @franzinifabio
fabiofranzini
fabiofranzini
Fabio Franzini

45. Grazie
Domande?
fabiofranzini @franzinifabio fabiofranzini