Modern App Development with the SharePoint Framework

Modern App Development with the SharePoint FrameworkPete FilicettiPrincipal Consultant, Kingsman Technology Solutions

https://twitter.com/petefilicettihttp://www.kingsmantech.com

• Session objectives: • Provide an introduction to development and deployment of SharePoint

client-side web parts• Explain the tooling currently available for developing with the

SharePoint Framework• Explain the development cycles for offline and online development

• Session takeaways:• SharePoint development is moving to industry-standard web

development methods• Understand the tooling required to build SharePoint customizations

Session objectives and takeaways

SharePoint Framework (SPFx)

SharePoint framework

LOB Systems and Cloud ServicesMicrosoft Graph

Modern client-side development

Lightweight and performant

Powers current Microsoft experiences

Backward compatible

Supports open source tools and JavaScript web frameworks

SharePoint Framework Components

Client-side web parts

Modern page canvas

JavaScript resource management

Page context & site data APIs

User Experience

Yeoman templates

Gulp-based build process

SharePoint Workbench

Build Process & Tooling

Client-side solutions

Tenant-scoped deployment

Packaging

Developer Preview Release

Submit/discuss SPFx Issueshttp://aka.ms/spfx-issuesCommunity ContributionsSPFx DocumentationSPFx Web Part Samples

August 17, 2016SPFx Drop 1

September 1, 2016SPFx Drop 2

September 14, 2016SPFx Drop 3

September 21, 2016SPFx Drop 4

http://github.com/sharepoint || http://dev.office.com/sharepoint

November 22, 2016SPFx Drop 6

October 17, 2016SPFx Drop 5

SharePoint Client-side Web Parts

Same as web parts you’re used to.

Built for the modern, JavaScript-driven

web.

Runs directly inside a SharePoint Page.

Client-side Web Parts

Demo: Modern SharePoint Pages

SharePoint Framework Tooling

Visual Studio Code

Atom

Sublime

and more … your choice!

Code Editors

React

Angular

Knockout

and more … your choice!

JavaScript Frameworks

Yeoman TemplatesGulp-based Build ProcessNodeJS/NPMSystemJSWebpackSASSTypeScript

Build Process & Tooling

Open source tooling

IIS Express

Project Templates

C#

Server side tool comparison

MSBuild

Office UI Fabric

Front-end experiences for SharePoint

Powers Microsoft’s own experiences

Available out of the box

Design web parts seamlessly

Office UI Fabric React for rich set of reusable controls

Fonts, icons Colors

Components

Fabric and its sub-projectsAll depending on the Core, all open source

Fabric CoreCore elements of the design language including icons, colors, type, and the grid

Fabric ReactRobust, up-to-date components built with the React framework.

Fabric JSSimple, visuals-focused components that you can extend, rework, and build on.

ngFabricCommunity-driven project to build components for Angular-based apps.

Fabric iOSNative Swift colors, type ramp, and components for building iOS apps.

Community built

Tool Installation / Configuration• cmder (optional)• Download and install from cmder.net

• Editor (Visual Studio Code, etc.)

• Node.js• Download and install from

nodejs.org/en/download/

Tool Installation / Configuration (cont.)• Yeoman• npm install -g yo

• Gulp• npm install --global gulp-cli

• SharePoint Scaffolding• npm i @microsoft/generator-sharepoint -g

Web Part Building Blocks

Building blocks: BaseClientWebPart ClassBase functionality for the web part

Rendering life cycle

Access to web part DOM

Access to page context & instance data

Property pane integration

Building blocks: Web part manifest

Defines your web part

Web part information

Web part properties behavior

Specify default property values

Deployed to SharePoint

SharePoint WorkbenchDeveloper tool to debug web parts

Local development experience

Test your changes locally

SharePoint Framework available offline

Available in SharePoint Online as well

Client-side Web Part Build FlowInstall SharePoint

Generator

Scaffold SharePoint Web Part Project

Build Web Part Code

Test

Local

UAT / Pre-production

Package/Deploy

Available on Classic and Client-Side Pages

Package/Deploy

npm i @microsoft/generator-sharepoint -g

yo @microsoft/sharepoint

Code

gulp serve

workbench local

gulp package-solution

gulp deploy-azure-storage

Ship?

Release using app catalog*

manual upload of the appworkbench SPO

Working With a SPFx Project

The Command Lineyo @microsoft/sharepoint – create new project / add new web part

gulp bundle – build and bundle projectgulp serve – bundle project and start Workbenchgulp package-solution – build solution package (.spapp)gulp nuke – delete build and intermediate foldersgulp test – run tests--ship – argument to execute a release build

The Environmentimport { EnvironmentType } from '@microsoft/sp-client-base';

this.context.environment.type

Values:EnvironmentType.Tests – Tests contextEnvironmentType.Local – SharePoint WorkbenchEnvironmentType.SharePoint – Modern SharePoint pageEnvironmentType.ClassicSharePoint – Classic SharePoint Page

Property PanePropertyPaneTextField – get this by default with projectPropertyPaneButtonPropertyPaneCheckboxPropertyPaneChoiceGroupPropertyPaneCustomFieldPropertyPaneDropdownPropertyPaneHorizontalRulePropertyPaneLabelPropertyPaneLinkPropertyPaneSlider

Demo: Default Project

Web Part Deployment Flow

todo.spappPackage as an client-side solution

Developeryo @microsoft/sharepoint gulp –shipgulp bundle --shipgulp package-solution --shipgulp deploy-azure-storage

Available to

SharePoint Sites

Tenant AdminTenant App Catalog ApprovedDeliver the package to upload, trust and

deploy the package to

Install/Uninstall appSite Admin

Page AuthorsAddConfigure

Todo Web Part

End UsersInteract

• Web Stack Tooling• Install node.js and cmd tooling for testing web stack development locally• webpack for bundling applications

• JavaScript Framework(s)• Light-weight frameworks - Knockout, Handlebars etc.• Full-fledged frameworks – Angular, React, Ember etc.• Benefits and usage scenarios for frameworks

• UI Development• Office Fabric UI – available by default for SharePoint Framework customizations• Other UI frameworks can also be used

Learning Topics

• Waldek Mastykarz’s Blog• SharePoint MVP• Great content on SharePoint Framework• https://blog.mastykarz.nl/

• Github• Documentation• Patterns and Practices (PnP) – JS Core, samples• https://github.com/sharepoint

Resources

• Session objectives: • Provide an introduction to development and deployment of SharePoint

client-side web parts• Explain the tooling currently available for developing with the

SharePoint Framework• Explain the development cycles for offline and online development

• Session takeaways:• SharePoint development is moving to industry-standard web

development methods• Understand the tooling required to build SharePoint customizations

Session objectives and takeaways

Thanks to our Sponsors!!!

Join us at #SharePint at World of Beer of Reston in the Towncenter just across the bridge

Why? To network with fellow SharePoint professionalsWhat? SharePint!!!When? 4:45 PMWhere? World of Beer Reston1888 Explorer StreetReston, VA 20190

Thanks for coming!