Explore the SharePoint Framework

Mike AmmerlaanProduct Marketing Manager, Microsoft, USA@mikeammhttp://aka.ms/explorespfx

https://code.visualstudio.com/

https://nodejs.org/

npm install --global --production windows-build-tools

npm i -g yo gulp

npm i -g @microsoft/generator-sharepoint

Sources:1. 451 Research, Hosting and Cloud Study, 2014

Full Trust CodePartial Trust Code

Microsoft Managed Solutions

Microsoft Online Services

App Model

Modern PagesDemo

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

Type/Interface API DescrpitoinIWebPartContext this.context Core context object.

Contains domElement, pageContext, e

HttpClient this.context.httpClient

Make Http Requests against SharePoint endpoints

PageContext this.context.pageContext

Access more information about the site, web, user

IClientSideWebPartStatusRenderer

this.context.statusRenderer

Methods for displaying errors

Environment this.context.environment.type

Contains an environment property now –whether we’re in debug/not

ServiceScope this.context.serviceScope

Provides a service registration pattern across parts

https://code.visualstudio.com/

https://nodejs.org/

npm install --global --production windows-build-tools

npm i -g yo gulp

npm i -g @microsoft/generator-sharepoint

Project Templates

IIS Express

What is TypeScript?

“TypeScript is a free and open source programming language developed and maintained by Microsoft. It is a strict superset of JavaScript, and adds optional static typing and class-based object-oriented programming to the language.” https://www.typescriptlang.org

• Strict superset of JavaScript• Transpiles to JavaScript

Reasons for TypeScriptUseful for larger projects

• Strong (static) typing• Namespacing

Support a better experience in rich dev environments• Spot common errors as typing• Enable type ahead

Support new ECMAScript 6 features, yet compile to older ECMAScript targets such as 3

• Modules• Lambda functions• Classes• Spread operator

Variable Declarationsvar and let

var x: number = 2;let y: number = 2;

• “var” and “let” very similar, but have different “scopes”

• “let” is block scoped

• “var” is functionally scoped

Classes• Traditional JavaScript focuses on functions and prototype-based inheritance

• Provides basic means of building reusable components

• TypeScript provides “Class” structure more common to OO programmers• Often used with Interfaces

• Classes can implement Interfaces and extend other Classes

export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {

public constructor(context: IWebPartContext) {super(context);

}}

ModulesModules allow for exporting and importing blocks of code to larger blocks

export interface IListsService {getListNames(): string[];

}

export class MockListsService implements IListsService {constructor() {}public getListNames(): string[] {

return ["list 1", "list 2"];}

}

ListService.ts

import * as ListService from './ListService';

let dataService: new ListService.MockListsService();

let y: string[] = dataService.getListNames();

OurWebpart.ts

What is React?• User interface foundation for JS projects• Declaratively describe UX;

data-bind it to backing state;React automatically updates (reacts!) to state changes

HTML-esque description of a user interface

A type that represents a user experience element

Underlying state object

A set of initial parameters to the React component

class ShoppingList extends React.Component { render() { return (

<div className="shopping-list"> <h1>Shopping List for {this.props.name}</h1> <ul>

<li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li>

</ul> </div> ); }

}

What is React?• User interface foundation for JS projects• Declaratively describe UX;

data-bind it to backing state;React automatically updates (reacts!) to state changes

HTML-esque description of a user interface

A type that represents a user experience element

Underlying state object

A set of initial parameters to the React component

class ShoppingList extends React.Component { render() { return (

<div className="shopping-list"> <h1>Shopping List for {this.props.name}</h1> <ul>

<li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li>

</ul> </div> ); }

}

function formatName(user) {return user.firstName + ' ' + user.lastName;

}

const user = {firstName: 'Harper',lastName: 'Perez'

};

function getGreeting(user) { if (user) {

return <h1>Hello, {formatName(user)}!</h1>; } return <h1>Hello, Stranger.</h1>;

}

<h1>Hello, {formatName(user)}!</h1>{formatName(user)}

Embed JS in markup

Embed markup straight in JSX files

const element = ( <h1 className="greeting">

Hello, world! </h1>

);

const element = React.createElement('h1', {className: 'greeting'}, 'Hello, world!'

);

Fonts, icons Colors

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.

What is Gulp?

• A build/task system for automating tasks• Extensible through custom tasks

(though we’re working on SPFX task extensibility)

• It streams: continuously running; picks up changes

Command Function

gulp build Builds the client side solution

gulp nuke (-> clean)

Cleans out build artifacts

gulp serve Compiles all scripts and runs them in the browser

gulp test Runs any unit tests associated with the solution

gulp package-solution Package a client-side solution into a package

gulp deploy-azure-storage

Deploy the resources to Azure Storage

Visual Studio Code Settings (do not touch).vscode/config/node_modules/src/typings/.editorconfig.gitattributes.gitignore.yo-rc.jsonfacilities.njsprojgulpfile.jspackage.jsonreadme.mdtsconfig.json

SharePoint Framework ConfigurationNode Modules and Dependencies (do not touch) Your source code here TypeScript Typings (do not touch)General Editor Settings (Tabs vs. Spaces)Line Endings!Git File Type/Folders Yeoman Configuration and State Node JS Visual Studio ProjectGulp build steps and configurationProject Definitions and DependenciesReadme.mdTypeScript Configuration

Facilities Core React Componentcomponents/proj.tsxloc/en-us.jsloc/mystrings.d.tstests/facilities.d.tsfacilities.module.scssfacilitieswebpart.tsf’webpart.manifest.jsonIF’WebPartProps.tstests.js

US StringsStrings TypeScript definitionsFacilities Tests definitionFacilities Sass definitionWeb Part Type and outer layerWeb Part Properties and DefinitionWeb Part Properties Type Structure definitionTests in JavaScript

Extended Web Part DevelopmentDemo

todo.spappPackage as an client-side solution

Developer

yo @microsoft/sharepointgulp –shipgulp bundle --shipgulp package-solution --shipgulp deploy-azure-storage

Available to

SharePoint Sites

Tenant Admin

Tenant App Catalog ApprovedDeliver the package to upload, trust and

deploy the package to

Install/Uninstall appSite Admin

Page AuthorsAddConfigure

Todo Web Part

End UsersInteract

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

• Learn used technologies – Web stack tooling

• Learn JavaScript Framework(s)

• Learn Office UI Fabric usage

Code samplesGuidance documentationMonthly community callsCase Studies

ThemesSharePoint FrameworkSharePoint add-insRemote API models with SharePoint development

Sharing is caring…

http://aka.ms/SharePointPnP

http://techcommunity.microsoft.com

Questions?

Mike Ammerlaan@mikeammhttp://ammerlaan.us

Web Part DeploymentDemo