The workflow company

How to start developing in

SharePoint Framework?

The workflow company

Who am I?Tomasz GłogoszProject Manager, DatapolisCertificates: MCTS, MCTD, PMI PMP10+ years of work in IT:- Document management system- Intranets/Extranets- SharePoint – 3rd party toolshttps://pl.linkedin.com/in/tomaszglogosz

The workflow company

Agenda• What is SharePoint Framework?• What minimal requirements are needed to start dev?• What you should do next?

The workflow company

Overview of the SharePoint Framework

The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for open source tooling.

The workflow company

Key features of the SharePoint Framework• Runs in the context of the current user and connection

in the browser. There are no iFrames.• The controls are rendered in the normal page DOM.• The controls are responsive and accessible by nature.• Enables the developer to access the lifecycle.• It's framework agnostic.• The toolchain is based on common open tools.• Performance is reliable.• Can be used on all sites and pages.

The workflow company

Where to use?Web Part on old/Modern site Yes

Web Part connected to SP Yes

Mobile UX Yes

Elevated privileges Hybrid with Add-in

Long-running operation Hybrid with Azure WebJob

Limited privileges Code review / Add-in

Sensitive information No / Add-in

The workflow company

How does it work?

*.spapp App Catalog

JavaScript

WebPart

CDN

SharePoint

Web site

Your WebPart App

ADD IT

The workflow company

The workflow company

The workflow company

Tools

The workflow company

Dev1. Prepare environment

Local & On-line2. Create WebPart

Create new -> Develop -> Test local/on-line -> Debug3. Publish

SharePoint & CDN4. Connect with SharePoint

Context & Mock

The workflow company

Dev1. Prepare environment

Local & On-line2. Create WebPart

Create new -> Develop -> Test local/on-line -> Debug3. Publish

SharePoint & CDN4. Connect with SharePoint

Context & Mock

The workflow company

Dev1. Prepare environment

Local & On-line2. Create WebPart

Create new -> Develop -> Test local/on-line -> Debug3. Publish

SharePoint & CDN4. Connect with SharePoint

Context & Mock

The workflow company

Dev1. Prepare environment

Local & On-line2. Create WebPart

Create new -> Develop -> Test local/on-line -> Debug3. Publish

SharePoint & CDN4. Connect with SharePoint

Context & Mock

The workflow company

Dev1. Prepare environment

Local & On-line2. Create WebPart

Create new -> Develop -> Test local/on-line -> Debug3. Publish

SharePoint & CDN4. Connect with SharePoint

Context & Mock

The workflow company

What next?• TypeScript

• typescriptlang.org• SPFx on dev.office.com

• dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview• SPFx on github

• github.com/SharePoint/sp-dev-docs• Office UI Fabric React

• github.com/OfficeDev/office-ui-fabric-react• React & Knockout

• https://facebook.github.io/react/• http://knockoutjs.com/

The workflow company

Questions?