SharePoint Fest DC - SharePoint Framework, Angular and Azure Functions

Apr 19, 2017Download as pptx, pdf

0 likes200 views

The document discusses the integration of Angular with the SharePoint Framework (SPFx) and Azure Functions, highlighting compatibility with different Angular versions, performance considerations, and best practices for development. It outlines a scenario for building a SharePoint framework web part using Angular, routing, and Azure Functions as a backend, while emphasizing the importance of reusing existing Office UI fabric components. Additional resources and community engagement hashtags are provided for sharing experiences and seeking support.

SharePoint Framework,Angular & Azure
Functions
The modern SharePoint developer tool belt
Sébastien Levert

Hi! I’m Seb!
@sebastienlevert | http://sebastienlevert.com | Product Evangelist & Partner Manager at

Angular… But which version ?
• Works well with Angular 1.6
• Works OK with Angular 2
• Works awesome with Angular 4 (Did you just say Angular 4!?)

Is that even possible ?
• Some are thinking it is mission impossible… But it is! And it’s much
more simpler than you think.
• You have the full power of Angular within you own SPFx webparts
• Multiple webparts can exist in a page, including their own routing
configuration

What are the limitations?
• Size of the bundle is huge, watch for performance issues!
• Webpack becomes slow when compiling yourTypeScript code
• Not built in to SPFx, so you need to build your own wrapper (I have
code for that!)
• Some variables are still global in Angular, it can become problematic
in complex solutions.

Lessons learned
• Never use any class or ids from the DOM. Always use theViewChild
attribute.
• You can use html templates using the require() approach.Try to do
that with React!
• When you have a strong AngularJS background, it feels just a little bit
weird to move to Angular, but you will get used to it!

Why Azure Functions ?
• Cheap way to host any API in Azure
• You can use your favorite language
• Super cheap to run
• Perfect companion for any Single Page Application or any JavaScript
component

Our scenario
• Using the PnP PowerShell Cmdlets
• Connecting to the Microsoft Graph and to an Azure AD Application
• Creating a ModernTeam Site (in under 15 seconds) based on a set of
parameters
• Boom!

The full scenario
• Build a SharePoint Framework WebPart
• Use Angular as our main Framework
• Include 3 routes (Home, New Site and Site Information)
• Use Azure Function as my backend provisioning API
• Use the Office UI Fabric components

What about the Office UI Fabric ?
• Well…You have 2 choices : Build or Reuse
• My choice ? Reuse !
• But Seb… It’s Angular, I can’t reuse what does not exist…
• Well…The React components exist, just reuse them !

Resources
• https://github.com/SharePoint/sp-dev-fx-
webparts/tree/master/samples/angular2-prototype
• https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-
overview
• http://dev.office.com/fabric#/components

Samples
• https://github.com/sebastienlevert/spfx-angular-poc

Share your experience
• Use hashtags to share your experience
• #Office365Dev
• #MicrosoftGraph
• #AzureFunctions
• Log issues & questions to the GitHub Repositories

Thank you!
@sebastienlevert | http://sebastienlevert.com | Product Evangelist & Partner Manager at

The document discusses the integration of SharePoint Framework, Angular, and Azure Functions, highlighting the compatibility of Angular versions and the emerging use of web components. It introduces Angular Elements, which allows Angular to generate web components and provides an efficient backend solution using Azure Functions for API hosting. The author recommends the current approach for experimentation and learning, noting that it is not yet production-ready.

SharePoint Saturday Utah 2018 - SharePoint Framework, Angular and Azure Funct...Sébastien Levert

Sébastien Levert presented on using Angular, Azure Functions, and the SharePoint Framework together. He discussed how Azure Functions can be used to host APIs cheaply using various programming languages. He demonstrated a scenario using PowerShell and the Microsoft Graph to provision new SharePoint sites via an Azure Function. Levert also covered how Angular Elements allows generating web components from Angular that can be used in SharePoint Framework web parts, though the approach is still in preview. Resources and next steps were provided.

North American Collaboration Summit 2018 - SharePoint Framework, Angular & Az...Sébastien Levert

This document discusses using Angular, Azure Functions, and the SharePoint Framework (SPFx) together. It introduces Azure Functions as a way to host APIs cheaply in Azure using various programming languages. It then demonstrates using Azure Functions with the PnP PowerShell cmdlets to provision a Microsoft Teams site. It also discusses challenges with earlier versions of Angular and SPFx, and how Angular Elements helps address these by generating web components from Angular components. The full scenario builds an SPFx web part using Angular and Angular Material, with an Azure Function as the backend API. While this approach is currently the best option, it is still early preview for production use.

European Collaboration Summit - SharePoint Framework Angular & Azure FunctionsSébastien Levert

The document discusses the integration of SharePoint Framework (SPFx) with Angular and Azure Functions, highlighting compatibility with different Angular versions and the complexities involved. It outlines the setup of web parts using Angular, routing configurations, and the benefits of Azure Functions as a cost-effective backend solution. Additionally, it emphasizes best practices, lessons learned, and provides resources for further exploration.

Fast Track introduction to ASP.NET MVCAnkit Kashyap

This document outlines a presentation on ASP.NET MVC. It begins with introductions and prerequisites. The agenda includes an overview of the MVC pattern, differences between ASP.NET MVC and web forms, routing, controllers and actions, Razor views, HTML helpers and partial views, unit testing, and best practices. Live demos are promised on routing, controllers, views, models, HTML helpers, partial views, and layouts. Resources for further learning are provided at the end.

Angular CLI : HelloWorldnikspatel007

The document provides an introduction to Angular, detailing its evolution from version 1.0 to 4.0, and highlights its features such as two-way data binding, TypeScript compatibility, and the Angular CLI for project setup and best practices. It outlines the requirements for creating a 'Hello World' application and offers commands for generating various components. Additionally, the document describes a live coding example for a to-do app, showcasing the use of the CLI in development.

Angular ❤️ CMS from #AngularUpFilip Bruun Bech-Larsen

This document discusses using Angular with a CMS. It describes challenges like bootstrapping components, initial data loading, and dynamic routing. Solutions explored include using route resolves to get data, generic page components with *ngIf directives, custom routing strategies, and the ComponentFactoryResolver for dynamic components. It also covers animating route changes, handling rich text, server-side rendering for SEO, and packaging the solutions as an NPM module.

European SharePoint Conference 2017 - SharePoint Framework, Angular & Azure F...Sébastien Levert

Sebastien Levert presented on using SharePoint Framework, Angular, and Azure Functions. He demonstrated how to build a SPFx web part using Angular that includes routing and dynamically bootstraps components. The web part consumes an Azure Function backend API to provision SharePoint sites. While this approach works, it has downsides like inability to use the Angular CLI and AOT compilation. In production, a different approach may be needed but this is good for learning SPFx and Angular.

BuildStatus - PiterJS #1PiterJS

The document discusses using NodeJS to control hardware and connect it to the cloud. It describes a system that uses NodeJS to control a robot, parse email updates, and provide a web-based control panel using AngularJS. Authentication for the API is done through JSON web tokens. The system represents a single page application with an API backend, and the document recommends using the Angular-Fullstack generator for its authentication and project structure benefits.

An Introduction to ReactNativeMichał Taberski

The document is a presentation on React Native by Michał Taberski, outlining its advantages and distinguishing it from other technologies like PhoneGap and Titanium. It discusses how React Native enables the development of native apps using JavaScript, shares insights on the framework's structure, and provides a quick start guide for developers. Additionally, it highlights the ability to reuse existing JavaScript code and the flexibility of integrating React Native into existing native applications.

Agile Apps with App EngineCalvin Cheng

Google App Engine provides advantages like not requiring servers, free usage within quotas, and quick deployment. However, it also has disadvantages like not supporting all dependencies, requiring rewriting of queries and ORMs, and limitations on queries and APIs. Frameworks are recommended for App Engine to enable agile development, team development, maintainability through MVC, and test-driven development. Example frameworks discussed are Django and Kay, noting their quick starts, learning curves, and differences in relationships from traditional servers. Sharding techniques are needed to address query object count limitations.

Advanced AngularJS Tips and TricksJeremy Likness

The document presents advanced Angular tips and tricks by Jeremy Likness, addressing key areas such as integration, best practices, debugging, and performance optimization based on extensive experience in enterprise AngularJS projects. It emphasizes the importance of structured code, early testing, and effective communication through services, while also providing practical advice on integrating third-party components and enhancing application performance. Resources for further learning are also included, such as courses and a GitHub repository for examples.

Introduction to Angular 2Tuan Trung Vo

The document presents an overview of AngularJS 2, focusing on its features as a JavaScript framework for building single-page applications (SPAs). It highlights the shift from Angular 1 to Angular 2, emphasizing performance improvements, a component-based architecture, and the adoption of modern programming practices with TypeScript. Additionally, it includes a demo link and outlines the basics of Angular components and their structure.

Glance at Visual Studio 2013 ASP.NET and Web tools 2013Shravan Kumar Kasagoni

The document outlines the release cadence for Microsoft's ASP.NET and web development tools. It notes that ASP.NET will release every 6 months along with new versions of Visual Studio. ASP.NET 4.5 released with Visual Studio 2012 in September 2012. ASP.NET and Web Tools 2012.2 released in February 2013 alongside updates to Visual Studio 2012. The next release is planned for fall 2013 with Visual Studio 2013.

C# Async/Await ExplainedJeremy Likness

The document discusses asynchronous programming with async and await in C#. It explains that async and await were introduced to address issues with threading like overhead and blocking. Async methods use threads efficiently from the thread pool rather than creating new threads. Await yields threads rather than blocking them. The document demonstrates async programming and best practices like using Task instead of async void. It recommends using async for I/O bound work since it can improve performance over synchronous code.

Angular ❤️CMSFilip Bruun Bech-Larsen

The document discusses the integration of Angular with Content Management Systems (CMS) to create dynamic content. It highlights challenges like bootstrapping components, managing routes, and achieving state maintenance within a Single Page Application (SPA) framework. The author shares insights on resolving data, animations, and server-side rendering to enhance user experience while maintaining performance.

Angular: An IntroductionAlex Hoffman

SharePoint Framework, Angular and Azure FunctionsSébastien Levert

The document discusses integrating SharePoint Framework with Angular and Azure Functions, highlighting compatibility with various Angular versions and the advantages of using Azure Functions as a backend API for modern development. It outlines configurations, routing, mocking data, and lessons learned from practical experiences, emphasizing the need for maintenance as updates occur. The author recommends this approach for experimentation and learning, while expressing caution about its use in production environments.

Angular Day 2018 (italy) - Keynote - The Amazing World of Angular 6Fabio Biondi

This document discusses AngularDay2018, an event focused on Angular and related technologies. It promotes opportunities for Italian developers, including jobs, collaborations, training, and more. It highlights many features of Angular like TypeScript, components, dependency injection, forms, routing, internationalization, and performance. It also discusses tools like Angular CLI, libraries, Angular Universal for server-side rendering, and long term support.

TypeScriptSoftware Infrastructure

This document provides an overview of TypeScript, including what it is, why it was created, its key features and benefits. It begins by explaining what JavaScript is and some of its limitations like dynamic typing and lack of modularity. It then introduces TypeScript as a superset of JavaScript that adds optional static typing and class-based object-oriented programming. The document discusses how TypeScript works with existing JavaScript frameworks and libraries, and highlights features like strong typing, better tooling and explicit intent. It provides details on TypeScript's development environment and open source status before concluding with a demonstration and mentioning some alternative languages.

1.3にBrowserify組み合わせてイベント駆動にした話Okuno Kentaro

1. The document discusses using Browserify with AngularJS 1.3 to create an event-driven application. It notes that Browserify support was already in place for AngularJS 1.3. 2. It describes an architecture where each TypeScript file contains a single directive, without using services, factories, or controllers. Events are broadcast from a central store using isolate scopes. 3. Code examples are provided for adding listeners to the central store and broadcasting events from the store. The architecture is said to respect Flux principles by having child directives act as dispatchers to the central store.

SPSNJ 2014: EmberJS & SharePointGreg Hurlman

The document is an agenda for a presentation on using Ember and Handlebars for building SharePoint applications. It introduces Ember and its history, Handlebars templating, and how to set up an Ember application. It also discusses using SharePoint as a data source and authentication for Ember applications through JSOM calls. The presentation includes demos of setting up an Ember app, building the UI with templating, and integrating everything. It concludes with a discussion on using SharePoint and thanks the audience.

Ember and SharePointGreg Hurlman

This document outlines an agenda for a presentation on Ember and SharePoint. The presentation will provide a brief history of Ember, demonstrate how to code an Ember application, discuss how SharePoint can be used as a data source for Ember applications, and conclude with recommendations and resources for further learning. The presenter is Greg Hurlman, a developer who will demonstrate building an Ember application.

A Gentle Introduction to GoOnRailsBin Joy

This document introduces Go On Rails, a framework that combines Ruby on Rails and Go (Golang). It allows developers to generate Go applications from Rails models and controllers, sharing code between the two frameworks. Examples are provided demonstrating how to generate a simple Go app from Rails and use RailsAdmin for administration with a Go backend. Future enhancements discussed include generators for Go controllers and views.

TypeScript and Angular2 (Love at first sight)Igor Talevski

The document discusses TypeScript and Angular 2, highlighting TypeScript as a superset of JavaScript that aids in developing large applications with enhanced type safety and better documentation. It outlines the features of TypeScript, its advantages for refactoring, and how it integrates with Angular 2, serving as a universal framework for mobile and desktop applications. Architectural best practices, learning resources, and an overview of Angular's components and data binding are also provided.

NativescriptSoftware Infrastructure

NativeScript is a framework that allows building native iOS and Android apps using JavaScript and CSS. It provides a runtime for creating apps with a single JavaScript codebase that can run natively on each platform. Key features include using existing JavaScript and CSS skills, two-way binding, support for Angular 2, and a low learning curve. The document then discusses the NativeScript runtime, popular IDEs and CLI commands, components and layouts, CSS support, debugging, and example apps built with NativeScript.

SharePoint Fest Seattle - SharePoint Framework, Angular & Azure FunctionsSébastien Levert

The document outlines the integration of SharePoint Framework (SPFx) with Angular and Azure Functions, detailing compatibility with different Angular versions and the use of dynamic bootstrapping within SPFx web parts. It discusses the setup of routing, configuration, and the mocking of data services, emphasizing Azure Functions as an economical backend solution for modern applications. Key lessons and resources for developers transitioning to or working with Angular in SharePoint are also provided.

SharePoint Saturday Lisbon 2017 - SharePoint Framework, Angular & Azure Funct...Sébastien Levert

The document discusses using Angular within SharePoint Framework (SPFx) web parts and integrating Azure Functions for backend API provisioning. It highlights the compatibility of Angular versions and provides insights into routing, data mocking, and utilizing Office UI Fabric components. Additionally, it suggests caution when using this approach in production, recommending experimentation and learning due to potential maintenance challenges with SPFx updates.

North American Collaboration Summit 2018 - SharePoint Framework, Angular and ...Sébastien Levert

The document discusses the integration of SharePoint Framework, Angular, and Azure Functions for modern SharePoint development. It highlights the advantages of using Azure Functions for hosting APIs and the compatibility challenges with different versions of Angular. Additionally, it introduces Angular Elements as a means to create web components while noting that this approach is still in early preview and not yet production ready.

More Related Content

What's hot (19)

European SharePoint Conference 2017 - SharePoint Framework, Angular & Azure F...Sébastien Levert

BuildStatus - PiterJS #1PiterJS

An Introduction to ReactNativeMichał Taberski

Agile Apps with App EngineCalvin Cheng

Advanced AngularJS Tips and TricksJeremy Likness

Introduction to Angular 2Tuan Trung Vo

Glance at Visual Studio 2013 ASP.NET and Web tools 2013Shravan Kumar Kasagoni

C# Async/Await ExplainedJeremy Likness

Angular ❤️CMSFilip Bruun Bech-Larsen

Angular: An IntroductionAlex Hoffman

SharePoint Framework, Angular and Azure FunctionsSébastien Levert

Angular Day 2018 (italy) - Keynote - The Amazing World of Angular 6Fabio Biondi

TypeScriptSoftware Infrastructure

1.3にBrowserify組み合わせてイベント駆動にした話Okuno Kentaro

SPSNJ 2014: EmberJS & SharePointGreg Hurlman

Ember and SharePointGreg Hurlman

A Gentle Introduction to GoOnRailsBin Joy

TypeScript and Angular2 (Love at first sight)Igor Talevski

NativescriptSoftware Infrastructure

European SharePoint Conference 2017 - SharePoint Framework, Angular & Azure F...Sébastien Levert

BuildStatus - PiterJS #1PiterJS

An Introduction to ReactNativeMichał Taberski

Agile Apps with App EngineCalvin Cheng

Advanced AngularJS Tips and TricksJeremy Likness

Introduction to Angular 2Tuan Trung Vo

Glance at Visual Studio 2013 ASP.NET and Web tools 2013Shravan Kumar Kasagoni

C# Async/Await ExplainedJeremy Likness

Angular ❤️CMSFilip Bruun Bech-Larsen

Angular: An IntroductionAlex Hoffman

SharePoint Framework, Angular and Azure FunctionsSébastien Levert

Angular Day 2018 (italy) - Keynote - The Amazing World of Angular 6Fabio Biondi

TypeScriptSoftware Infrastructure

1.3にBrowserify組み合わせてイベント駆動にした話Okuno Kentaro

SPSNJ 2014: EmberJS & SharePointGreg Hurlman

Ember and SharePointGreg Hurlman

A Gentle Introduction to GoOnRailsBin Joy

TypeScript and Angular2 (Love at first sight)Igor Talevski

NativescriptSoftware Infrastructure

Similar to SharePoint Fest DC - SharePoint Framework, Angular and Azure Functions (20)

SharePoint Fest Seattle - SharePoint Framework, Angular & Azure FunctionsSébastien Levert

SharePoint Saturday Lisbon 2017 - SharePoint Framework, Angular & Azure Funct...Sébastien Levert

North American Collaboration Summit 2018 - SharePoint Framework, Angular and ...Sébastien Levert

SharePoint Saturday New York 2017 - SharePoint Framework, Angular and Azure F...Sébastien Levert

This document summarizes a presentation on building modern SharePoint solutions using SharePoint Framework (SPFx), Angular, and Azure Functions. It discusses how SPFx can be used with Angular to build web parts with routing and dynamic bootstrapping. It also shows how Azure Functions can be leveraged as a backend API to provision SharePoint sites using PnP PowerShell and Microsoft Graph. Key lessons learned are around using Angular components within SPFx and reusing Office UI Fabric React components. Samples and resources are provided to help developers get started with this approach.

React or Angular and SharePoint Framework DevelopmentDarin Dickey

The document discusses the development of client-side web parts using SharePoint Framework (SPFx), comparing Angular and React as frameworks for building these components. It highlights the benefits and use cases for each framework, including demos and recommendations based on project complexity and requirements. Additionally, it mentions the importance of TypeScript and supporting libraries in SPFx development.

Angular vs React: Building modern SharePoint interfaces with SPFxDimcho Tsanov

This document compares AngularJS and React for building modern interfaces in SharePoint. It provides an overview of each including concepts, pros/cons and considerations for choosing between them. AngularJS is a full framework using MVC pattern while React is a library using one-way data flow. AngularJS may be better for full page experiences while React is better for component-based apps. Support and a project's needs are key factors in determining which to use.

SPS Paris: Building great client-side web parts with spfx, pnp-js-core, React...Bill Ayers

This document summarizes a presentation about building client-side web parts for SharePoint using the SharePoint Framework (SPFx), ReactJS, Office UI Fabric, and the PnP-JS-Core library. The presentation covers the SharePoint Framework model, using ReactJS for views, Office UI Fabric for styling, the PnP-JS-Core library for interacting with SharePoint, and building a sample SPFx web part. It concludes that the modern SharePoint development tools provide choice and allow building reusable components with ReactJS while leveraging Office UI Fabric for beautiful designs and PnP-JS-Core for easy SharePoint REST calls.

D1 - Building Great Client-side Web Parts with SPFx, PnP-JS-Core, ReactJS and...SPS Paris

[Patel] SPFx: An ISV Insight into latest Microsoft's customization modelEuropean Collaboration Summit

The document provides an overview of the SharePoint Framework (SPFx) from the perspective of an ISV. It begins by focusing on key aspects of SPFx like publishing versions, pushing updates through a CDN, using shared code and external libraries, and using custom PropertyPane properties. It then provides a history of SharePoint development models and extensibility opportunities. The document explains what SPFx is, its advantages and disadvantages, and choices for the UI framework. It discusses building a solution, publishing, dependencies, consuming data, the advanced PropertyPane, updating SPFx, and provides some helpful tips.

SPUnite17 Building Great Client Side Web Parts with SPFxNCCOMMS

This document provides an overview and agenda for a presentation on building great client-side web parts for SharePoint with the SharePoint Framework (SPFx), PnP-JS-Core, ReactJS, and Office UI Fabric. The presentation covers why to use SPFx instead of traditional JavaScript injection, introduces key concepts and technologies like ReactJS and Office UI Fabric, demonstrates how to call the SharePoint REST API with PnP-JS-Core, and discusses building web parts by bringing these technologies together. It also outlines the SPFx roadmap and conclusions that modern tools are now available for building reusable SharePoint components.

SharePoint Saturday Zurich 2017 - SharePoint Framework the new development wayGiuliano De Luca

The document outlines key aspects of the SharePoint Framework presented at the SharePoint + CRM Saturday event in Zurich on May 13, 2017. It includes details on development tools, frameworks, and the deployment process, emphasizing the use of TypeScript, Gulp, and Office UI Fabric for creating SharePoint solutions. Additionally, it discusses packaging and deploying solutions for SharePoint Online and on-premises, highlighting the importance of user context and permissions.

SharePoint Framework tips and tricksGiuseppe Marchi

This document contains tips for working with the SharePoint Framework (SPFx). It begins with an introduction of the speaker and is followed by 15 tips for adopting SPFx including managing web part properties, dependencies, development environments, and automating deployment. The tips provide guidance on issues that may be encountered when developing SPFx solutions such as only bootstrapping Angular once, using dummy data, locking dependencies, and using version control for the SPFx Yeoman generator.

SharePoint Framework at a glanceHaaron Gonzalez

The document outlines a monthly meeting for the San Diego SharePoint User Group focused on the SharePoint Framework, covering key tools, technologies, and development practices. It highlights the importance of using modern web tools like Node.js, TypeScript, and Gulp for building SharePoint solutions, as well as the Office UI Fabric for user interface design. The document also provides a step-by-step guide for setting up a local development environment and resources for developers to enhance their SharePoint Framework skills.

Build Your First SharePoint Framework WebpartEric Overfield

#SPFestDC Migrate your custom solutions to the modern stackVincent Biret

The document discusses transitioning custom SharePoint components to the SharePoint Framework (SPFx). It provides an overview of SPFx and demonstrates how to build various types of extensions and components using SPFx, including web parts, provisioning templates, workflows, and accessing data. It also discusses other modern tools that can be used alongside SPFx, such as PowerApps, Microsoft Flow, and Azure Functions. The conclusion encourages developers to leverage the new tools available to build modern solutions for SharePoint that will have improved performance, security, and developer experience compared to previous methods.

Chris O'Brien - Introduction to the SharePoint Framework for developersChris O'Brien

The document discusses the shift towards client-side development in SharePoint, emphasizing the use of modern pages and client web parts with technologies like Typescript and popular JavaScript frameworks. It provides a guide on the new development model, deployment processes, and how to package and add apps to SharePoint pages. The content highlights the benefits of client-side development while also noting that classic web parts remain incompatible with modern pages.

Convert your Full Trust Solutions to the SharePoint Framework (SPFx)Brian Culver

The document is a presentation from SharePoint Saturday Denver, detailing an introduction to the SharePoint Framework (SPFx) and its applications. It includes information about the speaker Brian Culver and covers the session agenda, key features of SPFx, its development environment, and available resources for developers. The presentation also touches on SPFx deployment, debugging code, and useful tutorials for further learning.

ECS19 - Vesa Juvonen - SharePoint and Office 365 Development PowerClassEuropean Collaboration Summit

Making share point rock with angular and reactJoseph Jorden

This document discusses how to make SharePoint more powerful using Angular and React. It provides overviews of Angular, React, and ngReact for linking the two frameworks. The document demonstrates creating client lists in SharePoint using Angular, React, and a combination with ngReact. It also discusses using a custom master page to control look and feel when incorporating these frameworks into SharePoint.

Convert your Full Trust Solutions to the SharePoint Framework (SPFx) in 1 hourBrian Culver

The document outlines a session led by Brian Culver on converting full trust solutions to the SharePoint Framework (SPFx) within an hour. It covers various aspects of SPFx, including its client-side functionality, compatibility with modern development tools, and development environment setup. Key features and resources for working with SPFx are also provided, aimed at enhancing developers' understanding and application of this framework.