build client-side web parts for microsoft sharepoint
TRANSCRIPT
![Page 1: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/1.jpg)
Build Client-side web parts for Microsoft SharePointChakkaradeep (Chaks) ChandranProgram Manager, Microsofthttps://twitter.com/chakkaradeephttp://www.chakkaradeep.com
![Page 2: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/2.jpg)
• Session objectives: • How SharePoint client side web parts are being developed and
deployed.• What kind of tooling will be initially available for developers around
SharePoint Framework.• How the development cycle will work with offline and online
development.
• Session takeaways:• SharePoint development is aligned with industry standard development
methods for web.• Available dev tooling will assist you on the journey for building needed
customizations.
Session objectives and takeaways
![Page 3: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/3.jpg)
SharePoint Extensibility PrinciplesBuild long-term, value-added services for enterprise mobility
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
Principles
![Page 4: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/4.jpg)
Modern client-side development
Lightweight web and mobile
Powers our own experiences
Backward compatible
Supports open source tools and JavaScript web frameworks
SharePoint Framework (SPFx)
SharePoint framework
LOB Systems and Cloud ServicesMicrosoft Graph
Ignite BRK2114 – Get an introduction to SharePoint Framework
![Page 5: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/5.jpg)
SharePoint Framework Components
Client-Side Web Parts
Modern Page Canvas
JavaScript Resource Management
Page Context & Site Data APIs
User Experience
Yeoman Templates
Gulp-based Build Process
SharePoint Workbench
Build Process & Tooling
Client-side Solutions
Tenant-Scoped Deployment
Packaging
![Page 6: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/6.jpg)
Developer Preview Release
Submit/discuss SPFx Issueshttp://aka.ms/spfx-issuesCommunity ContributionsSPFx DocumentationSPFx Web Part Samples
August 17, 2016SPFx Drop 1
September 1, 2016SPFx Drop 2
September 14, 2016SPFx Drop 3
September 21, 2016SPFx Drop 4
http://github.com/sharepoint || http://dev.office.com/sharepoint
Ignite BRK2117 – Discover the future of Microsoft SharePoint development
October 17, 2016SPFx Drop 5
![Page 7: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/7.jpg)
SharePoint Client-side web parts
![Page 8: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/8.jpg)
Configurable, reusable,
purpose built components
Add functionality to SharePoint experiences
Context aware parts
Framework for connecting
related components
Web Parts
SharePoint Web Parts
Ignite BRK2040 – Discover the new SharePoint content publishing experiences
![Page 9: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/9.jpg)
They are still web parts!
Built for the modern, JavaScript-driven
web.
Runs directly inside a SharePoint Page.
Client-side Web Parts
![Page 10: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/10.jpg)
SharePoint Framework Tooling
![Page 11: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/11.jpg)
Visual Studio Code
Atom
Sublime
and more … your choice!
Code Editors
React
Angular
Knockout
and more … your choice!
JavaScript Frameworks
Yeoman TemplatesGulp-based Build ProcessNodeJS/NPMSystemJSWebpackSASSTypeScript
Build Process & Tooling
Open source tooling
![Page 12: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/12.jpg)
IIS Express
Project Templates
C#
Server side tool comparison
MSBuild
Ignite BRK3246 – Looking behind the scenes at how we're making SharePoint's front end/UX modern, responsive, and open
![Page 13: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/13.jpg)
Office UI Fabric
Front end experiences for SharePoint
Powers our own experiences
Available out of the box
Design web part seamlessly
Office UI Fabric React for rich set of reusable controls
Fonts, icons Colors
Components
Ignite BRK3246 – Looking behind the scenes at how we're making SharePoint's front end/UX modern, responsive, and open
![Page 14: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/14.jpg)
Fabric and its sub-projectsAll depending on the Core, all open source
Fabric CoreCore elements of the design language including icons, colors, type, and the grid
Fabric ReactRobust, up-to-date components built with the React framework.
Fabric JSSimple, visuals-focused components that you can extend, rework, and build on.
ngFabricCommunity-driven project to build components for Angular-based apps.
Fabric iOSNative Swift colors, type ramp, and components for building iOS apps.
Community built
![Page 15: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/15.jpg)
Building blocks of a web part
![Page 16: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/16.jpg)
Building blocks: BaseClientWebPart ClassBase functionality for the web part
Rendering life cycle
Access to web part DOM
Access to page context & instance data
Property pane integration
![Page 17: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/17.jpg)
Building blocks: Web part manifest
Defines your web part
Web part information
Web part properties behavior
Specify default property values
Deployed to SharePoint
![Page 18: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/18.jpg)
SharePoint WorkbenchDeveloper tool to debug web parts
Local development experience
Test your changes locally
SharePoint Framework available offline
Available in SharePoint Online as well
![Page 19: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/19.jpg)
Client-side Web Part Build FlowInstall SharePoint
Generator
Scaffold SharePoint Web Part Project
Build Web Part Code
Test
Local
UAT / Pre-production
Package/Deploy
Available on Classic and Client-Side Pages
Package/Deploy
npm i @microsoft/generator-sharepoint -g
yo @microsoft/sharepoint
Code
gulp serve
workbench local
gulp package-solution
gulp deploy-azure-storage
Ship?
Release using app catalog*
manual upload of the appworkbench SPO
![Page 20: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/20.jpg)
HelloWorld Web PartClient-side tooling and development. Chakkaradeep Chandran
![Page 21: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/21.jpg)
Web Part Deployment Flow
todo.spappPackage as an client-side solution
Developeryo @microsoft/sharepoint gulp –shipgulp bundle --shipgulp package-solution --shipgulp deploy-azure-storage
Available to
SharePoint Sites
Tenant AdminTenant App Catalog ApprovedDeliver the package to upload, trust and
deploy the package to
Install/Uninstall appSite Admin
Page AuthorsAddConfigure
Todo Web Part
End UsersInteract
![Page 22: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/22.jpg)
Web Part Deployment
Chakkaradeep Chandran
![Page 23: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/23.jpg)
• Conceptual process – Checkout “JavaScript embed models” with add-in model implementations from PnP
• Learn used technologies – Web stack tooling• Install node.js and cmd tooling for testing web stack development on your computer• Learn webpack for bundling your applications
• Learn JavaScript Framework(s)• Light-weight frameworks - Knockout, Handlebars etc.• Fully-fledged frameworks – Angular, React, Ember etc.• Get understanding on how they can be used and what the benefits are of using them
• Learn Office UI Fabric usage• By default available for SP Framework customizations. Other UX frameworks can also be used
Training Path – How to master SP Framework?
![Page 24: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/24.jpg)
Code samplesGuidance documentationMonthly community callsCase Studies
ThemesSharePoint FrameworkSharePoint add-insRemote API models with SharePoint development
Sharing is caring…
http://aka.ms/SharePointPnP
BRK2115 – Learn about PnP and the new SharePoint Framework
![Page 25: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/25.jpg)
• Session objectives: • How SharePoint client side web parts are being developed and
deployed.• What kind of tooling will be initially available for developers around
SharePoint Framework.• How the development cycle will work with offline and online
development.
• Session takeaways:• SharePoint development is aligned with industry standard development
methods for web.• Available dev tooling will assist you on the journey for building needed
customizations.
Session objectives and takeaways
![Page 26: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/26.jpg)
![Page 27: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/27.jpg)
![Page 28: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/28.jpg)
![Page 29: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/29.jpg)
![Page 30: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/30.jpg)
![Page 31: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/31.jpg)
![Page 32: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/32.jpg)
![Page 33: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/33.jpg)
![Page 34: Build client-side web parts for Microsoft SharePoint](https://reader035.vdocuments.net/reader035/viewer/2022062503/588010281a28ab421b8b6b79/html5/thumbnails/34.jpg)