Developing SharePoint Framework Solutions (SPFx) for SharePoint 2019 & Office 365 (DSPFX) – Outline

Detailed Course Outline

SPFx Overview
  • SharePoint Framework Introduction
  • When to use SPFx
  • Configure Tenant & Dev Environment for SPFx
  • Office 365 CLI
  • Introduction to Visual Studio Code
  • Useful VS Extensions & Chrome AddOns
Typescript Primer
  • TypeScript Overview & Language
  • Types, Enums & Arrays
  • Classes, Interfaces, Functions
  • Using ES6 Modules
  • Using CSOM & 3rd Party Libraries in TypeScript
  • Ensuring Browser Compatibility using Shims and Polyfills
Node.js & Tooling
  • Node Introduction
  • Node Version Management
  • Node Package Manager (npm)
  • Scaffolding using Yeoman SPFx Gernerator & PnP Generator
  • Implementing & Debugging Gulp Tasks
  • Bundling with WebPack
  • Linting
SPFx Basics
  • Project Structur & Configuration
  • Implementing Methods & Handling Events
  • Debugging SPFx im Browser & VS Code
  • SPFx Utility Classes & Methods (Page Context, Env, Logging, …)
  • Working with Properties
  • Add multiple items to a SPFx Solution
  • Working with Lookups & Taxonomy
Publishing SPFx WebParts
  • Building & Packaging
  • Deploying Assets with SPFx Solutions as CAML (Fields, Content Types, Lists)
  • Site & Asset Deployment using Office 365 CLI
  • Tenant Wide Deployment
  • Maintaining & Updating SPFx Solutions using Office 365 CLI
  • Deploying SPFx using Azure Dev Ops Pipes
React Basics
  • What is React?
  • Introduction to JSX / TSX (Syntax, Event Handling, Looping, …)
  • Components & Nesting
  • Props, State & Immutability
  • Introduction to Redux
  • State Management using Redux
Implementing SPFx Web Parts using React
  • Steps to implement SPFX Web Parts in React
  • First React Web Part
  • Using Reactive Components
  • Setup & Debug Unit Testing
  • Custom Property Pane Fields
  • Planning Localization
SPFx Unit Testing
  • Testing Overview
  • Enzyme, Mocha, Chai
  • Writing Unit Tests for SPFx
Consuming SharePoint Data
  • Data Access Strategies & SPHttpClient
  • CSOM vs. REST Api vs. PnP JS
  • Mocking Data for Local Workbench
  • SPFx Create, Read, Update & Delete using CSOM, REST, PnP JS
  • CAML Queries Executing CAML Queries from SPFx
  • Consuming Search API from SPFx
  • Consuming Microsoft Graph
  • Consuming External APIs
Customizing the User Interface
  • An introduction to The Modern UI
  • Customize Modern Team Sites
  • Implementing Custom Themes
  • Understanding and using Syntactically Awesome Style Sheets
  • Using Bootstrap in SPFx
  • Office UI Fabric Overview
  • Using Office UI Fabric Reactive Components
  • Using React Reusable Controls
Using JavaScript Frameworks & Plugins with SPFx
  • Importing Libraries and using Types
  • Using jQuery & Other JavaScript Plugins
  • Migrating existing JavaScript Solutions
  • Scaffolding Projects that use Vue.js & Handlebars.js
  • Using Angular JS in SPFx
  • Using Angular Elements in SPFx
SharePoint Framework Extensions
  • What are SharePoint Framework Extensions
  • Use ApplicationCustomizers for Global Script Injection
  • Adding Page Headers / Footers using ApplicationCustomizers
  • Customize the Display of Lists using FieldCustomizers
  • Use Command Sets to trigger Actions
  • Surfacing SPFx Solutions as Teams Tab