A Short Introduction to SharePoint Framework Development Model What you need to get started – a practical approach

A Practical Introduction to SharePoint Framework Robert Holmes A software developer with over 20 years of experience, primarily in the Microsoft space. Over the past 10+ years my primary focus has been on SharePoint and related technologies. rholmes@sharepointguy.com www.sharepointguy.com A Practical Introduction to SharePoint Framework Microsoft’s latest development model for SharePoint is the new Framework model. The questions that come immediately to mind are what is this new model, how does it differ from other models, what does it do for us that the others do not, or does better, and is it worth investing the time and effort needed to learn this new model; these are the questions we will attempt to answer. The SharePoint Framework is JavaScript driven and Microsoft has favored the React library as its library/framework of choice. My own personal first take is that it may accomplish what Microsoft was trying to get at with the App/Add In model in a more direct and modern fashion. In this presentation we will start with an overview of SharePoint development models, along with the relative advantages and disadvantages of each in order to place this model in its proper context. Then we review how to set up our environment and the fundamentals, along with some internals, of developing using this more purely client side model. Throughout this phase of the presentation we will be using the React option although much of what we do will apply to a pure JavaScript version.   What we will be trying to get at is what is the SharePoint Framework, what does it do and how does it do it?

A Brief History of SharePoint Development MOSS/SharePoint 2007: Emergence from the Dark Ages Introduction to Features and Solutions .Net code running in full trust SharePoint 2010: Evolution runs apace Full trust model fully ensconced Introduction of CSOM, including JSOM and related technologies Extension of REST Api’s so that they become actually useful Visual Studio catches up and SharePoint becomes full development path SharePoint 2013: Apps rear their ugly head App/Add-On model introduced: first attempt at separating SP development from the server and moving it to the world of modern web development Development in 2003 was clunky at best CSOM and REST Api’s allow development of external apps accessing SP data Largely abandoned SOAP api path No longer the kludgy templates sent out by SP team Apps run in iFrame, require extraneous plumbing such as sub sites etc.

SharePoint Framework Comes to the Rescue JavaScript window into external site No double post back More like a pipeline or window into another site hosting the desired functionality Development almost entirely using modern web development tools and technologies More like what Microsoft was trying to get at with Apps/Add-Ons? SPFx allows the functionality to be hosted entirely outside of SharePoint, but works with it seamlessly Holds the promise of surfacing external content and functionality into a seamless SharePoint experience

Toolchain for SPFx Development Compared Traditional SharePoint SPFx Microsoft .Net NodeJs NuGet * NPM Visual Studio VS Code (or any text editor; Brackets?) and YEOMAN C# * TS Yeoman for scaffolding SPFx is client side so mainly js with TS being the standard for creating js code MS Build largely transparent to the user; Gulp slightly less so No direct correspondence to webpack in Visual Studio, more a conglomeration of tools getting called behind the scenes much like MS Build, all handled internally and little need for developer to mess with. NPM and TypeScript are the only 2 it is recommended that developer learn; the others can be learned and understood as need arises MS Build Gulp webpack

Setting up O365 SharePoint Tenant https://dev.office.com/sharepoint/docs/spfx/set-up-your- developer-tenant or Business Essentials (~$5.00 /mo.) Setup App Catalog SharePoint Admin Center apps App Catalog Create New Site Collection based on Developer site template site collections New site based on Developer Site template If there is already an app catalog then the new option will not be available. In any case we will need to know the url of the app catalog for the developer site you will need url of dev site to test webparts online (O365)

Installing tools Install node version manager (nvm) from https://github.com/coreybutler/nvm-windows Use nvm to install node versions Use npm to install required packages npm i –g source-map-explorer nodetree http-server nodemon npm install –g typescript Use npm to install yo and required generators Windows only: Go to administrative PowerShell window npm install -g --production windows-build-tools npm i –g gulp Running gulp --tasks shows all tasks that have been loaded gulp trust-dev-cert – installs certificate to allow debugging in Office 365 gulp serve – start application and open browser window gulp serve –nobrowser – start app w/o opening browser Using nvm can be very helpful. For example, when I tried to recreate, the generated code created in node 6.9.2 failed, but installing 7.7.3, then adding needed packages in that version (npm i –g …), the code ran

nvm commands nvm list – show installed node versions nvm list available – show node versions available to install nvm install version – installs specified version nvm install 6.9.2 nvm install 7.10.0 nvm use version– version of node to use nvm use 6.9.2

NPM – node package manager NOTE: you may need a package installed in one version of node in another to use it in that other version Make sure you are using version 3+ installed with node Important npm commands to know: npm list –g --depth=0 – show all installed packages and versions npm list package – show current version of package available npm list –g package – show globally installed version of package npm install package – installs latest version of specified package npm install – when run from within a project, will install dependencies npm i -g package – installs latest version of specified package globally npm i -g package@version – installs specific version of specified package globally

Important npm commands ctd. Important npm commands to know (ctd.): npm i -g package@latest – installs latest version of specified package globally npm outdated –g – shows outdated packages with current, latest, and desired versions npm view package [item to view] – show info on package; optionally a specific item; e.g. Using –savedev parameter indicates for use in dev only Required Packages (packages and versions installed at time of presention: yo@2.0.0 @microsoft/generator-sharepoint@1.1.1 npm@4.1.2 windows-build-tools@1.3.2 typescript@2.3.4 Be careful what you add. For example the most recent version of npm is 5.0.3, but will not install until after this presentation. ;->

yo generators npm i -g yo npm i -g @microsoft/generator-sharepoint Generally a generator can be run with command yo name-of- generator, by removing word generator; e.g. yo @microsoft/sharepoint will run @microsoft/generator-sharepoint Running a generator from command prompt with --skip-install parameter will defer installing dependent npm packages Also need @microsoft/sp-webpart-base and @microsoft/sp-core-library and @microsoft/sp-webpart-base

Development VS Code probably best bet: free cross platform extensions Debugger for Chrome extension huge help https://dev.office.com/sharepoint/docs/spfx/debug-in-vscode http://blog.velingeorgiev.pro/how-debug-sharepoint-framework- webpart-visual-studio-code - debugging React web part with Chrome

Options to access SharePoint data from SPFx 6/17/2018 Options to access SharePoint data from SPFx JSOM Introduced in SP2010 Mimics CSOM Works with delegates Does not support promises Not being invested in anymore Raw REST The same across technology stacks Easy for GET requests Complex for non-GET requests Evergreen SPHttpClient SharePoint Framework-specific Easy for all kinds of requests For non Get operations, you’ll still need to create JSON Evergreen PnP JS Core Fluent API Works natively with Promises Open-source community-driven initiative Characteristics ! Future-proof Future enhancements will be focused on the SPHttpClient and will run parallel to REST api. Also simpler to work with as it carries user and form digest info with it, obviating need for cookies and tokens. Fair Excellent Excellent Fair Coverage Hard Moderate Easy Ease of use Moderate+ © 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Key Elements of React Based Webpart manifest.json title: title in drop down to add and in property pane header description: description that shows up in hover over properties: default values of web part properties mystrings.d.ts– some constants to be referred to by strings.DescriptionFieldLabel, for example en-us.js – US English (correct English) version of constants defined in mystrings IHelloWorldProps.ts – properties for configuration pane HelloWorld.tsx – class from which webpart gets created much of the html created here WebPart.ts file instantiates and configures HelloWorldWebPart.ts Notice ts extensions, e.g. on IHelloWorldProps.ts; what actually gets generated and deployed are js files

ReactJS Xml in your javascript Works using thing called the virtual DOM Can NEVER change its own inputs (props), hence state in jsx file: export class setInitialState componentDidMount render this.setState in js file: var x = React.createClass ReactDOM.render

Demo Quickly review project structure. Show where props go into both webpart and tsx files. Show mock data. After adding property elements show how they do not show up w/o re-adding wp.

Resources Framework: Typescript: React: Office 365 Dev Patterns and Practices Andrew Connell: Mastering the SharePoint Framework Blog: http://www.andrewconnell.com/blog Waldek Mastykarz: https://blog.mastykarz.nl/ Typescript: https://www.typescriptlang.org/index.html https://www.gitbook.com/@basarat Microsoft/TypeScript-React-Starter React: Generators to generates React components: https://github.com/stylesuxx/generator-react-webpack-redux https://github.com/react-webpack-generators/generator-react-webpack-alt https://github.com/react-webpack-generators/generator-react-webpack

Resources ctd. Debugging Deployment SharePoint PnP ReactJS Debug SPFx React webpart with Visual Studio Code - Velin Georgiev Debug solutions with VS Code - Docs - Office Dev Center Deployment Deploy your web part to a SharePoint page - Docs - Office Dev Center SharePoint PnP Announcing updated SharePoint Framework developer training ReactJS Build with ReactJs: http://buildwithreact.com/tutorial Facebook Walk Through: https://facebook.github.io/react Build with ReactJS: good practical approach while still introducing key concepts. React a library, not a framework like Angular; unopinionated.