D1 - Building Great Client-side Web Parts with SPFx, PnP-JS-Core, ReactJS and Office UI Fabric - Bill Ayers
1 like642 views
The document discusses building client-side web parts using SharePoint Framework (SPFx), PnP JS Core, ReactJS, and Office UI Fabric. It outlines the advantages of modern development tools while noting limitations in traditional approaches, such as scripting and component management. Resources and best practices for developing with SPFx and its related technologies are also provided.
D1 - Building Great Client-side Web Parts with SPFx, PnP-JS-Core, ReactJS and Office UI Fabric - Bill Ayers
- 1. Building Great Client-side Web Parts with SPFx, PnP- JS-Core, ReactJS and Office UI Fabric Bill Ayers 14 octobre 2017 #SPSParis
- 2. Merci pour votre soutien
- 4. Eur Ing Dr Bill Ayers MCM/MCSM Charter SharePoint MVP, MCT, MCTS, MCITP, MCSD, MCAD, MCSA, MCDBA, Professional Scrum Master, etc. etc. Flow Simulation Ltd. www.SPDoctor.net BillA@flosim.com @SPDoctor Consultant specialising in SharePoint and Office 365 Development and Architecture for Collaboration and Mobile Development
- 5. • SharePoint Development Backstory • The SharePoint Framework • ReactJS • Office UI Fabric • OfficeDev PnP and PnP-JS-Core library • Building an SPFx WebPart • Conclusions Agenda
- 6. Cloud Hosted Add-ins Remote Web S2S Trust OAuth (O365) SharePoint Web Server Managed CSOM or REST Cross-domain Request Host Web X D
- 7. • Branding • Add behaviour • Script Editor Web Part • Effective, but many problems SharePoint/Office 365 SharePoint Page SPWeb JavaScript Injection JavaScript Managed CSOM or REST API or MS Graph API
- 8. Limitations • No deployment or packaging model – DIY • No central control • Master page may change! • Scripting disabled by default for personal sites and self-service sites in SharePoint Online and root site collection • When scripting is disabled… • Links removed from Site Settings page • SharePoint Designer capabilities reduced • Can’t edit master pages or page layouts • Can’t edit theme for current site • Missing Web Parts (e.g. Script Editor, Content Editor) • Can’t upload .aspx files to document libraries • Enable scripting with UI, CSOM or PowerShell
- 9. Introducing the SharePoint Framework (SPFx) Model for building client-side pages, web parts and more Announced May 4th 2016, now GA! Authoring canvas, no iFrames Command-line-driven open-source toolchain (or community VS extension) Used by SharePoint product team Works in “modern” and “classic” pages Your choice of client-side framework; Angular, React, Knockout, Vanilla.JS ;-) Office 365/SharePoint Online On-premises: SP2016 FP2 (now GA)
- 10. Modern Site Pages Easily create powerful, beautiful looking pages Modern building blocks Mobile support is built in from the start Pages get better with the Microsoft Graph
- 11. New SPFx Extension Types Announced at //build/ 2017 • ApplicationCustomizers allow developers to add script to the page, as well as access well-known HTML element placeholders and extend them with custom renderings • FieldCustomizers can be used to provide modified views to data for fields within a list • CommandSets let developers extend the command surfaces of SharePoint to add new actions, along with client-side code that can be used to implement behaviours • Web Part Connections enable more connected web parts that can work together to share information • Communication Sites (announced at #SPSummit)
- 12. Wait, did you say “Command-line-driven open-source toolchain” ?
- 13. Things You Need… • Node.js (LTS version) • Gulp • Yeoman • Git • Editor (e.g. VS Code) • Yeoman generator for SharePoint Framework • Technologies like WebPack, SASS and other libraries will be installed by Node’s package manager - NPM …or use Visual Studio extension: https://github.com/SharePoint/sp-dev-fx-vs-extension
- 14. • Features of next version(s) of JavaScript/ECMAScript standard • Compiles to JavaScript (ES5) • Strong typing, classes • Original design goal was to make JavaScript easier for C# developers • Makes it easier to write production quality JavaScript • Good support in VS Code • Development language for the base templates in SharePoint Framework https://www.typescriptlang.org/
- 15. ReactJS • Backed by Facebook and Instagram • Component design (composition) • Very fast Virtual DOM page rendering model • Provides the view engine only • JSX format takes some getting used to • TypeScript Compiler has support for JSX (TSX) • Used by Microsoft • ReactJS tutorial: https://zapier.com/engineering/react-js-tutorial-guide- gotchas/ or https://facebook.github.io/react/ var button = <Button>Hello, world!</Button>;
- 16. Office UI Fabric • Responsive framework (kind-of) • Office Design Language for web • Designed for Office Add-ins by OneDrive and SharePoint Design Studio • Consistent look-and-feel with Office • “Modern”, not “classic” SharePoint CSS • About 100k, 200k with components • Available as raw CSS or versions for Angular and React • Dev.office.com/fabric
- 17. Office UI Fabric • Design elements to give add-ins the same look and feel as the rest of the Office suite • Consistent typography, icons and behaviour Link to UI Fabric Stylesheets: <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.2.0/fabric.min.css"> <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.2.0/fabric.components.min.css"> Decorate elements with UI Fabric classes: <button class="ms-Button" id="get-data-from-selection"> <span class="ms-Button-icon"><em class="ms-Icon ms-Icon--plus"></em></span> <span class="ms-Button-label">Get Data from selection</span> <span class="ms-Button-description">Get Data from the document selection</span> </button> http://dev.office.com/fabric Link to UI Fabric JS: <script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.2.0/js/fabric.min.js"></script>
- 18. Office UI Fabric ReactJS Components • 30 re-useable React components, ready to use • Used by Microsoft to build Office and SharePoint • Angular? See ngOfficeUIFabric import Button from 'office-ui-fabric-react'; Var b = <Button onClick={() => this.getData() } className="ms-Button--primary"> Refresh List</Button> Breadcrumb Button Callout Checkbox ChoiceGroup ColorPicker CommandBar ContextualMenu DatePicker DetailsList Dialog DocumentCard Dropdown Facepile GroupedList Image Label Layer Link List MessageBar Nav Overlay Panel Persona Pickers PeoplePicker Pivot ProgressIndicator SearchBox Slider Spinner TextField Toggle
- 19. OfficeDev PnP Initiative • PnP-JS-Core • Still under development • JavaScript wrapper for SharePoint REST APIs • Good fit for SPFx development • Github.com/SharePoint/PnP-JS-Core • “Home” of SPFx guidance, documentation, samples, etc. • Dev.Office.com/SharePoint is starting point • Code hosted on GitHub
- 20. Looking at ReactJS Looking at Office UI Fabric Looking at OfficeDev PnP-JS-Core Building an SPFx WebPart
- 21. Conclusions • “Modern” SharePoint development tools are your choice • The “old” stuff still works • Build re-usable components with ReactJS • PnP-JS-Core makes SharePoint REST easy • Office-UI-Fabric makes web parts beautiful • We are on a journey – join us!
- 22. Resources: • http://dev.office.com/SharePoint • http://dev.office.com/fabric • https://facebook.github.io/react/ • https://github.com/SharePoint/PnP-JS-Core • https://github.com/OfficeDev/TrainingContent/SharePoint • http://github.com/SPDoctor/SPFXShoppingList Bingle
- 24. Thank you, for your for #SPSParis