This five-day instructor-led course is intended for developers who want to be able to create client-side applications with SharePoint Framework. In this course, students will learn about the new tools needed when developing with SharePoint Framework. Next to that, JavaScript and its potential pitfalls are discussed, leading into using TypeScript as typed superset of JavaScript. Students will also be introduced to the JavaScript library React, which is commonly used inside SharePoint Framework components. Using all these, previously mentioned, techniques, students will learn how to build client-side web parts, extensions, field customizers, … with SharePoint Framework. Finally, students will learn how to include other JavaScript frameworks, provide unit tests, configure the packaging and deploying their solutions.
After completing this course, students will be able to:
This course is intended for experienced developers who want to start building solutions with SharePoint Framework. No prior knowledge of JavaScript or TypeScript is required. Knowing your way around SharePoint is advised.
Module 1: SharePoint Framework Overview
This module explains the development options we have in SharePoint. It gives an overview of the toolchain of SharePoint Framework and how it fits into the SharePoint development story.
Lessons
After completing this module, students will be able to:
Module 2: Preparing your machine for the SharePoint Framework
This module explains how to prepare your machine for SharePoint Framework development. Configuring your SharePoint environment for development and deployment is also discussed.
Lessons
Lab : Preparing your machine for the SharePoint Framework
After completing this module, students will be able to:
Module 3: Node.js Modules
This module explains how a node.js project is structured, explains the role of the different components contained within and how to scaffold a project from scratch. It illustrates the different kind of modules you have and how to work with them; i.e. installing, versioning, locking down, caching…
Lessons
After completing this module, students will be able to:
Module 4: SharePoint Framework Client Web Parts
This module explains how to use the Yeoman generator to create a SharePoint Framework project. It will illustrate the structure of a SharePoint Framework project. This module introduces client-side web parts and how to make basic changes to it. It also introduces the local and online Workbench, where your web parts can be tested.
Lessons
Lab : Create a SharePoint Framework Web Part
After completing this module, students will be able to:
Module 5: JavaScript Introduction
This module explains about the origins of JavaScript and introduces the student to what JavaScript is.
Lessons
After completing this module, students will be able to:
Module 6: JavaScript Language
This module explains how to write basic JavaScript. It describes how to create and use variables and the types that are available in JavaScript. Also, it explains about objects in Javascript, including some out-of-the-box objects like Date, Array, Math, etc. The module shows how to write functions and explains about the scopes they create. Prototypes are also introduced. Error handling is the last part of this module.
Lessons
Lab : JavaScript Basics
After completing this module, students will be able to:
Module 7: JavaScript Patterns
This module explains how to use some of the most popular patterns in JavaScript
Lessons
After completing this module, students will be able to:
Module 8: TypeScript
This module explains how Typescript solves many of the problems discussed in the previous modules. TypeScript adds type annotations and code compilation to your development process so that you write better code. TypeScript is used by default in all SharePoint Framework generated projects. This module will discuss the TypeScript language and how it can help you in building your enterprise scale applications.
Lessons
Lab : Creating a toy store with TypeScript
After completing this module, students will be able to:
Module 9: Client Web Part Properties
This module explains how to modify the property pane of your web part. It explains how to configure and use your own properties. It discusses how to dynamically load property pane options, create custom property controls, validate property values.
Lessons
After completing this module, students will be able to:
Module 10: Loading Frameworks and Libraries
This module explains how to load additional libraries inside your SharePoint Framework project from different sources.Lessons
After completing this module, students will be able to:
Module 11: SASS
This module explains how to apply styling to your web components by writing maintainable and simpler CSS by means of Sass.
Lessons
Lab : Sass in a SharePoint Framework project
After completing this module, students will be able to:
Module 12: Loading SharePoint Data in a client web part
This module explains how to load data in your SharePoint Framework components using the utility classes. The module discusses the SharePoint REST API and how to consume it. Consume your own API and handling cross-origin issues.
Lessons
Lab : Loading SharePoint data in a client-side web part
After completing this module, students will be able to:
Module 13: Build and deploy your SharePoint Framework project
This module explains how to build your SharePoint Framework project for deployment. It discusses the different deployment options you have.
Lessons
Lab : Deploying a SharePoint Framework client web part
After completing this module, students will be able to:
Module 14: React
This module will cover the basics of the JavaScript framework React. It discusses how the React component system works, and how to use it inside your SharePoint Framework projects.
Lessons
Lab : Building React components to view the members and permissions in your site
After completing this module, students will be able to:
Module 15: Framework and Office-UI-Fabric
This module explains how to use and apply the styles, components, … of the Office UI Fabric inside your SharePoint Framework projects.
Lessons
Lab : Using Office UI Fabric React Components
After completing this module, students will be able to:
Module 16: Deploying SharePoint ArtifactsThis module explains how you can use your SharePoint Framework solutions to provision SharePoint artifacts, like fields, content types, lists, … to your SharePoint site.
Lessons
After completing this module, students will be able to:
Module 17: Microsoft Graph
This module explains how to consume the Microsoft Graph from within your SharePoint Framework solutions.
Lessons
After completing this module, students will be able to:
Module 18: SharePoint Framework Extensions
This module explains how to build UI extension for your SharePoint site by means of extensions. It will discuss altering the header/footer of a site with application customizers, creating field customizers to change the rendering of a field and how to use command sets to provide your own command bar buttons.
Lessons
Lab : Using the new Microsoft Graph client from within an application extension
After completing this module, students will be able to:
Module 19: Webpack
This module explains how to use and configure Webpack to bundle all the generated code with.
Lessons
After completing this module, students will be able to:
Module 20: Gulp
This module explains the role and the use of the task runner Gulp inside your SharePoint Framework projects. It will discuss the existing tasks that have been added by default to your project as well as how you can quickly add new tasks.
Lessons
After completing this module, students will be able to:
Module 21: Unit testing web parts
This module explains how to use the included testing frameworks in your SharePoint Framework project to unit test your web parts and components.
Lessons
After completing this module, students will be able to: