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 the
toolchain of SharePoint Framework 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
- Visual Studio Code
- Yeoman - project scaffolding
- Node.js/NPM - local hosting and module management
- Webpack - packaging
- Gulp - build configuration and automation
Part 2 - Client side development
This module will teach you the basics and make you understand the ECMAScript standard.
- The ECMAScript standard
- Variables, Objects, Arrays and Functions
Typescript will solve many of the problems discussed in the previous chapter.
TypeScript adds type annotations and code compilation to your development process so that you write better code.
TypeScript is used by default in all SPFx generated projects.
In this module, we will talk about the TypeScript language and how it can help you in building your enterprise scale applications.
- Overview of the TypeScript language
- Why use TypeScript as a SharePoint developer?
- Showing the TypeScript toolchain and configuration
- Variables, Objects, Interfaces, Classes and more
- Programs and Modules
- Internal and external Modules
Part 3 - Developing Client-Side Web Parts
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
- Client-side web parts fundamentals
- Web Part Project Structure
- Changing the web part property pane
- Loading external frameworks
Loading SharePoint and Office 365 data in client web parts
When loading data from client-side code, we use REST. SharePoint has REST services, but there is also the Microsoft Graph
API we can use it to retrieve data from our Office 365 tenant services. This module will teach you how to use the Framework
HTTP clients to consume these services.
- Working with OData Services
- Discovering the SharePoint REST endpoints
- Microsoft Graph 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
Using and building React components for the SharePoint Framework
During this module we will cover the basics of React and how its component system works. We will load components into
our SharePoint Framework 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
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.
Also, you will learn about Office UI Fabric which offers you styles and components that match the Office365 look.
- SASS, the dynamic stylesheet language
- SASS Variables, Mixins, Nesting, functions, ...
- SASS Preprocessing
- Office UI Fabric
Loading other frameworks
We will see how you can efficiently reference external frameworks.
- Loading jQuery and plugins
- Using Angular and Angular Elements
- Bundling and Externals
Part 5 - Extensions
SharePoint Framework Extensions
One of the things that were introduced recently is SharePoint Framework Extensions. This allows developers to extend
the SharePoint Online modern user experience. For example, you can customize some areas of the SharePoint UI, change field rendering, show notifications, ... In this module, you get an overview of the possibilities and how you can
use it in your projects.
- Overview of the extensions
- Changing the UI with ApplicationCustomizers
- Changing the field rendering with FieldCustomizers
- Adding new actions to lists via CommandSets
Part 6 - 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 with Visual Studio Code
- Creating tests for your client web part using Enzyme, Sinon, Chai, ...
The final step of each succesful project is the deployment process. In this module you learn how to deploy your SharePoint
Framework projects and load your client-side web parts and extensions on SharePoint.
- Debug and Release builds
- Deploying SharePoint Assets
- Packaging your web part
- Tenant-wide deployments
- Extending the build process with custom gulp tasks to automate your processes
- Extend the webpack configuration
SharePoint Framework or SPFx is a client-side driven development model that allows us to create modern SharePoint experiences.
It is available in SharePoint Online and in SharePoint 2016 as part of a feature pack.
Development is done through open-source tools and using common web development techniques. It is entirely built on top of TypeScript.
This course will teach you the skills to extend SharePoint by using client-side code.
Participants in this training ideally have a few years of development experience.
Knowing your way around SharePoint Online is advised.