UI5 Web Components

Os UI5 Web Components são elementos HTML customizados. O desenvolvedor instala um pacote npm, importa os componentes de que o app precisa e os usa como tags, por exemplo um botão ou uma shell bar, como qualquer outro elemento HTML.

O mecanismo tem quatro partes:

1. Custom Elements registram cada componente como uma tag própria, para que o navegador saiba como renderizá-lo e atualizá-lo.
2. Shadow DOM encapsula a marcação e os estilos de cada componente, para que o CSS da página e o CSS do componente não interfiram um no outro.
3. Temas vêm dos parâmetros de theming da SAP como variáveis CSS; é assim que os componentes seguem o SAP Horizon ou o Quartz e podem receber um tema customizado do UI theme designer.
4. Empacotamento é responsabilidade do app: não há content delivery network oficial, então apenas os componentes importados entram no build do app.

Os componentes são distribuídos em pacotes: controles básicos, como inputs, listas, tabelas e diálogos; controles específicos do SAP Fiori, como shell bar, wizard e navegação lateral; controles relacionados a IA; e o conjunto de ícones. Os UI5 Web Components são, portanto, uma biblioteca de controles que qualquer stack web pode consumir, não um runtime que controla o app.

O critério de decisão é qual framework controla a aplicação.

Use UI5 Web Components quando:

• o app já é construído com React, Angular, Vue ou outro framework web e deve ter a aparência do SAP Fiori;
• um site estático ou portal precisa de alguns elementos interativos no estilo SAP Fiori sem um framework completo;
• o app é um micro-frontend que precisa permanecer isolado da página em que roda.

Use SAPUI5 quando:

• o app é um app SAP Fiori no SAP S/4HANA ou no SAP Fiori Launchpad;
• o app precisa de modelos OData, roteamento, floorplans do SAP Fiori elements ou adaptação pelo key user;
• a equipe trabalha dentro das ferramentas e do ciclo de vida padrão da SAP para apps SAP Fiori.

Para a Alder Manufacturing, um portal de fornecedores em React para a Cedar Office Supply e a Bright Freight é um caso típico de UI5 Web Components; um app de aprovação de requisições de compra no launchpad não é. Os UI5 Web Components são adequados quando o framework web já está definido e o SAP Fiori é o padrão visual.

• React: o UI5 Web Components for React encapsula os componentes para que se comportem como componentes React, com propriedades e eventos tipados. O wrapper acrescenta componentes de layout e componentes de gráficos próprios.
• Angular: o UI5 Web Components for Angular fornece wrappers que suportam Angular forms e two-way binding sem contornos de schema.
• Vue e JavaScript puro: os componentes são usados diretamente como custom elements.
• SAPUI5: um app SAPUI5 pode carregar um UI5 Web Component como um controle comum. O SAPUI5 mapeia propriedades, slots, eventos e métodos para suas próprias propriedades, agregações, eventos e métodos. A configuração usa a extensão ui5-tooling-modules da UI5 CLI para empacotar os pacotes npm.

As antigas bibliotecas wrapper do SAPUI5 para web components (sap.ui.webc.main, sap.ui.webc.fiori, sap.ui.webc.common) foram marcadas como deprecated no SAPUI5 1.120 e removidas no 1.147, então trabalhos novos usam a integração direta. Os UI5 Web Components se conectam a cada framework por meio de wrappers finos, e não de um framework próprio.

• Sem framework de aplicação. Não há modelos, binding OData, roteamento nem ciclo de vida de componentes. O framework hospedeiro ou a equipe os fornece.
• Sem floorplans. List reports, object pages e outros floorplans do SAP Fiori elements não existem como páginas prontas; a equipe os compõe a partir de componentes.
• Sem integração nativa com o launchpad. Rodar um app desse tipo dentro do SAP Fiori Launchpad ou do SAP Build Work Zone exige uma abordagem de integração própria; o launchpad baseado em ABAP, por exemplo, pode integrá-lo pelo tipo de aplicação URL.
• Nem todo controle SAPUI5 tem equivalente. O conjunto de componentes é amplo, mas menor que a lista completa de bibliotecas do SAPUI5.
• Upgrades são responsabilidade da equipe. Como os componentes são empacotados no app, novas versões só chegam quando o app é reconstruído e reimplantado.

Nada disso é defeito: os UI5 Web Components deixam deliberadamente as decisões de arquitetura para o framework hospedeiro.

1. Procurar uma content delivery network. O projeto espera que os apps empacotem apenas os componentes que importam. Correção: adicione os pacotes ao pipeline de build.
2. Misturar versões major. A versão 2 mudou APIs em relação à versão 1. Correção: atualize todos os pacotes @ui5/webcomponents* juntos e siga as notas de migração.
3. Confundir controles SAP Fiori com conformidade SAP Fiori. Os controles seguem o design SAP Fiori; layout de página, navegação e redação ainda precisam seguir as SAP Fiori Design Guidelines.
4. Manter as antigas bibliotecas wrapper do SAPUI5. Apps que ainda usam sap.ui.webc.* deixam de funcionar nas releases do SAPUI5 em que essas bibliotecas foram removidas. Correção: migre para a integração direta de web components.
5. Esquecer os recursos de tema. Temas customizados e a fonte SAP 72 vêm do conteúdo de theming da SAP; verifique se o build os disponibiliza.

A maioria dos problemas com UI5 Web Components vem do gerenciamento de build e de versões, não dos próprios componentes.