Full demo coverage to create and integrate a custom library

[StErMi]

I write a lot of custom libraries both for daily work usage (in client projects) and for fun/learning/sharing. I have a lot of already made custom library all built and tested with the old grunt-openui5 and I would like to switch to the new build tool but as far as I can see I feel it's missing something right now.

I know that the tool is still in beta and not ready for production but I would like to create here an opportunity to improve the current status with some use-case and real work scenario.

I will describe what usually are my needs/approach (and I think this scenario is really common in dev life) and what I feel is missing when I tried to port my openui5-qrcode library from the old grunt-openui5 approach to the new ui5-tooling.

Most of my libraries are a wrapper of existing JS libraries/features that are missing from the UI5 framework.

For this example, I will use Flatpickr as the use case and the openui5-flatpickr library I created. The current (or at least at the time I needed it) DatePicker / DateRangePicker was not a good fit for the project I was developing. It was ugly (mostly because I had to use SAPUI5 v1.28.x) and buggy and was lacking some features important for the UI/UX of the process. This library is perfect for this example because it includes both external JS and CSS files needed to be included in the distributed version of the library.

1) Choose the external library I want to include and wrap 2) Create the custom library project initializing the npm package.json config 3) Install all the dependency needed to build the project 4) Install flatpickr (or the lib you want to wrap) as a dev dependency (it's only needed during the build phase) 5) Create the library.js and all custom controls needed for the project 6) Build and export the custom library 7) Integrate the custom library as an npm dependency inside your client app project 8) Integrate the customn library as an npm dependency inside my WebIDE project

Include external libraries as NPM dependency

In step 5 I want to use reference both JS and CSS of the flatpickr library from the node_modules folder. First of all, because in my build chain I've created the custom library only for a specific version of the lib and second of all because I don't want to have a static file inside my lib project (as it should be). In the previous version, I was doing that both from base/library.source.less and from the FlatDatePicker.js. That reference will be handled automatically thanks to the GruntJS configuration of openui5_them and openui5_preload.

This is not possible at all with the new ui5-tooling. I MUST include the CSS/js file directly into my SRC folder and so I'm not using the dependency system that I should use.

More examples

At the moment the only example you have is the one from the openui5-sample-app. I would like to see an official example that explains how you should (and it will be the official standard approach) create a custom library, test it locally, build and publish. This example should be the more complex one (including external libraries). After it, I would like to see how I should correctly include it inside a local project and one inside a WebIDE project.

Integration with WebIDE

@RandomByte said that they're in talks to bring ui5-tooling into the WebIDE pipeline but there's not a timeline yet. I would like to know more about this from both the team. We have the first release of an important tool inside our dev chain and for us, it's important to have it integrated inside our primary tool used to develop apps on SCP.

More documentation

I would like to have a good coverage of all the ui5 tools documentation to better understand all the features I can use/configure. At the moment you just have a bunch of options known and only really a few examples from which you can extract info.

Conclusion

I know that this is really a lot of work and that the core team as other priorities and task. But open source and the OpenUI5 community is also here for this purpose. Do you need help? Do you need to cover some aspect? We can talk and create a common and publish TODO List that we can try to cover together if and when possible.

So, please, talk with us, asking in which way you can improve these tools and what is needed/missing/not documented enough.

[alexanderchan]

I think we're doing a lot to work around the fact that we can't just use:

import { MyComponent } from 'my-component'

if we could use es modules and tree-shaking this would be a solved problem. Then customers could have a 'vendor' bundle and just npm install other components and we could just use webpack or parcel.

[RandomByte]

Hey @StErMi,

Sorry for missing the opportunity to join in on this discussion earlier. I think adding a "documentation" label is no sufficient reaction at all.

The tooling has become "production ready" in the meantime. But it is still missing a lot of features to really make a difference for many development scenarios. We are currently working on some heavy lifting topics like making the SAPUI5 libraries available via npm. This blocks a lot of our capacity. We also introduced a ranked backlog of topics we think are most important in the foreseeable future. If you think something is missing in that list, definitely let us know!

My take on your topics:

Include external libraries as NPM dependency

I guess this got resolved in the meantime with https://github.com/SAP/ui5-tooling/pull/5, correct?

More examples

Fully agree. We are working closely with the colleagues that maintain our demo and template apps. They should all be enabled to work with the tooling by now. Check them out here and here

But I think a more complex example is still missing. Do you have a proposal for such a project (either an already existing one or an outline for a new sample project)?

Integration with WebIDE

WebIDE has added preliminary support of the new tooling for UI5 Reuse Library projects (just create one through the wizard). Both teams are determined to build a full integration with the tooling for all things UI5. There are still a lot of things to discuss and decide in that regard. WebIDE currently has its own concept of serving UI5 resources as well as for proxying requests to other systems. We want to bring all that together, making the UI5 Tooling the leading entity for all UI5 specific IDE tasks. @petermuessig has some more intel on this.

More documentation

Yes. Please create a brief issue when something is missing or unclear. There is still so much missing that it's tricky to prioritize. Also, I think direct external feedback will help creating better docs :+1:

Do you need help? Do you need to cover some aspect? We can talk and create a common and publish TODO List that we can try to cover together if and when possible.

We always need feedback. Currently there is not much discussion going on, but we had it in the past and will have more in the future. Just keep watching the RFCs, issues and Slack and join in if you think you can bring something to a discussion.

Something thing I'm wondering about for example, is whether the contents of our Roadmap is actually understandable enough for others to think about and discuss?

[RandomByte]

@alexanderchan are you referring to ES6 support in general (resolved through https://github.com/SAP/ui5-builder/pull/64) or having UI5 resources using ES6 modules?

[alexanderchan]

@RandomByte I am referring to using UI5 resources as ES6 modules instead of using SAP's version of AMD.

[luizcarlospedrosogomes]

this is correct. manifest.json? ... "resourceRoots": { "mylib.util": "./lib/mylib/util", "mylib.components": "./lib/mylib/components" }, ....

can there be a compatibility problem with the SCP versions?

I have done this to import my lib and that has been enough. But sometimes there is some random error

[matz3]

@luizcarlospedrosogomes to me this doesn't seem to be related to this issue. Would you mind opening a separate issue with some more details about the problem? With the information posted we're unable to help.

[ddsultan]

@RandomByte, are these projects (UI5Lab.io) still valid for the current ui5 tooling

[ddsultan]

Could you guys please give me a guide or reference to build and install a simple resuable UI5 component as an NPM package? UI5 tooling v1 was following something more intuitive to an existing Node ecosystem users. Now with the version 2 it is really misleading although there have really good advancements with the latter version

[RandomByte]

Hi @ddsultan!

I guess it depends on what you mean by "valid" 😉. I think some of them never got around to use UI5 Tooling at all. Others seem to be using an outdated version.

For your own projects, there shouldn't really be any difference in the setup between UI5 CLI v1 and v2. We basically only added a functionality to consume framework libraries directly via the tooling. Your own components and libraries should still be declared in the package.json. See also the second paragraph here: https://sap.github.io/ui5-tooling/pages/Overview/#project-dependencies

For our last UI5con session we prepared a demo repository, showcasing various project setups: https://github.com/matz3/ui5con20-ui5-tooling/tree/master/demo-project
Also checkout the recording of that session here: https://www.youtube.com/watch?v=8IHoVJLKN34

[flovogt]

Documentation and links provided by @RandomByte are still valid. Please have also a look at https://bestofui5.org/ to get in touch with further community projects.