Übersicht über das SharePoint-FrameworkOverview of the SharePoint Framework

Das SharePoint Framework (SPFx) ist ein Seiten- und Webpart-Modell, das vollständige Unterstützung für die clientseitige SharePoint-Entwicklung, einfache Integration in SharePoint-Daten und Erweiterung von Microsoft Teams bietet. Mit dem SharePoint Framework können Sie moderne Webtechnologien und -tools in Ihrer bevorzugten Entwicklungsumgebung verwenden, um produktive Erfahrungen zu ermöglichen und Apps zu erstellen, die schnell reagieren und für Mobilgeräte geeignet sind.The SharePoint Framework (SPFx) is a page and web part model that provides full support for client-side SharePoint development, easy integration with SharePoint data, and extending Microsoft Teams. With the SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps that are responsive and mobile-ready.

Die neueste Version sowie alle vorherigen Versionen von SharePoint Framework werden in SharePoint Online gehostet und sind dort verfügbar.The latest version, and all previous versions, of the SharePoint Framework are hosted and available in SharePoint Online. Sie ist auch für SharePoint Server 2016 (mit Feature Pack 2) und SharePoint Server 2019 verfügbar.It's also available for SharePoint Server 2016 (with Feature Pack 2) and SharePoint Server 2019.

Zu den wichtigsten Features von SharePoint Framework zählen:Key features of the SharePoint Framework include:

  • Wird im Kontext des aktuellen Benutzers und der aktuellen Verbindung im Browser ausgeführt. Es gibt keine iFrames für die Anpassung (JavaScript wird direkt in die Seite eingebettet).It runs in the context of the current user and connection in the browser. There are no iFrames for the customization (JavaScript is embedded directly to the page).
  • Die Steuerelemente werden im normalen Seiten-DOM gerendert.The controls are rendered in the normal page DOM.
  • Die Steuerelemente reagieren von sich aus, und der Zugriff ist sofort möglich.The controls are responsive and accessible by nature.
  • Ermöglicht dem Entwickler den Zugriff auf den Lebenszyklus – einschließlich, zusätzlich zu Rendern, Laden, Serialisieren und Deserialisieren, Konfigurationsändernungen und vieles mehr.It enables the developer to access the lifecycle in addition to render, load, serialize and deserialize, configuration changes, and more.
  • Es ist vom Framework unabhängig.It's framework-agnostic. Sie können ein beliebiges JavaScript-Framework verwenden, einschließlich, aber nicht beschränkt auf React, Handlebars, Knockout, Angular und Vue.js.You can use any JavaScript framework that you like including, but not limited to, React, Handlebars, Knockout, Angular, and Vue.js.
  • Die Entwickler-Toolchain basiert auf bekannten Open-Source-Cliententwicklungstools wie NPM, TypeScript, Yeoman, Webpack und Gulp.The developer toolchain is based on popular open-source client development tools such as NPM, TypeScript, Yeoman, webpack, and gulp.
  • Die Leistung ist zuverlässig.Performance is reliable.
  • Endbenutzer können clientseitige SPFx-Lösungen verwenden, die von den Mandantenadministratoren (oder deren Stellvertretern) auf allen Websites genehmigt sind, einschließlich Self-Service-Team-, Gruppen- oder persönliche Websites.End users can use SPFx client-side solutions that are approved by the tenant administrators (or their delegates) on all sites, including self-service team, group, or personal sites.
  • SPFx-Webparts können sowohl zu klassischen als auch zu modernen Seiten hinzugefügt werden.SPFx web parts can be added to both classic and modern pages.
  • Mit SPFx-Lösungen kann Microsoft Teams erweitert werden.SPFx solutions can be used to extend Microsoft Teams.

Im Skript-Editor-Webpart wird das Laufzeitmodell verbessert. Es enthält einer stabile Client-API, ein HttpClient-Objekt, das die Authentifizierung bei SharePoint und Office 365 verarbeitet, Kontextinformationen, einfache Eigenschaftsdefinition und -konfiguration und mehr.The runtime model improves on the Script Editor web part. It includes a robust client API, an HttpClient object that handles authentication to SharePoint and Office 365, contextual information, easy property definition and configuration, and more.

Wenn Sie in erster Linie mit C# arbeiten, möchten Sie sicherlich mehr zur clientseitigen JavaScript-Entwicklung erfahren.If you work primarily with C#, you want to learn more about client-side JavaScript development. Der Großteil Ihrer JavaScript-Kenntnisse im Zusammenhang mit SharePoint ist jedoch übertragbar, da sich die Datenmodelle nicht geändert haben und Sie dieselben REST-Dienste, je nach Ihren Anforderungen, verwenden.Most of your existing JavaScript knowledge related to SharePoint, however, is transferable, as the data models haven't changed, and you’ll use the same REST services depending on your requirements. Wenn Sie ein C#-Entwickler sind, bietet TypeScript einen guten Übergang in die JavaScript-Welt.If you're a C# developer, TypeScript is a nice transition into the JavaScript world. Die Wahl der IDE bleibt Ihnen überlassen.The choice of IDE is up to you. Viele Entwickler verwenden die plattformübergreifende IDE Visual Studio Code.Many developers like to use the cross-platform IDE Visual Studio Code.

Warum SharePoint Framework?Why the SharePoint Framework?

SharePoint wurde im Jahr 2001 als lokales Produkt gestartet.SharePoint was launched as an on-premises product in 2001. Im Laufe der Zeit hat eine große Entwicklercommunity es auf viele verschiedene Arten erweitert und gestaltet.Over time, a large developer community has extended and shaped it in many ways. Die Entwicklercommunity ist denselben Mustern und Methoden gefolgt, die das SharePoint-Produktentwicklungsteam verwendet hat, einschließlich Webparts, SharePoint-Feature-XML und mehr.The developer community followed the same patterns and practices that the SharePoint product development team used, including web parts, SharePoint feature XML, and more. Viele Funktionen wurden in C# entwickelt, zu DLLs kompiliert und auf lokalen Serverfarmen bereitgestellt.Many features were written in C#, compiled to DLLs, and deployed to on-premises server farms.

Diese Architektur funktionierte gut in Umgebungen mit nur einem Unternehmen, konnte aber nicht für die Cloud skaliert werden, in der mehrere Mandanten nebeneinander auf den gleichen Servern ausgeführt werden.That architecture worked well in environments with only one enterprise, but it didn’t scale to the cloud, where multiple tenants run side by side on the same servers. Dementsprechend haben wir zwei alternative Modelle eingeführt: clientseitige JavaScript-Einfügung und SharePoint-Add-Ins. Beide Lösungen haben Vor- und Nachteile.As a result, we introduced two alternative models: client-side JavaScript injection, and SharePoint Add-ins. Both of these solutions have pros and cons.

JavaScript-EinfügungJavaScript injection

Einer der beliebtesten Webparts in SharePoint Online ist der Skript-Editor.One of the most popular web parts in SharePoint Online is the Script Editor. Sie können JavaScript in das Skript-Editor-Webpart einfügen, und dieses JavaScript dann beim Rendern der Seite ausführen.You can add JavaScript to the Script Editor web part and have that JavaScript execute when the page renders. Das ist eine simple, aber effektive Methode.It’s simple but effective. Die Ausführung erfolgt im gleichen Browserkontext wie die Seite und befindet sich in der gleichen DOM, damit eine Interaktion mit anderen Steuerelementen auf der Seite möglich ist.It runs in the same browser context as the page, and is in the same DOM, so it can interact with other controls on the page. Diese Methode ist recht leistungsfähig und einfach zu verwenden.It's also relatively performant, and simple to use.

Bei diesem Ansatz gibt es jedoch auch einige Nachteile.There are a few downsides to this approach. Während Sie Ihre Lösung packen können, damit Endbenutzer das Steuerelement auf der Seite ablegen können, können Sie Konfigurationsoptionen nur schwer bereitstellen.First, while you can package your solution so that end users can drop the control onto the page, you can't easily provide configuration options. Außerdem kann der Endbenutzer die Seite bearbeiten und das Skript ändern, sodass das Webpart beschädigt werden kann.Also, the end user can edit the page and modify the script, which can break the web part. Ein weiteres großes Problem besteht darin, dass das Skript-Editor-Webpart nicht als "Sicher für Scripting" gekennzeichnet ist.Another significant problem is that the Script Editor web part isn't marked as "Safe For Scripting". Die meisten Self-Service-Websitesammlungen (eigene Websites, Teamwebsites, Gruppenwebsites) haben ein Feature namens "NoScript" aktiviert.Most self-service site collections (my-sites, team sites, group sites) have a feature known as "NoScript" enabled. Technisch gesehen ist dies das Entfernen der Berechtigung „Add/Customize Pages“ (Hinzufügen/Anpassen von Seiten, ACP) in SharePoint.Technically, it is the removal of the Add/Customize Pages (ACP) permission in SharePoint. Dies bedeutet, dass das Skript-Editor-Webpart auf diesen Websites blockiert wird.This means that the Script Editor web part will be blocked from executing on these sites.

SharePoint-Add-In-ModellSharePoint Add-in model

Die aktuelle Option für Lösungen, die auf NoScript-Websites ausgeführt werden, ist das Add-In-/App-Part-Modell, das mit SharePoint Server 2013 eingeführt wurde.The current option for solutions that run in NoScript sites is the add-in/app-part model introduced in SharePoint Server 2013. Diese Implementierung erstellt einen iFrame, wo sich das eigentliche Objekt befindet und ausgeführt wird.This implementation creates an iFrame where the actual experience resides and executes. Der Vorteil besteht darin, dass es für Information Worker einfacher ist, zu vertrauen und bereitzustellen, da der iFrame für das System extern ist und keinen Zugriff auf den aktuellen DOM/die aktuelle Verbindung hat.The advantage is that because it's external to the system and has no access to the current DOM/connection, it's easier for information workers to trust and deploy. Endbenutzer können Add-Ins auf NoScript-Websites installieren.End users can install add-ins on NoScript sites.

Auch bei diesem Ansatz gibt es einige Nachteile.There are some downsides to this approach as well. Zunächst werden die Add-Ins in einem iFrame ausgeführt.First, they run in an iFrame. iFrames sind langsamer als das Skript-Editor-Webpart, da es eine neue Anforderung für eine andere Seite erfordert.iFrames are slower than the Script Editor web part, because it requires a new request to another page. Die Seite muss die komplette Authentifizierung und Autorisierung durchlaufen, über eigene Aufrufe SharePoint-Daten abrufen, verschiedene JavaScript-Bibliotheken laden und vieles mehr.The page has to go through the complete authentication and authorization, make its own calls to get SharePoint data, load various JavaScript libraries, and more. Ein Skript-Editor-Webpart braucht in der Regel z. B. 100 Millisekunden zum Laden und Rendern, während ein App-Part u. U. 2 Sekunden oder länger benötigt.A Script Editor web part might typically take, for example, 100 milliseconds to load and render, while an app part might take 2 seconds or more. Darüber hinaus wird es durch die iFrame-Grenze schwieriger, reaktive Designs zu erstellen und CSS- sowie Designinformationen zu vererben. Additionally, the iFrame boundary makes it more difficult to create responsive designs and inherit CSS and theming information. iFrames besitzen eine erhöhte Sicherheit, was für Sie (der Zugriff auf Ihre Seite ist durch andere Steuerelemente auf der Seite nicht möglich) und den Endbenutzer (das Steuerelement hat keinen Zugriff auf die Verbindung mit Office 365) hilfreich sein kann.iFrames do have stronger security, which can be useful for you (your page is inaccessible by other controls on the page) and for the end user (the control has no access to their connection to Office 365).

SharePoint FrameworkSharePoint Framework

In der Vergangenheit haben wir Webparts als voll vertrauenswürdige C#-Assemblys erstellt, die auf die Cloud-Servern installiert wurden. Aktuelle Entwicklungsmodelle umfassen jedoch in den meisten Fällen JavaScript, das in einem Browser ausgeführt wird und REST-API-Aufrufe an die SharePoint- und Office 365-Back-End-Arbeitslasten vornimmt. C#-Assemblys funktionieren in dieser Umgebung nicht. Wir brauchten ein neues Entwicklungsmodell. Das SharePoint Framework ist die nächste Stufe der SharePoint-Entwicklung.Historically, we created web parts as full trust C# assemblies that were installed on the cloud servers. However, current development models for the most part involve JavaScript running in a browser making REST API calls to the SharePoint and Office 365 back-end workloads. C# assemblies don’t work in this world. We needed a new development model. The SharePoint Framework is the next evolution in SharePoint development.

SharePoint Framework-LizenzSharePoint Framework License

Die SharePoint Framework-Komponenten werden unter dieser Microsoft EULA lizenziert.The SharePoint Framework components are licensed under this Microsoft EULA.

Fragen?Questions?

Wenn Sie noch Fragen haben, stellen Sie diese auf SharePoint StackExchange. Kennzeichnen Sie Ihre Fragen und Kommentare mit #spfx, #spfx-webparts und #spfx-tooling.If you have any questions, post them on SharePoint StackExchange. Tag your questions and comments with #spfx, #spfx-webparts, and #spfx-tooling.

Sie können auch Probleme, Fragen oder Feedback zu den Dokumenten oder dem SharePoint Framework in unserem GitHub-Repository veröffentlichen.You can also post issues, questions, or feedback about the docs or the SharePoint Framework in our GitHub repo.

Siehe auchSee also