Getting started with SharePoint FrameworkVladimir MedinaTechnical Fellow & SP Community Manager

Agenda

What’s a modern page?

Click icon to add picture

• Client-side rendered• CDN deployed• Client-side web parts• Client-side and persisted caches• Mobile optimized

SharePoint UX – Evolving cross versions

2009

SharePointServer 2010

FAST acquisitionShared Services (e.g. taxonomy)First Client Side Rendering Using XSL

2006Office SharePointServer 2007

SharePoint Publishing

2003SharePointPortal Server 2003

ASP.NETWebPartsCAML

2001SharePointPortal Server 2001

ASPEarly Server Widget TechSingle Box

2012SharePointServer 2013

Search driven publishing sitesClient Side Rendering sprinkled in, e.g. CBS, MDS, etc.

2016 …SharePointServer 2016, SPO

HybridModern standalone cloud apps, e.g. O365 Video, Delve, etc.…SPFx and Office FabricModern SharePoint pages

SharePoint Framework

SharePoint framework

LOB Systems and Cloud ServicesMicrosoft Graph

Modern client-side development

Lightweight web and mobile

Powers our own experiences

Backward compatible

Supports open source tools and JavaScript web frameworks

Modern Site PagesEasily create powerful, beautiful looking pagesCommunicate ideas and information using our new authoring canvas and gallery of web parts.

Modern building blocksAuthoring canvas and web parts are built using client-side HTML and JavaScript. Pages are reusable in custom applications

Mobile support is built in from the startContent reflows across device sizes and pages are fast and fluid.

Pages get better with the Microsoft GraphAuthors can leverage Microsoft Graph to surface relevant pages to the people that need to read them.

Visual Studio Code

Atom

Sublime

and more … your choice!

Code Editors

React

Angular

Knockout

and more … your choice!

JavaScript Frameworks

Yeoman TemplatesGulp-based Build ProcessNodeJS/NPMSystemJSWebpackSASSTypeScript

Build Process & Tooling

Open source tooling

IIS Express

Project Templates

Server side tool comparison

MSBuild C#

npm – Node Package Manager> npm install typescript --save-dev

• npm is a package manager for JavaScript • Similar ways as NuGet is for .NET framework managed cod

• Used along the side of Node.js for local JavaScript development

• Used to consume 3rd party libraries in your customizations• You can also share your own packages in npm for the benefit of others

https://www.npmjs.com/

Yeoman - Templates> yo office

• Scaffolding tool for development projects• Used to deliver SharePoint Framework

templates to your development machine• Installed to your machine using npm

http://yeoman.io

gulp – Your task and build manager> gulp serve

• Provides automation for your build tasks• Platform-agnostic simple solution with strong ecosystem

• Task manager in similar ways as MS Build has been classically for Visual Studio projects

http://gulpjs.com/

• TypeScript is typed superset of JavaScript, which compiles to plan JavaScript

• Development language for the base templates in SharePoint Framework

• You can integrate also native JavaScript to SharePoint Framework customizations* – • No need to rewrite everything

TypeScript – Typed JavaScript> tsc https://www.typescriptlang.org/

Office UI Fabric

Front end experiences for SharePoint

Powers our own experiences

Available out of the box

Design web part seamlessly

Office UI Fabric React for rich set of reusable controls

Fonts, icons Colors

Components

http://dev.office.com/fabric

DEMO

Tooling in practice – Yeoman, Gulp, Webpack, TypeScript, Office UI fabric etc.

• Linux

Install developer tools – NodeJS and npm• Install NodeJS Long Term Support (LTS)

version.• If you are using a Mac, it is recommended

you use homebrew to install and manage NodeJS.

• make sure you are running V3 of npmsudo npm install -g npm@3

npm install -g npm@3

Install developer tools – Windows Build Tools• PC

• Ubuntu

• fedorasudo yum install make automake gcc gcc-c++ kernel-devel

npm install -g --production windows-build-tools

sudo apt-get install build-essential

• Yeoman helps you kick-start new projects

• SharePoint client-side development tools include a Yeoman generator for creating new web parts.

Install Yeoman and gulp

npm install -g yo gulp

npm install -g @microsoft/generator-sharepoint

Install developer tools – Code Editors• Visual Studio Code• Sublime• Atom• Webstorm• Visual Studio 2015

• Update 3 or later• Node.js Tools for Visual Studio

Not all these tools are required. Just install he ones you want to use.

Summary

Code samples and solutionsReusable componentsGuidance documentationMonthly community calls

SharePoint FrameworkSharePoint add-insMicrosoft GraphOffice 365 APIs

Sharing is caring…

http://aka.ms/SharePointPnP

Q&A

© 2016 Microsoft Corporation. All rights reserved.