SPS Paris: Building great client-side web parts with spfx, pnp-js-core, ReactJS and Office UI Fabric
2 likes154 views
This document summarizes a presentation about building client-side web parts for SharePoint using the SharePoint Framework (SPFx), ReactJS, Office UI Fabric, and the PnP-JS-Core library. The presentation covers the SharePoint Framework model, using ReactJS for views, Office UI Fabric for styling, the PnP-JS-Core library for interacting with SharePoint, and building a sample SPFx web part. It concludes that the modern SharePoint development tools provide choice and allow building reusable components with ReactJS while leveraging Office UI Fabric for beautiful designs and PnP-JS-Core for easy SharePoint REST calls.
![[Jansen] Transforming your classic team sites into modern group connected tea...](https://cdn.slidesharecdn.com/ss_thumbnails/kxox0bq5rywisazgyhqc-signature-d4523b3bf020616e67040d2a940ba8bf9aeab187b20da49956548f98de22ea12-poli-180606121948-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
What's hot (20)
Similar to SPS Paris: Building great client-side web parts with spfx, pnp-js-core, ReactJS and Office UI Fabric (20)
Ad
Recently uploaded (20)
Ad
SPS Paris: Building great client-side web parts with spfx, pnp-js-core, ReactJS and Office UI Fabric
- 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 [email protected] @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