Faysal AzizFA-0810Software DevelopmentMainframe & Enterprise Systems
SharePoint Framework Development with SPFx
Introduction
Why this course
Develop client-side SharePoint web parts using SPFx, React and a version-compatible toolchain. Over four days, work through project setup, property panes, data operations, libraries, UI styling, security, performance and packaging.
Exercises use a prepared SharePoint environment, suitable permissions and mutually supported SPFx, Node.js, React and UI-library versions. Advanced topics are selected introductions and guided examples, not a guarantee of complete production proficiency.
Learning outcomes
Learning outcomes
- Explain SPFx architecture and compare it with historical SharePoint extension models.
- Set up a compatible toolchain and create and test a client-side web part.
- Use React, property panes, SharePoint data operations and appropriate state management.
- Integrate selected packages/APIs and style responsive interfaces with compatible UI components and SCSS.
- Review permissions, security and performance concerns.
- Package a solution, work with an App Catalog and troubleshoot selected deployment issues.
- Use source control and collaboration practices for SPFx work.
Prerequisites
Prerequisites
- Basic understanding of programming concepts.
- Familiarity with JavaScript and its ecosystem.
- An understanding of web development basics such as HTML and CSS.
A prepared SharePoint development site/App Catalog and the permissions needed for selected CRUD and deployment exercises.
Training outline
4 modules
·
01Environment and SPFx architecture2 topics
- Introduction to SharePoint & SPFx
- SharePoint development history: farm solutions and retired SharePoint Online Add-ins compared with SPFx
- Benefits and significance of the SharePoint Framework.
- Overview of the SPFx architecture: components, dependencies, and workflow.
- Setting up the Development Environment
- System requirements and prerequisites for SPFx.
- Detailed walk-through of Node.js: Its role and installation process.
- Yeoman project scaffolding and version-specific build tooling: Heft for SPFx 1.22+, Gulp for older supported projects
- Step-by-step creation of your first SPFx project: Project structure and key files.
02Web parts, React and data flow2 topics
- Developing Web Parts with SPFx
- Web part life cycle: from creation to deployment.
- Building and testing client-side web parts using the SharePoint-hosted workbench and supported local development server workflow; no retired local workbench
- Introduction to React within SPFx: Components, Props, and State.
- Customizing web parts: Working with property pane for dynamic behaviors.
- Managing Data & Data Flow in SPFx
- Introduction to SharePoint data structures: Lists, Libraries, and more.
- Selected list/library CRUD operations using version-compatible PnPjs and appropriate permissions
- Application state: React state and an introduction to additional tools such as Redux where justified
03Libraries, APIs and interface styling2 topics
- Integrating external libraries and APIs
- Working with npm: Adding and managing packages.
- Fetching data from external APIs: Using fetch API, Axios and integrating with SharePoint data.
- Selected compatible package integrations; assess whether libraries such as Lodash or jQuery are needed
- User interface and styling
- Office UI Fabric/Fluent UI concepts and components compatible with the selected SPFx/React version
- Custom styling techniques: Using SCSS in SPFx solutions for granular style control.
- Ensuring responsive design: Techniques and practices for a mobile-friendly SharePoint experience.
04Security, performance and deployment3 topics
- Security and performance
- The SharePoint context: Current user, permissions, and site details.
- Ensuring security in SPFx: Practices to avoid common vulnerabilities.
- Performance tuning: Tools and techniques for optimizing load times and responsiveness.
- Deployment of SPFx Solutions
- Understanding the SharePoint App Catalog: Deployment and versioning.
- Packaging solutions: Generating .sppkg files, and handling feature and package manifests.
- Deployment to supported SharePoint environments and page experiences; compatibility and version management
- Wrap-up and Next Steps
- Common challenges and their solutions in SPFx development.
- Staying updated: Following SharePoint and SPFx updates and communities.
- Questions, review and next learning steps
Use source control to review changes and coordinate work; select a small prepared solution for packaging and deployment practice.
A programme built around your team.
Share your training goals and requirements.