Microsoft 365 - Programming for SharePoint Online I

• Front-end developers in Microsoft 365
• Teams working with classic SharePoint solutions moving towards modern development
• Power users transitioning to sustainable and structured development

• Creating websites in HTML/XHTML and CSS
• JavaScript basics at the JS_PROG1 course level
• TypeScript basics at the JS_TS1 course level
• React basics (optional/advantageous)
• Knowledge of SharePoint lists and libraries (optional/advantageous)

1. Overview of the Microsoft 365 & SPFx platform (2 hours)

• Brief history of SharePoint and pro-code approaches
• Positioning of SPFx vs Add-ins / Power Platform / Teams apps
• Multi-tenant and tenant boundaries

2. Development environment & tools (2.5 hours)

• Node.js LTS, package managers, Yeoman, Gulp
• fnm/nvm; recommended global packages
• Project structure and configuration (tsconfig.json, package.json, serve.json)

3. Project structure & first Web Part (2.5 hours)

• Entry points, manifests, localization
• Property pane basics & live reload

4. Property panes & dynamic configuration (2.5 hours)

• Reactive vs. non-reactive fields, validation patterns
• Other configuration options

5. React & Fluent UI integration (2.5 hours)

• React/Fluent UI versions and compatibility
• Optional helper packages and patterns
• Functional components, hooks, theming & accessibility Bonus — React UI libraries: KendoReact integration (1.5–2 hours)
• Overview of the KendoReact library and licensing (commercial)
• Installing packages and basic theme in SPFx
• Using KendoReact Grid connected to SharePoint list data
• Theming alongside Fluent UI
• Notes on package size and performance

6. Data access: REST, PnPjs & Microsoft Graph (2.5 hours)

• AadHttpClient vs MSGraphClientFactory vs SPHttpClient
• Batching, selective projection, error handling

7. Performance & caching (2.5 hours)

• Package analysis, code splitting, lazy loading
• Caching strategies (session, in-memory, PnPjs)
• Local storage/indexedDB

8. SPFx Extensions (2.5 hours)

• Command Set, Application Customizer, Field Customizer
• JSON formatting as a no-/low-code alternative
• Lifecycle events & secure DOM manipulation

9. Security & permissions (2.5 hours)

• Scoped permissions, admin consent workflow
• Fallback when scope is denied

10. Localization & multiple languages (2.5 hours)

• loc folder, fallbacks, culture switching

11. Packaging & App Catalog deployment (2.5 hours)

• Creating .sppkg, versioning, tenant vs. site deployment
• Upgrade paths & manifest development

12. CI/CD & Quality gates (2.5 hours)

• GitHub Actions / Azure DevOps pipeline
• Lint, unit tests (Jest), package size limits

13. Telemetry & diagnostics (2.5 hours)

• Logging
• Performance marks
• Error boundaries

14. Hardening & governance (2.5 hours)

• Dependency checks, licenses, polyfill strategies
• Secure configurations and resilience to change

15. Capstone & review (2–2.5 hours)

• Presentation of the final Web Part + any extensions
• Code review section & backlog improvements

Previous courses

JS_PROG1 - JavaScript I: Basics [JS_PROG1]

Communication with server using AJAX and Fetch API [JS_AJAX]

JavaScript II: Advanced techniques [JS_PROG2]

DOM in JavaScript II: Advanced Techniques [JS_DOM2]

React I: Basics [JS_REACT1]

React II: Advanced techniques [JS_REACT2]

Asynchronous and reactive programming in JavaScript [JS_ASYNC]

DOM in JavaScript I: Basics [JS_DOM1]