Call Us: +32 2 466 00 16
Follow Us:

Developing with the SharePoint Framework

Training code
Book this course

Part 1 - SharePoint Framework?

What is SharePoint Framework

During this introduction we will talk about the development options we have in SharePoint. We will take a look at SharePoint Framework and it's toolchain and how it fits into the SharePoint development story.

  • SharePoint Framework overview
  • SharePoint Framework tools

Preparing your machine for the SharePoint Framework

In this module we will talk about the SharePoint Framework development process and how each of the tools fits into that process.

  • Visual Studio Code
  • Yeoman - scaffolding
  • Node.js/NPM - local hosting and module management
  • Phantom.js - headless browser
  • Webpack - packaging
  • Gulp - build configuration and automation

Part 2 - Javascript

JavaScript Language

Client-side code is written in JavaScript. JavaScript is great and frustrating at the same time! This module will teach you the basics and show you how to be a good JavaScript developer.

  • Overview of the JavaScript language
  • Why use JavaScript as a SharePoint developer?
  • Variables, Objects, Arrays and Functions
  • Understanding the SharePoint Document Object Model

Popular JavaScript patterns used in the SharePoint Framework

When developing in JavaScript we do not have classes, modules, etc... In stead, we will use patterns to mimic this behaviour. This chapter will show you some of the commonly used patterns.

  • Writing maintainable and performant JavaScript
  • Constructors and Prototypes
  • Callback pattern
  • Closures
  • Option hashing
  • The self-invoking function
  • Class and Module pattern
  • Javascript Promises

Part 3 - Developing Client-Side Web Parts

Strongly typed JavaScript with TypeScript

In SharePoint Framework, Typescript is used by default in all generated projects. It allows for better typechecking while developing client-side code. This module will teach you some of the basic elements we can use: Interfaces, Classes, etc.

  • Writing application scale JavaScript
  • Type safe JavaScript development with TypeScipt
  • Implementing Types, Classes and Inheritance
  • Programs and Modules
  • Internal and external Modules

Building Client-Side Web Parts

The SharePoint Framework allows us to build modern client-side web parts. We will use the Yeoman generator to create a web part project. During this module we will explore the project structure and make some basic changes to our first web part.

  • Client-side web parts fundamentals
  • Web Part Project Structure
  • Changing the web part property pane
  • Loading external frameworks

Loading SharePoint and Office365 data in client web parts

When loading data from client-side code, we will use REST. SharePoint has REST services, but there is also the Office365 Graph API we can connect to. This module will teach you how to use the Framework HTTP Client to consume these services.

  • Working with OData Services
  • Discovering the SharePoint REST endpoints
  • Office 365 REST API
  • Handling cross domain issues with CORS

Extending your Client-Side web part projects

It is possible to add multiple web parts to your projects. We can deploy SharePoint assets through our solution! Also we could share data between these web parts and not write the same code twice.

  • Adding Multiple web parts to your project
  • Deploying SharePoint assets - lists, fields, content types
  • Share reusable code with multiple web parts / projects

Part 4 - Working with JavaScript frameworks

Brand your client web parts with SASS and Office-UI-Fabric

In this module you will learn how to make your SharePoint Framework projects look good. We will talk about SASS, which is a CSS pre-compiler and thus gives us better options. Also, you will learn about Office UI Fabric and how to use it to get the Office365 look out of the box.

  • SASS, the dynamic stylesheet language
  • SASS Variables, Mixins, Nesting, functions, ...
  • SASS Preprocessing
  • Office UI Fabric Components

Client-side data binding with knockout.js

Knockout is just one of the many data binding frameworks available. In this module we'll look at data binding as a concept. Then we'll explore Knockout and how it fits into the SharePoint Framework

  • The need for data binding
  • MVVM pattern
  • Displaying and editing javascript objects through binding
  • Binding to collections
  • Binding to functions

Using and building React components for the SharePoint Framework

During this module we'll cover the basics of React and how it's component system works. We will load components into our Framewokrk client side web parts.

  • What is React?
  • Writing JSX
  • Building a SharePoint user interface using React
  • Create and use your own React components
  • Using the existing React components

Part 5 - Testing and Deployment

SharePoint Framework Testing

In this chapter, we will take a look at some of the debugging and testing options we have available for SharePoint Framework

  • SharePoint Workbench overview
  • Debugging your code
  • Creating test for your client web part


The final step of each succesful project is it's deployment. In this module you will learn how to deploy your SharePoint Framework projects and thus load your client side web parts on SharePoint pages.

  • Debug and Release builds
  • Packaging your web part
  • Extending the build process with custom tasks

The SharePoint Framework or SPFx is a brand new development model that allows us to create modern client-side SharePoint experiences. The first preview was released in August 2016 on SharePoint Online and will become available on SharePoint Server 2016 in 2017. It provides support for open source development and is entirely build on top of JavaScript.

Most SharePoint developers today are excellent server side .NET developers but lack the required skills to make the transition to this new SharePoint Framework. This course will teach you the skills to extend SharePoint by using client-side code. You will learn about JavaScript as a language and all required libraries and tools to start developing with the SharePoint Framework: TypeScript, Node.js, React, Knockout, gulp, yeoman...

Participants in this training should be experienced developers. No JavaScript experience is required. Knowing your way around SharePoint Online is advised.

© 2017 U2U All rights reserved.