Technical Articles
UI5 Web Components by SG – version español
Recientemente he estado leyendo acerca de UI5 web components. Hubo también una conferencia de UI5 en Belgica y hace unas horas, mientras hablaba con un cliente que alomejor ocupa Desarrollo en Fiori me preguntó si ya he usado UI5 web components. Desafortunadamente, no he usado UI5 web components, sin embargo, he usado los frameworks de Angular y Vue entonces tengo una idea de como functionan. Veramos como me va. Este blog se puede leer en ingles aqui
Que son web components?
La definición de developer.mozilla.org/en-US/docs/Web/Web_Components. Es una suite de diferentes tecnologias que permiten crear controles que se pueden reusar con otros elementos – con funcionalidad encapsulada del resto de tu código – y poder utilizarlos en tus aplicaciones web.
Como yo lo entiendo: Puedo usar controles de otros frameworks en mi desarrollo existente y me permite tener el mismo look and feel de otro “control” en mi aplicación. También, puedo desarrollar codigo modulary separate mi html, js (o ts) y asi mismo crear aplicaciones modernas, rápidas y cool. Ok!
Que otros frameworks utilizan web components?
Hay 3 frameworks principalmente que utilizan utilize web components.
- Angular
- Vue
- React
He trabajado con los primeros 2. En cada uno de esos, hay que aprender cosas apartes que requiren entendimiento diferente al desarollo web tradicional que utiliza MVC, views, HTML5 y JavaScript (o TypeScript en el caso de Angular). Hay un mayor aprendizaje que requiren los desarrolladores que no hay tenido la oportunidad de desarrollar en nodejs, npm y CLIs (si eres uno de ellos, no te detengas; aprende poco a poco (node, npm, angular, y asi).
Debido a que este blog es relacionado a UI5 web components, debo añadir que tenger experiencia en UI5 te ayudará a entender y poder acomplarte fácilmente. Este ejercicio y blog lo hize en 3 horas. Ya tenia angular y npm instalado en mi laptop.
Por qué usar UI5 web components?
Depende de la implementación, hay clientes que quieren el mismo look and feel de Fiori cuando ya tienen otros sistemas de SAP. Una major razon es porqué con web components puedes desarrollar aplicaciones web más lijeras y basadas en tecnologías más recientes. Una mucho mejor razón es porque podemos utilizer otras tecnologias de competencia para entregar lo mejor de lo mejor cuando hablamos de Desarrollo web y asi todos ganan!
Ciertos beneficios al usar web components:
- Aplicaciones web mas lijeras
- Podemos usar Routing basado en el url – facilita la navegacion y también el unit testing
- Usa templates HTML en los components – pequeños blocks de códico que resulta en modularización y escalamiento del desarrollo
- Dependency injection/lazy loading – solo carga lo que necesites/cuando lo necesites
Empezé este blog usando el ejemplo default de Angular que se installa con el ng cli.
Sample demo:
Primero, mostremos un hello world Toastr
Luego, añadamos rutas de navegación para ir de la pag 1 a la pag2.
En la pag 2 quiero mostrar un botón y una tabla de UI5. (utilize un modelo hard coded dentro de mi v2 component para este ejemplo solamente)
Mi sistema:
- Angular: 8.2.14
- Angular CLI: 8.3.25
- Node: 12.16.1
- NPM: 6.13.4
Documentación and creditos:
- Sample demo https://medium.com/@stermi/ui5-web-components-a-step-by-step-demo-application-7931817ddae3
- SAPUI5 web components documentation https://sap.github.io/ui5-webcomponents/playground
- toaster https://www.npmjs.com/package/ngx-toastr
- node https://nodejs.org/en/
- npm https://www.npmjs.com/
- The Git Repo for my demo is found here https://github.com/sguerrero718/ui5webcomponents.git
Otras cosas que saber:
- Como funciona Angular?
- Como se utiliza Routing en angular (diferentemente al de ui5)
- Como incluir otros Components (como el de Toastr)
Algunos inconvenientes durante mi Desarrollo:
solución: decidi no usar la opción de angular animation
se me hizo extremadamente fácil para alguien que ya tenga background en las technologies y poder agregar un skill nuevo, especialmente con tanta información disponible en línea. Ya has usado web components? Que piensas acerca de este tipo de desarrollo? Comparte tus experiencias o preguntas.
en mi siguiente blog, voy a extender la misma aplicación e incluir un component nuevo v3 con un botón, un UI5 Text area, un servicio de angular y algunos otros tips