Learn about difference of UI5 Web Component and Fundamental Library

[MisherLiu]

Hi UI5 Web Component Team,

I am working as a member of ATO.
Recently I have learnt some UI5 Web Components, and write a demo with Vue.js. UI5 Web Component is a very useful library to implement Fiori Like UX with open source UI framework.
However I still have a feeling the Fundamental Library have very simlar function with UI5 Web Component.
Do we have a plan to merge these two library?
If no, what would be these two libraries focus area?
Does the UI5 Web Component have continuous development same like SAPUI5 ?

BR
Misher

[ilhan007]

Hello @MisherLiu we had similar questions in the past.

On how does Web Components relates to SAP Fiori Fundamentals, you can take a look of the following answer:
https://blogs.sap.com/2019/02/11/ui5-web-components-the-beta-is-there/#comment-451373

Do we have a plan to merge these two library?
No plans to merge the libraries, as far I know there is an open discussion for introducing a common CSS/Styling layer, that both can reuse. @petermuessig Peter perhaps you can give more details on this.

If no, what would be these two libraries focus area?

For UI5 Web Components:

• One of the short terms priorities of the UI5 Web Components is the public 1.0.0 release, that should take place in Q3.
• Another major topic is the "UI5 Web Components Enablement in SAPUI5". The goal of this project is to enable developers write UI5 Web Components, that can easily convert into SAPUI5 control (via control wrappers that internally render web components) and use in the SAPUI5 programming model. Actually this is already possible since 1.93, but the code is merged under experimental flag and there are points we have to touch and improve to make it productive.
  With this, for every new request we get for a SAPUI5 Control that does not exist, we will create a UI5 Web Component and then convert that web component into SAPUI5 Control. So, we will have new SAPUI5 libraries of controls, that are based on UI5 Web Components under the hood.
  Note: The existing libraries (sap.m, sap.f) will continue working as before, we can't change them as they will become incompatible.
• To further extend our component set, based on our stakeholders' needs and community feedback and provide new features to the existing ones.
  Note: there are hundreds of SAPUI5 controls, our goal is not the repetition of all these controls as web components, but to provide the ones more relevant to Web Developer, not SAPUI5 Developer. For example, sap.m.HBox and sap.m.VBox control can be easily implemented with few lines of standard CSS.
• To create and promote an ecosystem (with tools, guidelines, rules) around UI5 Web Components, such that different teams from different project can implement custom UI5 Web Components, that also others can use.
  Note: Technically, we have the tools and the APIs to develop custom UI5 Web Components as of today.
  We mainly lack good documentation and clear guidelines.
• One interesting topic that we will look into in future is the support of Server Side Rendering, which will be possible with the support of "Declarative Shadow DOM", that is currently developed by the browsers.
  And this is an example of our plan to be up to date with the most recent features in the Web.

Does the UI5 Web Component have continuous development same like SAPUI5 ?
UI5 Web Components are developed and supported by the SAPUI5 team, based on the same UX/A11y specs as SAPUI5 controls.
The delivery/release process of UI5 Web Components is not coupled to SAPUI5. UI5 Web Components packages are published to the official NPM. But, you can expect similar frequency of the releases, patches. After 1.0.0 we will create a release schedule similar to SAPUI5.
Note: We also envision multiple major versions 1.0.0, 2.0.0, etc. instead of sticking to 1.0.0 only.

BR,
ilhan

[MisherLiu]

Hi @ilhan007 ，
Thanks a lot for your reply in detail.
I have write a demo using @ui5/webcomponent and @ui5/webcomponent-fiori in a Vue.js framework. I am wondering how to use UI5 Web Components - Tools , it seems cover build/ compile functions, however Vue Cli also has build(webpack) / compile( babel), not sure is UI5 Web Components - Tools mandatory and better than Vue Cli's build/compile?
BTW, I have interest on Accessibility topic and have experience on Entitlement Management System UI developing with SAPUI5 accessibility, if there is need, I'd like to contribute for this.

BR
Misher

[ilhan007]

UI5 Web Components - Tools is not related to an app build, it provides the setup to create a library of custom UI5 Web Components in the way we develop the the standard UI5 Web Components, including the necessary build steps. To build your Vue app, you need the Vue's webpack build as per the Vue documentation.

You can see this document to understand the purpose of UI5 Web Components - Tools:
https://github.com/SAP/ui5-webcomponents/blob/master/docs/dev/Creating%20UI5%20Web%20Components%20Packages.md