Embed Size (px)
Citation preview
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
Questions?
Mike Ammerlaan@mikeammhttp://ammerlaan.us
Web Part DeploymentDemo
