Back to List

Getting Started with the SharePoint Framework (SPFx)

Sarah Otto Sarah Otto  |  
Feb 01, 2018
 
Throughout 2017, Microsoft has been releasing updates to the SharePoint Framework (SPFx) - a new client-side development experience to customize SharePoint’s Modern Experience. At Skyline, we’ve been experiencing the changing development landscape as it takes shape.

Recently, I was lucky to have the opportunity to attend SP Fest Chicago to hear the experiences of notable people from the community. We wanted to share what we’ve been learning to get you excited about the Modern Experience and the possibilities to make it your own!
 

Customization Types

SPFx allows for customizations in the form of web parts and extensions.
 

Web Parts

Web Parts are controls that appear inside a SharePoint page but run locally in the browser. They're the building blocks of pages that appear on a SharePoint site.
 
spfx web parts

The key benefit of developing a web part with SPFx is having control of the web part properties panel. SPFx web parts give the power to the content authors for configuring the settings of their web part such as data source, layout, filtering, etc.
 

Extensions

Extensions enable you to extend the SharePoint user experience within modern pages and document libraries.
 
spfx extensions

The SharePoint Framework has three extension types:
SPFx Extension  Classic Purpose
Application Customizers Embedded JavaScript or jQuery reference in Master Page Ability to add javascript to a page and access to well-known HTML placeholders (header / footer) – Allows for a branding solution
Field Customizers JSLink, Client-side Render Ability to override a display of a field in a modern list or library view (display view only)
Command Sets Custom Ribbon Action / Item Menu Action Ability to add an action menu items
 

Developer Experience

The SharePoint Framework allows you to use any JavaScript framework to build your web parts and extensions such as: React, Handlebars, Knockout, and Angular. The toolchain is based on modern open source client development such as npm, TypeScript, Yeoman, webpack and gulp. Compare the tooling used in classic development with the new toolchain necessary for developing in the SharePoint Framework:
 
spfx developer experience
 
Classic SPFx Purpose
.Net Node.js Cross platform run-time for executing server-side javascript
Nuget NPM Package Manager for Node.js – manage package dependencies
Visual Studio Editor of Choice (Visual Studio Code) + Yeoman A project templating generator and editor
C# TypeScript Typed superset of JavaScript, language used to build SPFx web parts and extensions
MS Build Gulp Toolkit for automating tasks in the development workflow such as build, package and deploy
  Webpack Module Bundler  Packages modern JavaScript applications into one or more bundles
 

Availability

The SharePoint Framework works for SharePoint Online (Web Parts and Extensions) and on-premises SharePoint 2016 Feature Pack 2 (Web Parts Only)
 

Let’s Start!

Use these steps to get your development environment set up for building your first SPFx web part or extension.
  1. SharePoint Environment (Create a Modern Team Site, or modern site page)
To set up your local machine,
  1. Install Node.js Install latest version (7+) https://nodejs.org/en/
  2. (Optional) If you are using a git source code repository (accept all default installation options) https://git-scm.com/download/win
  3. (Optional) You can use any editor of your choice, however we recommend using VS Code: https://code.visualstudio.com/docs/?dv=win
  4. Open Powershell
    1. Install Yeoman and Gulp à npm install -g yo gulp
    2. Install SharePoint Template Generator à npm install -g @microsoft/generator-sharepoint
 

Recommendations

Whether you are familiar with the tool chain or consider yourself a SharePoint Developer or a traditional web developer, we recommend to start slow with small customizations. At Skyline, our approach to learning the new experience is to start with customizations we are familiar with in “classic” so we don’t get hung up on the functionality and allow more focus on the development experience.

With the infancy of the SharePoint Framework and the fast-paced updates in O365, the landscape is constantly enhancing and causing some frustrations with the experience. However, the community is taking notice that (with the SharePoint Framework) Microsoft is “eating their own dog food” by developing new SharePoint features in the framework alongside the rest of the community. This simply wasn’t the case with past development models. As Microsoft feels the pains we feel, better libraries and tools will be developed to make all our lives easier and gives high confidence that this will be a model that will have longevity.
 

Important Resources for Getting Started

Setup Development Environment
Build Your First Web Part
TypeScript
 
Look forward to our next posts that will continue the journey for getting you started with the SharePoint Framework:
SharePoint

 

Love our Blogs?

Sign up to get notified of new Skyline posts.

 


Related Content


Blog Article
What is Microsoft’s Power Platform and How to Use It: The Guide
Skyline Technologies  |  
Jan 14, 2020
In this guide, Libby Fisette (Director of Skyline Modern Workplace team) and Marcus Radue (Data Analytics Engineer), dig into the functionality of the Microsoft Power Platform and how you can leverage this toolset to solve many business situations. From basics to key questions, you will find...
Blog Article
Rolling Out the Modern Office 365 Workplace: Use Cases & Tips
Libby FisetteLibby Fisette  |  
Nov 05, 2019
In this blog series, Libby Fisette, Director of Skyline Technologies’ Modern Workplace team, explores the current state of the digital workplace and some best practices for leveraging the Office 365 toolset. For a full overview on this topic, check out the original ...
Blog Article
Impactful Low Code/No Code Office 365 Business Apps
Libby FisetteLibby Fisette  |  
Oct 15, 2019
In this blog series, Libby Fisette, Director of Skyline Technologies’ Modern Workplace team, explores the current state of the digital workplace and some best practices for leveraging the Office 365 toolset. For a full overview on this topic, check out the original ...
Blog Article
Niche Office 365 Tools You Should Know: Delve, Stream, Planner
Libby FisetteLibby Fisette  |  
Oct 01, 2019
In this blog series, Libby Fisette, Director of Skyline Technologies’ Modern Workplace team, explores the current state of the digital workplace and some best practices for leveraging the Office 365 toolset. For a full overview on this topic, check out the original ...
Blog Article
Should I Save Files in OneDrive, Teams (O365 Groups) or SharePoint?
Libby FisetteLibby Fisette  |  
Sep 17, 2019
In this blog series, Libby Fisette, Director of Skyline Technologies’ Modern Workplace team, explores the current state of the digital workplace and some best practices for leveraging the Office 365 toolset. For a full overview on this topic, check out the original O365/Modern Workplace...