1. 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.

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

3. 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.

4. 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.

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

6. 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

7. 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

8. 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

9. 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

10. Tools Office 365 Developer Site
5/26/2018 8:50 PM
Tools
Office 365 Developer Site
Add “workbench.aspx” to one of the libraries. Link to workbench
Download and Install latest NodeJS
Download and Install Visual Studio Code or another code editor
© 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

11. 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
More details here:
© 2014 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

12. 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

13. 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.

14. Video Creating new web part with NodeJS and Yeoman

15. Video
Deploying Web Part
>gulp serve

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

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

18. 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;

19. Video Modifying Client Site Web Part to show data from site
Reference:

20. 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

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

22. 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

23. 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.

24. 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.

25. Thank you … questions?