SharePoint Framework – Embracing Client Side Coding and Development Practices Presented by Kenny Duenke and Patrick Witbrod Tuesday, October 11, 2016

Presenters

Development Model Evolution Server Side Development 2001 ASP Digital Dashboards, File System Storage, etc. 2003 ASP.NET ASP.NET Web Parts, Full Trust APIs, Server Side Event Receivers… 2007 ASP.NET ASP.NET Web Parts, Full Trust APIs, Server Side Event Receivers… 2010 ASP.NET ASP.NET Web Parts, Full Trust APIs, Server Side Event Receivers… 2013 ASP.NET ASP.NET Web Parts, Full Trust APIs, Server Side Event Receivers…

Development Model Evolution 2001 SharePoint Portal Server 2001 2003 SharePoint Portal Server 2003 2006 Office SharePoint Server 2007 2009 SharePoint Server 2010 2012 SharePoint Server 2013 2016 SharePoint Server 2016 Full Trust Code Partial Trust Code App Model SharePoint Framework

Goals of SharePoint Framework To provide an Application Development Framework that aligns 1st and 3rd parties To build industry leading client side solutions Unlock the potentials of SharePoint and Microsoft Graph

A Whole New World Ugh…more tools! Why do I want to learn this? Embraces the larger web development community Local development environment Highly responsive page experience

Tooling

Tooling Comparison IIS Express Project Templates C# MSBuild

Tooling Comparison IIS Express Project Templates C# MSBuild

Office UI Fabric Fabric Core Fabric React Fabric JS ngFabric Core elements of the design language including icons, colors, type, and the grid Fabric React Robust, up-to-date components built with the React framework. Fabric JS Simple, visuals- focused components that you can extend, rework, and build on. ngFabric Community-driven project to build components for Angular-based apps. Fabric iOS Native Swift colors, type ramp, and components for building iOS apps.

Client Side Web Part Building Blocks

BaseClientWebPart Class Base functionality of a web part Similar rendering life cycle to .NET web parts Access to DOM, page context and instance information Property pane integration

Web Part Manifest Defines the web part Stores web part information, properties and default values Deployed to SharePoint

SharePoint Workbench What is it? Developer tool to debug web parts Brings the new SharePoint page experience local Test your changes locally Available offline Available online as well

Developer Workflow

Modern Toolchain Office 365 CloudRoadShow 7/30/2018 7:08 AM © 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Office 365 CloudRoadShow 7/30/2018 7:08 AM © 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Modern Toolchain Office 365 CloudRoadShow 7/30/2018 7:08 AM © 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Modern Toolchain Office 365 CloudRoadShow 7/30/2018 7:08 AM © 2015 Microsoft Corporation. All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Demo

SPFx Roadmap Now Sites on Microsoft Graph (preview) SP WebHooks (preview) Client side web parts for classic pages (preview) SharePoint and PowerApps integration (preview) Soon Sites on Microsoft Graph (GA) SP WebHooks (GA) Client side web parts for modern pages (preview) SharePoint and PowerApps integration (GA)

Key Takeaways SharePoint development is aligning with industry standard web development techniques and principles. It’s an exciting time to be developing for SharePoint!!

Questions

Resources Build Client-Side Web Parts for Microsoft SharePoint (BRK4015), Chakkaradeep Chandran https://myignite.microsoft.com/videos/2725 Introduction to Development using SharePoint Framework, Bill Baer https://www.spcaf.com/blog/webinar-recordingslides- introduction-development-using-sharepoint-framework- bill-baer/