What's new in the world of SharePoint development and deployment Microsoft Ignite 2016 5/26/2018 8:50 PM What's new in the world of SharePoint development and deployment Yaroslav Pentsarskyy Consultant, Author sharemuch.com © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

About me -Microsoft MVP since 2009 -Book author -Speaker Blog: sharemuch.com/blog

SharePoint Development Options 2007 Farm Solutions Hacky JavaScript 2010 Sandbox Solutions 2013 Hacky Sandbox Solutions Less hacky JavaScript Apps 2016 JavaScript and JS Frameworks Apps Online JavaScript and JS Frameworks Apps New Development Framework © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

SharePoint Development Options 2007 Farm Solutions Hacky JavaScript 2010 Sandbox Solutions 2013 Hacky Sandbox Solutions Less hacky JavaScript Apps 2016 JavaScript and JS Frameworks Apps Online JavaScript and JS Frameworks Apps New Development Framework © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

What’s new in new dev framework? Modern Sites Client Web Parts Deployment Model Modern Pages Dev Model

What’s new in new dev framework? Modern Sites Client Web Parts Deployment Model Modern Pages Dev Model Referred to as Publishing Pages Have their own library No typical web part zones

What’s new in new dev framework? Modern Sites Client Web Parts Deployment Model Modern Pages Dev Model Sole reliance on JavaScript Pre-built JS injection onto a page … not like old apps Referred to as Publishing Pages Have their own library No typical web part zones

What’s new in new dev framework? Modern Sites Client Web Parts Deployment Model Modern Pages Dev Model Sole reliance on JavaScript Pre-built JS injection onto a page … not like old apps Referred to as Publishing Pages Have their own library No typical web part zones Use any framework: jQuery, React, Angular, Knockout … or none at all

What’s new in new dev framework? Modern Sites Client Web Parts Deployment Model Modern Pages Dev Model Gulp Yeoman Sole reliance on JavaScript Pre-built JS injection onto a page … not like old apps Referred to as Publishing Pages Have their own library No typical web part zones Use any framework: jQuery, React, Angular, Knockout … or none at all

Tools Office 365 Developer Site 5/26/2018 8:50 PM Tools Office 365 Developer Site https://msdn.microsoft.com/en-us/library/office/fp179924.aspx#o365_signup Add “workbench.aspx” to one of the libraries. Link to workbench https://raw.githubusercontent.com/SharePoint/sp-dev-docs/master/workbench.aspx Download and Install latest NodeJS https://nodejs.org Download and Install Visual Studio Code or another code editor https://code.visualstudio.com/ © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

5/26/2018 8:50 PM Tools … continued Install windows-build-tools (compilers, SDKs and libraries) In Node, execute: npm install -g --production windows-build-tools Install Yeoman and gulp npm install -g yo gulp Install Yeoman SharePoint generator npm install -g @microsoft/generator-sharepoint More details here: https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

What are all these tools SP Dev Site Your new dev environment Workbench Environment to build UI and some interaction NodeJS Your new .NET Framework Visual Studio Code Your new code editor Windows Build tools DLLs needed to call Office code Yeoman Dev templates generator

Demo Microsoft Ignite 2016 5/26/2018 8:50 PM © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Video Creating new web part with NodeJS and Yeoman >yo @microsoft/sharepoint

Video Deploying Web Part >gulp serve

Updates to VanSPUGWepPart.ts // Just before export default class VanSpugWebPart extends export interface ISPLists { value: ISPList[]; } export interface ISPList { Title: string; Id: string;

Updates to VanSPUGWepPart.ts // Replace contents of public render(): void with this.domElement.innerHTML = ` <div id=“listWrapper"> </div>`; this._renderListAsync();

Updates to VanSPUGWepPart.ts // Add below right after public render(): void private _getListData(): Promise<ISPLists> { return this.context.httpClient.get(this.context.pageContext.web.absoluteUrl + `/_api/web/lists`) .then((response: Response) => { return response.json(); }); } private _renderListAsync(): void { this._getListData() .then((response) => { this._renderList(response.value); private _renderList(items: ISPList[]): void { let html: string = ''; items.forEach((item: ISPList) => { html += ` <ul> <li> <span class="ms-font-l">${item.Title}</span> </li> </ul>`; const listContainer: Element = this.domElement.querySelector('#listWrapper'); listContainer.innerHTML = html;

Video Modifying Client Site Web Part to show data from site Reference: https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/connect-to-sharepoint

Scenarios and new patterns Web Parts SharePoint Client Side Web Parts HTML, JS, NodeJS, Yeoman Event Receivers SharePoint web hooks Any server technology Deploy/Configure sites, lists etc PowerShell Timer Jobs Azure Web Jobs Office 365 API, NET Site Templates PowerShell, CSOM

PowerShell for SharePoint Online >How can I do anything real with PowerShell’s 30 or so commands?

PowerShell for SharePoint Online? >How can I do anything real with PowerShell’s 30 or so commands? >Use SharePoint API and assemblies to unlock almost any capability in SPO

Demo Microsoft Ignite 2016 5/26/2018 8:50 PM © 2016 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Common questions Is the new SP Dev Framework coming to SP 2016 5/26/2018 8:50 PM Common questions Is the new SP Dev Framework coming to SP 2016 Yes, eventually If I create a “new web part” is it backwards compatible on old pages Yes Can classic web parts work on modern pages No Is App Framework obsolete No, it’s used as a vehicle to deliver “new web parts” Are provider hosted apps obsolete No, in fact they are good choice for code requiring backend or hidden logic Are client side web parts secure No, if you know how to debug JS, you can access the guts of the web part © 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Thank you … questions?