Build Client-side web parts for Microsoft SharePointChakkaradeep (Chaks) ChandranProgram Manager, Microsofthttps://twitter.com/chakkaradeephttp://www.chakkaradeep.com

• Session objectives: • How SharePoint client side web parts are being developed and

deployed.• What kind of tooling will be initially available for developers around

SharePoint Framework.• How the development cycle will work with offline and online

development.

• Session takeaways:• SharePoint development is aligned with industry standard development

methods for web.• Available dev tooling will assist you on the journey for building needed

customizations.

Session objectives and takeaways

SharePoint Extensibility PrinciplesBuild long-term, value-added services for enterprise mobility

To provide an Application Development Framework that aligns 1st and 3rd parties

To build industry leading client side solutions On-Premises and in the Cloud

Unlocking the potentials of SharePoint and the Microsoft Graph on desktops or any device

Principles

Modern client-side development

Lightweight web and mobile

Powers our own experiences

Backward compatible

Supports open source tools and JavaScript web frameworks

SharePoint Framework (SPFx)

SharePoint framework

LOB Systems and Cloud ServicesMicrosoft Graph

Ignite BRK2114 – Get an introduction to SharePoint Framework

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

Ignite BRK2117 – Discover the future of Microsoft SharePoint development

October 17, 2016SPFx Drop 5

SharePoint Client-side web parts

Configurable, reusable,

purpose built components

Add functionality to SharePoint experiences

Context aware parts

Framework for connecting

related components

Web Parts

SharePoint Web Parts

Ignite BRK2040 – Discover the new SharePoint content publishing experiences

They are still web parts!

Built for the modern, JavaScript-driven

web.

Runs directly inside a SharePoint Page.

Client-side Web Parts

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

Ignite BRK3246 – Looking behind the scenes at how we're making SharePoint's front end/UX modern, responsive, and open

Office UI Fabric

Front end experiences for SharePoint

Powers our own experiences

Available out of the box

Design web part seamlessly

Office UI Fabric React for rich set of reusable controls

Fonts, icons Colors

Components

Ignite BRK3246 – Looking behind the scenes at how we're making SharePoint's front end/UX modern, responsive, and open

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

Building blocks of a web part

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

HelloWorld Web PartClient-side tooling and development. Chakkaradeep Chandran

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 Part Deployment

Chakkaradeep Chandran

• Conceptual process – Checkout “JavaScript embed models” with add-in model implementations from PnP

• Learn used technologies – Web stack tooling• Install node.js and cmd tooling for testing web stack development on your computer• Learn webpack for bundling your applications

• Learn JavaScript Framework(s)• Light-weight frameworks - Knockout, Handlebars etc.• Fully-fledged frameworks – Angular, React, Ember etc.• Get understanding on how they can be used and what the benefits are of using them

• Learn Office UI Fabric usage• By default available for SP Framework customizations. Other UX frameworks can also be used

Training Path – How to master SP Framework?

Code samplesGuidance documentationMonthly community callsCase Studies

ThemesSharePoint FrameworkSharePoint add-insRemote API models with SharePoint development

Sharing is caring…

http://aka.ms/SharePointPnP

BRK2115 – Learn about PnP and the new SharePoint Framework

• Session objectives: • How SharePoint client side web parts are being developed and

deployed.• What kind of tooling will be initially available for developers around

SharePoint Framework.• How the development cycle will work with offline and online

development.

• Session takeaways:• SharePoint development is aligned with industry standard development

methods for web.• Available dev tooling will assist you on the journey for building needed

customizations.

Session objectives and takeaways