Upload
vladimir-medina-garcia
View
76
Download
5
Embed Size (px)
Citation preview
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.