SSUG 2016 • October 5 • Göteborg

Introduction to the SharePoint Framework

David Opdendries (MCT)@sharepointdavid

SSUG 2016 • October 5 • Göteborg

Agenda• The Future of SharePoint.• What is the SharePoint Framework?• Why is it so different?• Piecing it all together.• Demo

SSUG 2016 • October 5 • Göteborg

The Future of SharePoint – The Vision• Simple and powerful file sharing and collaboration on any device• The mobile and intelligent intranet, with modern team sites,

publishing and business applications on your desktop and in your pocket.• An open and connected platform that evolves SharePoint extensibility

to embrace modern web development.• Investments in security, privacy and compliance across Office 365.

https://blogs.office.com/2016/05/04/the-future-of-sharepoint/

SSUG 2016 • October 5 • Göteborg

What is the SharePoint framework?• A Page and Part model that enables fully supported client-side

development, easy integration with the Microsoft Graph and support for open source tooling• Not a replacement for SharePoint Add-ins

https://blogs.office.com/2016/05/04/the-sharepoint-framework-an-open-and-connected-platform/

SSUG 2016 • October 5 • Göteborg

What does Jeff Teper say? – Corporate Vice President of SharePoint and OneDrive“The thing that made SharePoint successful in the past 10 years will be the same thing that will make it

successful in the next 10 years” by “Balancing SharePoint as both an Application and a Platform”

“The degree of customization people will do will vary considerably” and Microsoft will ”support the full

spectrum of customization”

“Microsoft will embrace the modern developer”http://www.microsoftcloudshow.com/podcast/Episodes/159-microsoft-ignite-recap-interview-with-jeff-teper-microsoft-cvp-sharepoint-and-onedrive https://blogs.office.com/2016/07/21/episode-100-with-corporate-vice-president-jeff-teper-on-future-of-sharepoint-office-365-developer-podcast/

SSUG 2016 • October 5 • Göteborg

SharePoint framework – Client Web Parts• Client Web Parts are full trust

web parts that use modern development techniques (Similar to injecting JavaScript into Sharepoint with script web part )

• JavaScript / Typescript based

• Backward compatible

• Lightweight web and mobile

• Support for 3rd party frameworks

SSUG 2016 • October 5 • Göteborg

SharePoint framework – Page StructureThe page structure will allow developers and enthusiasts of all skill levels to extend SharePoint capabilities more efficiently, reliability and faster than ever—and it’s mobile ready and responsive from day one.

SSUG 2016 • October 5 • Göteborg

SharePoint Framework Road MapIn the third quarter of 2016, you will see:

• The Files API on Microsoft Graph.• SharePoint Webhooks (preview).• Client-side web parts for existing pages (preview).

And by the end of 2016, we will deliver:• The Sites API on Microsoft Graph.• SharePoint Webhooks (GA).• Custom sites on the SharePoint Framework.• Team News

First Half of 2017• Modern Publishing Sites• Company News• Notifications

In the next year• Customizations and branding story

SSUG 2016 • October 5 • Göteborg

Why is the model so different?• Modern web development has been rapidly changing• Traditional SharePoint development is getting long in the tooth. • Will new modern developers embrace Sharepoint?• Will current SharePoint developers take the leap and learn new

development techniques?• Microsoft is embracing open source.• Node.js• Containers• .net core

SSUG 2016 • October 5 • Göteborg

Piecing it all together• NodeJS NPM – Node Package Manager (Same as NuGet)• GULP – Build Process (msbuild.exe)• SystemJS – Allows ES6 Module Development of Javascript (AMD)• Webpack – Packages css, js into one deployable file• SASS – Syntactically Awesome Style Sheets • TypeScript – superset of JavaScript that compiles to plain JavaScript• YEOMAN – Create a new project• IDE – Your Choice. VS code is a good one. • Command Line based

SSUG 2016 • October 5 • Göteborg

DEMO TIME• Show me the code

SSUG 2016 • October 5 • Göteborg

How to get started• http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overvie

w (Tutorials and information)• https://www.typescriptlang.org/play/ (TypeScript playground)• https://myignite.microsoft.com/videos?f=%5B%7B%22name%22:%22Share

Point%22,%22facetName%22:%22products%22%7D%5D (ignite sessions on SharePoint)• https://developers.google.com/web/fundamentals/getting-started/primers/

promises (promises)• https://github.com/stefanpenner/es6-promise (Polyfill for es6 Promise)• https://blog.mastykarz.nl/ (Blogger)• https://github.com/wictorwilen/gulp-spsync (SPSync gulp task)

SSUG 2016 • October 5 • Göteborg

Recommendations to get started• Use typescript in daily javascript development• 4 – 8 hours and your up and running.• You will save time in your daily development

• Check out SPSYNC and look at how gulp is being used. • Learn Promises• Learn how JavaScript module development works