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

2. 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.
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?

3. 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.

4. 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

5. 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

6. Setting up O365 SharePoint Tenant
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)

7. Installing tools
Install node version manager (nvm) from
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 failed, but installing 7.7.3, then adding needed packages in that version (npm i –g …), the code ran

8. 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
nvm use version– version of node to use
nvm use 6.9.2

9. 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 – installs specific version of specified package globally

10. Important npm commands ctd.
Important npm commands to know (ctd.):
npm i -g – 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:
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. ;->

11. 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
Running a generator from command prompt with --skip-install parameter will defer installing dependent npm packages
Also

12. Development VS Code probably best bet: free cross platform extensions
Debugger for Chrome extension huge help
webpart-visual-studio-code - debugging React web part with Chrome

13. 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.

14. 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

15. 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

16. 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.

17. Resources Framework: Typescript: React:
Office 365 Dev Patterns and Practices
Andrew Connell: Mastering the SharePoint Framework
Blog:
Waldek Mastykarz:
Typescript:
Microsoft/TypeScript-React-Starter
React:
Generators to generates React components:

18. 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:
Facebook Walk Through:
Build with ReactJS: good practical approach while still introducing key concepts. React a library, not a framework like Angular; unopinionated.