Visão geral da Estrutura do SharePointOverview of the SharePoint Framework

A Estrutura do SharePoint (SPFx) é um modelo de Web Part e página que dá suporte completo para o desenvolvimento do SharePoint do lado do cliente, facilitando a integração com dados do SharePoint e dando suporte para ferramentas do software livre. Com a Estrutura do SharePoint, você pode usar ferramentas e tecnologias da Web modernas em seu ambiente de desenvolvimento preferido para criar aplicativos e experiências produtivas que são ágeis e estão prontos para a mobilidade desde o início. A Estrutura do SharePoint funciona para o SharePoint Online e também para o local (SharePoint 2016 Feature Pack 2 e SharePoint 2019).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 support for open source tooling. 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 from day one. The SharePoint Framework works for SharePoint Online and soon also for on-premises (SharePoint 2016 Feature Pack 2).

Os principais recursos da Estrutura do SharePoint incluem o seguinte:Key features of the SharePoint Framework include the following:

  • Ela é executada no contexto de usuário atual e na conexão no navegador.It runs in the context of the current user and connection in the browser. Não há nenhuma iFrame para a personalização (o JavaScript é incorporado diretamente na página).There are no iFrames for the customization (JavaScript is embedded directly to the page).
  • Os controles são renderizados no DOM de página normal.The controls are rendered in the normal page DOM.
  • Os controles são dinâmicos e acessíveis por natureza.The controls are responsive and accessible by nature.
  • Ela permite que o desenvolvedor acesse o ciclo de vida, incluindo, além de renderizar, carregar, serializar e desserializar, alterações de configuração e muito mais.It enables the developer to access the lifecycle in addition to render, load, serialize and deserialize, configuration changes, and more.
  • É independente de estrutura.It is framework-agnostic. Você pode usar qualquer estrutura JavaScript de sua preferência: React, Handlebars, Knockout, Angular, entre outras.You can use any JavaScript framework that you like: React, Handlebars, Knockout, Angular, and more.
  • A cadeia de ferramentas baseia-se em ferramentas de desenvolvimento de cliente de software livre comuns, como npm TypeScript, Yeoman, webpack e gulp.The toolchain is based on common open source client development tools such as npm, TypeScript, Yeoman, webpack, and gulp.
  • O desempenho é confiável.Performance is reliable.
  • Os usuários finais podem usar soluções SPFx de cliente que sejam aprovadas por administradores do locatário (ou seus representantes) em todos os sites, incluindo a equipe de autoatendimento, grupo ou sites pessoais.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.
  • As Web Parts do SPFx podem ser adicionados às páginas clássicas e modernas.SPFx web parts can be added to both classic and modern pages.

O modelo de tempo de execução aprimora a Web Part do Editor de Script. Ele inclui uma API do cliente robusta, um objeto HttpClient que gerencia a autenticação para o SharePoint e o Office 365, informações contextuais, configuração e definição de propriedade fáceis e muito mais.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.

Caso trabalhe principalmente com C#, é recomendável saber mais sobre o desenvolvimento em JavaScript no lado do cliente.If you work primarily with C#, you want to learn more about client-side JavaScript development. A maior parte do conhecimento existente do JavaScript relacionado ao SharePoint, no entanto, é totalmente transferível, já que os modelos de dados não foram alterados e você usará os mesmos serviços REST ou Modelo de Objeto do JavaScript (JSOM) , dependendo de suas necessidades.Most of your existing JavaScript knowledge related to SharePoint, however, is completely transferable, as the data models have not changed, and you’ll use the same REST services or JavaScript Object Model (JSOM), depending on your requirements. E, se você for desenvolvedor de C#, o TypeScript é uma boa transição para o mundo do JavaScript.If you are a C# developer, TypeScript is a nice transition into the JavaScript world. Você pode escolher a opção de IDE que preferir.The choice of IDE is up to you. Muitos desenvolvedores gostam de usar o Visual Studio Code do IDE multiplataforma.Many developers like to use the cross-platform IDE Visual Studio Code. Muitos desenvolvedores também usam produtos como Sublime e ATOM.Many developers also use products like Sublime and ATOM. Use o que funcionar melhor para você.Use what works best for you.

Por que a Estrutura do SharePoint?Why the SharePoint Framework?

O SharePoint foi lançado como um produto local em 2001. Ao longo do tempo, uma grande comunidade de desenvolvedores o ampliou e moldou de várias maneiras. Em geral, a comunidade de desenvolvedores seguiu os mesmos padrões e práticas recomendadas que a equipe de desenvolvimento de produto do SharePoint usou, incluindo Web Parts, o XML de recurso do SharePoint e muito mais. Muitos recursos foram escritos em C#, compilados para DLLs e implantados em farms locais.SharePoint was launched as an on-premises product in 2001. Over time, a large developer community has extended and shaped it in many ways. For the most part, the developer community followed the same patterns and practices that the SharePoint product development team used, including web parts, SharePoint feature XML, and more. Many features were written in C#, compiled to DLLs, and deployed to on-premises farms.

Essa arquitetura funcionava bem em ambientes com apenas uma empresa, mas não era dimensionada para a nuvem, em que vários locatários são executados lado a lado. Como resultado, introduzimos dois modelos alternativos: injeção de código JavaScript do lado do cliente e Suplementos do SharePoint. Essas duas soluções têm vantagens e desvantagens.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. As a result, we introduced two alternative models: client-side JavaScript injection, and SharePoint Add-ins. Both of these solutions have pros and cons.

Injeção de JavaScriptJavaScript injection

Uma das Web Parts mais populares no SharePoint Online é o Editor de Scripts. Você pode para colar JavaScript na Web Part do Editor de Script e fazer com que o JavaScript seja executado quando a página for processada. É simples e rudimentar, mas eficaz. Ele é executado no mesmo contexto de navegador que a página e está no mesmo DOM. Portanto, pode interagir com outros controles na página. Também tem desempenho relativamente bom e é simples de usar.One of the most popular web parts in SharePoint Online is the Script Editor. You can paste JavaScript into the Script Editor web part and have that JavaScript execute when the page renders. It’s simple and rudimentary, but effective. 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. It is also relatively performant, and simple to use.

No entanto, há algumas desvantagens nessa abordagem.There are a few downsides to this approach, however. Primeiro, embora possa empacotar a solução para que os usuários finais possam soltar o controle na página, você não pode fornecer facilmente opções de configuração.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. Além disso, o usuário final pode editar a página e modificar o script, o que pode danificar a Web Part.Also, the end user can edit the page and modify the script, which can break the web part. Outro grande problema é que a Web Part do Editor de Script não está marcada como "Segura para Scripts".Another big problem is that the Script Editor web part is not marked as "Safe For Scripting". A maioria dos conjuntos de sites de autoatendimento (my-sites, sites de equipe, sites de grupo) tem um recurso conhecido como "NoScript" habilitado.Most self-service site collections (my-sites, team sites, group sites) have a feature known as "NoScript" enabled. Tecnicamente, é a remoção da permissão ACP (Adicionar/Personalizar Páginas) no SharePoint.Technically, it is the removal of the Add/Customize Pages (ACP) permission in SharePoint. Isso significa que a Web Part do Editor de Scripts será impedida de ser executada nesses sites.This means that the Script Editor web part will be blocked from executing on these sites.

Modelo de Suplemento do SharePointSharePoint Add-in model

A opção atual para as soluções que podem ser executadas em sites NoScript é o modelo de add-in/add-part do aplicativo. Essa implementação cria um iFrame em que a experiência real reside e é executada. A vantagem é que, como ele é externo ao sistema e não tem acesso ao DOM/conexão atual, é mais fácil para profissionais da informação confiar nele e implantá-lo. Os usuários finais podem instalar suplementos em sites NoScript.The current option for solutions that run in NoScript sites is the add-in/app-part model. This implementation creates an iFrame where the actual experience resides and executes. 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. End users can install add-ins on NoScript sites.

Também há algumas desvantagens dessa abordagem.There are some downsides to this approach as well. Primeiro, elas são executadas em um iFrame.First, they run in an iFrame. iFrames são mais lentos do que a Web Part do editor de script, pois exigem uma nova solicitação para outra página.iFrames are slower than the Script Editor web part, because it requires a new request to another page. A página precisa passar por autenticação e autorização, verificar suas próprias chamadas para obter dados do SharePoint, carregar várias bibliotecas JavaScript e muito mais.The page has to go through authentication and authorization, make its own calls to get SharePoint data, load various JavaScript libraries, and more. Uma Web Part do Editor de Scripts normalmente pode demorar, por exemplo, 100 milissegundos para ser carregada e renderizada, enquanto uma parte do aplicativo pode demorar dois segundos ou mais.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. Além disso, o limite iFrame dificulta a criação de designs responsivos e herda as informações de CSS e de temas.Additionally, the iFrame boundary makes it more difficult to create responsive designs and inherit CSS and theming information. Os iFrames têm maior segurança, o que pode ser útil para você (a página é inacessível por outros controles nela) e para o usuário final (o controle não tem acesso à conexão com o Office 365).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

Historicamente, criamos Web Parts como assemblies C# total confiáveis que eram instaladas nos servidores de nuvem. No entanto, os modelos de desenvolvimento atuais geralmente envolvem JavaScript em execução em um navegador, fazendo chamadas à API REST para as cargas de trabalho de back-end do SharePoint e do Office 365. Assemblies C# não funcionam nesse mundo. Precisávamos de um novo modelo de desenvolvimento. A Estrutura do SharePoint é a próxima evolução no desenvolvimento do SharePoint.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.

E agora?What's next?

Web Parts e extensões da Estrutura do SharePoint agora alcançaram Disponibilidade Geral (GA).SharePoint Framework web parts and extensions have now reached General Availability (GA). Continuaremos fornecendo atualizações e refinamentos ao longo do tempo, com base em seus comentários e experiências.We continue to provide updates and refinements over time based on your feedback and experiences. Para qualquer recurso adicional da Estrutura do SharePoint que tenha sido lançado primeiro no modo de visualização, você pode enfrentar alterações significativas ocasionais em relação a nomes de API, fluxos etc.For any additional SharePoint Framework capabilities that are first launched in preview mode, you might experience occasional breaking changes around API names, flows, and more. Atualizações futuras da Estrutura do SharePoint serão compatíveis com versões anteriores, para que suas soluções continuem a funcionar.Future updates to the SharePoint Framework will be backward-compatible so that your solutions continue to work.

Licença da Estrutura do SharePointSharePoint Framework License

Os componentes da Estrutura do SharePoint estão licenciados sob este EULA da Microsoft.The SharePoint Framework components are licensed under this Microsoft EULA.

Dúvidas?Questions?

Se tiver alguma dúvida, poste-a em SharePoint StackExchange. Marque suas perguntas e comentários com #spfx, #spfx-webparts e #spfx-tooling.If you have any questions, post them on SharePoint StackExchange. Tag your questions and comments with #spfx, #spfx-webparts, and #spfx-tooling.

Você também pode postar problemas, perguntas ou comentários sobre os documentos ou a Estrutura do SharePoint em nosso repositório do GitHub.You can also post issues, questions, or feedback about the docs or the SharePoint Framework in our GitHub repo.

Confira tambémSee also