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

2. Presenters

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

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

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

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

7. Tooling

8. Tooling Comparison
IIS Express
Project Templates C#
MSBuild

9. Tooling Comparison
IIS Express
Project Templates C#
MSBuild

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

11. Client Side Web Part Building Blocks

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

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

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

15. Developer Workflow

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

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

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

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

20. Demo

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

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

23. Questions

24. Resources
Build Client-Side Web Parts for Microsoft SharePoint (BRK4015), Chakkaradeep Chandran
Introduction to Development using SharePoint Framework, Bill Baer introduction-development-using-sharepoint-framework- bill-baer/