Technical Articles
UI5 Web Components by SG
Recently, I have been reading about UI5 web components. There was a recent UI5 conference in Belgium and a few hours ago, I was talking to someone who may need Fiori development and they asked me if I had used UI5 web components. Unfortunately, I have not gotten my hands dirty on UI5 web components, however, I have worked on Angular and Vue frameworks so I have an idea of what I need to do; let’s see. The same blog can be read in spanish here
What are web components?
Definition by developer.mozilla.org/en-US/docs/Web/Web_Components. It is a suite of different technologies allowing you to create reusable custom elements – with either functionality encapsulated away from the rest of your code – and utilize then in your web apps.
My understanding: I can use controls from other frameworks in my existing development utilizing the same look and feel from the other “control” in my existing application. Also, I can write modular pieces of code and separate html, js (or ts) and create modern, faster, and cooler web applications. Ok!
What other frameworks use web components?
There are three main JS frameworks that utilize web components.
- Angular
- Vue
- React
I have worked on the first 2. On each of those, there is a separate learning involved to understand traditional web development utilizing MVC, including views, and writing raw HTML5 and JavaScript (or TypeScript in the case of Angular). There is a bigger learning for developers who have not gotten into nodejs, npm and CLIs (if you are one of those, don’t give up; learn in different pieces (node, npm, angular, and so on).
Since this blog is related to UI5 web components, I must add that having prior knowledge on UI5 is very helpful to understand and hit the ground running. I did this exercise and blog in about 3 hours. I had angular and npm already installed on my laptop.
Why using UI5 web components?
Depending on the implementation, some customers want to use the same look and feel of Fiori when they already have other SAP systems in house. A better reason to use web components is because we can write lighter web applications based on latest technology trends. An even more compelling argument is because we can utilize other competing technologies to deliver the best of the best when it comes to web development. Everyone wins!
Some benefits of using web components:
- Light wight web applications
- url based routing – easy to set up and facilitates navigation/unit testing
- Uses HTML templates in components – smaller pieces of code results in easier to scale our development
- Dependency injection/lazy loading – only load what you need/ when you need it
I started by using the default Angular project provided by the ng cli.
Sample demo:
First, let’s display a hello world using a Toastr
Then, let’s add routing and navigation so we can go from page 1 to page 2.
On page 2 I wanted to display a button to go back to Page 1 and a ui5 table. (I used a hard coded model inside the v2 component for illustration purposes)
my system info:
- Angular: 8.2.14
- Angular CLI: 8.3.25
- Node: 12.16.1
- NPM: 6.13.4
Documentation and credits:
- 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
Other things to know:
- How does Angular work?
- How does angular use Routing (differently than ui5)
- How do you include other Components (such as Toastr)
issues while developing:
- issue w toastr: https://github.com/storybookjs/storybook/issues/9463
resolution: I used the no animation option
it seems extremely EASY for someone with the background on the technologies to add a new skill into their development, especially with all the resources available. Have you gotten into web components? What are your thoughts about this type of development? Please share some feedback or ask questions.
on my next blog, i will extend the same application and include a new component v3, with a button and a UI5 text area control, an angular service and a couple tips
Thank you for your time.