UI5 Web Components

Los UI5 Web Components son elementos HTML personalizados. Un desarrollador instala un paquete npm, importa los componentes que necesita la aplicación y los utiliza como etiquetas, por ejemplo un botón o una shell bar, como cualquier otro elemento HTML.

El mecanismo tiene cuatro partes:

1. Custom Elements registra cada componente como una etiqueta propia, para que el navegador sepa cómo mostrarlo y actualizarlo.
2. Shadow DOM encapsula el marcado y los estilos de cada componente, de modo que el CSS de la página y el del componente no interfieren entre sí.
3. Los temas proceden de los parámetros de theming de SAP como variables CSS; así es como los componentes siguen SAP Horizon o Quartz y pueden adoptar un tema personalizado del UI theme designer.
4. El empaquetado corresponde a la aplicación: no existe una red de distribución de contenidos oficial, por lo que solo los componentes importados acaban en la compilación de la aplicación.

Los componentes se distribuyen en varios paquetes: controles básicos como campos de entrada, listas, tablas y diálogos; controles específicos de SAP Fiori como la shell bar, el asistente y la navegación lateral; controles relacionados con la IA; y el conjunto de iconos. Por tanto, los UI5 Web Components son una biblioteca de controles que cualquier stack web puede consumir, no un runtime que controla la aplicación.

El criterio de decisión es qué framework controla la aplicación.

Utilice UI5 Web Components cuando:

• la aplicación ya está construida con React, Angular, Vue u otro framework web y debe tener el aspecto de SAP Fiori;
• un sitio estático o un portal necesita unos pocos elementos interactivos con estilo SAP Fiori sin un framework completo;
• la aplicación es un micro-frontend que debe permanecer aislado de la página en la que se ejecuta.

Utilice SAPUI5 cuando:

• la aplicación es una aplicación SAP Fiori en SAP S/4HANA o en el SAP Fiori Launchpad;
• la aplicación necesita modelos OData, enrutamiento, los floorplans de SAP Fiori elements o la adaptación por key user;
• el equipo trabaja dentro de las herramientas y el ciclo de vida estándar de SAP para aplicaciones SAP Fiori.

Para Alder Manufacturing, un portal de proveedores basado en React para Cedar Office Supply y Bright Freight es un caso típico de UI5 Web Components; una aplicación de aprobación de solicitudes de pedido en el launchpad no lo es. Los UI5 Web Components encajan cuando el framework web viene dado y SAP Fiori es el estándar visual.

• React: UI5 Web Components for React envuelve los componentes para que se comporten como componentes React, con propiedades y eventos tipados. El wrapper añade componentes de layout y componentes de gráficos propios.
• Angular: UI5 Web Components for Angular proporciona wrappers que admiten los formularios de Angular y el binding bidireccional sin soluciones provisionales en el esquema.
• Vue y JavaScript puro: los componentes se utilizan directamente como custom elements.
• SAPUI5: una aplicación SAPUI5 puede requerir un UI5 Web Component como si fuera un control normal. SAPUI5 asigna las propiedades, los slots, los eventos y los métodos a sus propias propiedades, agregaciones, eventos y métodos. La configuración utiliza la extensión ui5-tooling-modules de la UI5 CLI para empaquetar los paquetes npm.

Las antiguas bibliotecas wrapper de SAPUI5 para web components (sap.ui.webc.main, sap.ui.webc.fiori, sap.ui.webc.common) quedaron obsoletas en SAPUI5 1.120 y se eliminaron en 1.147, por lo que los desarrollos nuevos utilizan la integración directa. Los UI5 Web Components se conectan a cada framework mediante wrappers ligeros, no mediante un framework propio.

• Sin framework de aplicaciones. No hay modelos, ni binding OData, ni enrutamiento, ni ciclo de vida de componentes. Los aporta el framework anfitrión o el equipo.
• Sin floorplans. Los list reports, los object pages y otros floorplans de SAP Fiori elements no existen como páginas listas para usar; el equipo los compone a partir de componentes.
• Sin integración con el launchpad de serie. Ejecutar una aplicación de este tipo dentro del SAP Fiori Launchpad o de SAP Build Work Zone requiere un enfoque de integración propio; el launchpad basado en ABAP, por ejemplo, puede integrarla mediante el tipo de aplicación URL.
• No todos los controles SAPUI5 tienen equivalente. El conjunto de componentes es amplio, pero más reducido que la lista completa de bibliotecas de SAPUI5.
• Las actualizaciones corren a cargo del equipo. Como los componentes se empaquetan dentro de la aplicación, las nuevas versiones solo llegan cuando la aplicación se recompila y se vuelve a desplegar.

Nada de esto es un defecto: los UI5 Web Components dejan deliberadamente las decisiones de arquitectura al framework anfitrión.

1. Buscar una red de distribución de contenidos. El proyecto espera que las aplicaciones empaqueten solo los componentes que importan. Solución: añada los paquetes al pipeline de compilación.
2. Mezclar versiones mayores. La versión 2 cambió API respecto a la versión 1. Solución: actualice todos los paquetes @ui5/webcomponents* a la vez y siga las notas de migración.
3. Confundir los controles SAP Fiori con el cumplimiento de SAP Fiori. Los controles siguen el diseño SAP Fiori; el layout de página, la navegación y la redacción tienen que seguir igualmente las SAP Fiori Design Guidelines.
4. Mantener las antiguas bibliotecas wrapper de SAPUI5. Las aplicaciones que todavía utilizan sap.ui.webc.* dejan de funcionar en las releases de SAPUI5 en las que esas bibliotecas se han eliminado. Solución: migre a la integración directa de web components.
5. Olvidar los recursos del tema. Los temas personalizados y la fuente SAP 72 proceden del contenido de theming de SAP; compruebe que la compilación los sirve.

La mayoría de los problemas con los UI5 Web Components provienen de la gestión de la compilación y de las versiones, no de los propios componentes.