What is the SharePoint Framework?
It's a Page and Part model that enables full support for client-side development and open source tools. It also easily integrates with Microsoft graph. The SharePoint Framework works for both SharePoint on-premises and SharePoint Online. It is still in developer preview and should be released to production in early 2017.
Microsoft used the SharePoint Framework to build their new mobile app, SharePoint Online and OneDrive for Business. The new modern document library and list experiences also use the SharePoint Framework.
Modern Pages
Pages are technology independent. You can use any Javascript framework that you like: React, Handlebars, Knockout, Angular, and more.
-
Apps runs in the context of the current user and connection in the browser. There are no iFrames.
-
Controls are rendered in the normal page DOM and responsive by default.
-
The toolchain is based on common open source client development tools like npm, TypeScript, Yeoman, webpack, and gulp.
-
End users can use SPFX client-side solutions that are approved by the tenant administrators on all sites, including team and personal sites.
-
Solutions can be deployed in both classic web part and publishing pages and modern pages.
Open Source Tooling
Microsoft is embracing the open source community by allowing developers to use any JavaScript framework they prefer.
-
Node.js - cross-platform runtime environment for hosting and serving Javascript
-
Node Package Manager (npm) - similar to NuGet, manages dependencies
-
Yeoman - scaffolding engine to kickstart new projects
-
Gulp - build process task runner
-
TypeScript - superset of JavaScript that compiles to plain JavaScript
-
JavaScript Frameworks - The following are some of the most popular:
Getting Started
Pre-requisites:
Visit the Microsoft Dev Center for detailed instructions on setting up your development environment.
Process:
-
Open a command prompt
-
Use yo to get starter files. Select the “@microsoft/sharepoint” generator
-
Use default settings in Yeoman.
-
Once the files finish downloading, you now have a simple web part.
-
Use gulp serve to create a local, HTTPS server on localhost:4321.
As mentioned before, gulp is the task runner. It handles the following build process tasks:
-
Bundle and minify our Javascript and CSS files
-
Compile SASS files to CSS
-
Compile TypeScript files to JavaScript
SharePoint Workbench
The SharePoint Workbench is a tool that allows you to build, debug and test your web parts on your development workstation. This means you don’t need to host SharePoint locally.
Choose the add button to add the HelloWorld web part to the page.
Although we built a very simple web part, you can see how relatively easy it is to get started developing solutions using the new SharePoint Framework. For additional resources and documentation, checkout the SharePoint Framework GitHub repo.