SharePoint Framework (SPFx) — Application Development Basics (SPO_DEV_1)
This five‑day hands‑on training gives participants a thorough introduction to modern SharePoint Framework (SPFx) development for Microsoft 365. You will learn how to build client‑side web parts using React, Fluent UI, and modern TypeScript/JavaScript practices, how to access data via REST, PnPjs, and Microsoft Graph, and how to apply performance and security best practices in real projects.
A 5‑day introductory development course delivered exclusively for GOPAS
Course Overview
The course covers:
- SPFx development environment setup
- Project structure and toolchain fundamentals
- Deployment and packaging
- Performance tuning & caching approaches
- Integration with React UI libraries (including KendoReact)
- Automation and recommended engineering workflows
Who Should Attend
This course is designed for:
- Front‑end developers working with Microsoft 365
- Developers transitioning from classic SharePoint solutions to modern SPFx
- Power users moving into structured application development
Prerequisites
Participants should have:
- HTML/XHTML & CSS fundamentals
- JavaScript basics (equivalent to GOPAS JS_PROG1)
- TypeScript basics (equivalent to JS_TS1)
- Optional / advantageous:
- Basic React knowledge
- Understanding of SharePoint lists and libraries
Training Format
- 5 days of instructor‑led training
- Practical labs for every module
- Real‑world SPFx development workflow
- Tooling coverage: Node.js LTS, Yeoman, Gulp/Heft, package managers
- Sample solutions and best‑practice patterns
What You Will Learn
1. Modern SPFx Platform Overview
- SharePoint evolution and modern development approaches
- SPFx positioned against Add‑ins, Power Platform, and Teams development
- Multi‑tenant boundaries in Microsoft 365
2. Development Environment & Toolchain
- Node.js LTS, npm / pnpm / Yarn
- Yeoman, Gulp, configuration files (tsconfig.json, serve.json)
- Using fnm/nvm for Node version management
- Recommended global tools & packages
3. First Web Part & Project Structure
- SPFx project anatomy
- Entry points, manifests, localization
- Property pane basics & live reload
- Dynamic property pane configuration and validation
4. React & Fluent UI Integration
- Supported versions and compatibility guidance
- Functional components, hooks, theming, accessibility
- Optional helper packages for UI patterns
- Fluent UI theming vs. custom styling
5. Bonus Module: KendoReact Integration
- Overview of the KendoReact commercial UI library
- Installation, theme configuration
- Using KendoReact Grid with SharePoint list data
- Notes on performance, package size, and design alignment
6. Data Access: REST, PnPjs & Microsoft Graph
- SPHttpClient vs AadHttpClient vs MSGraphClientFactory
- API batching, projection, error handling
- When to choose REST vs Graph vs PnPjs
7. Performance & Caching
- Package analysis, bundle splitting, lazy loading
- Caching strategies: in‑memory, session, PnPjs caching, IndexedDB
- Reducing load time and improving rendering performance
8. SPFx Extensions & Deployment Automation
- Application customizers, list view command sets, field customizers
- Packaging & bundling for production
- Deployment pipelines & automation considerations
- Using tenant‑level app catalogs
9. Security Best Practices
- Permissions and access considerations
- Multi‑tenant safety constraints
- Secure API calls & identity handling
- Validations, sanitization, and safe coding patterns
Outcomes & Deliverables
Participants will learn to:
- Build production‑ready SPFx web parts
- Integrate React + Fluent UI in modern M365 solutions
- Securely access Microsoft 365 data via REST / PnPjs / Graph
- Apply performance optimization & caching patterns
- Package, deploy, and maintain SPFx solutions efficiently