Ui5 Development in NodeJS

[abelleopti]

Hello community, welcome to my first blog. Today I present my custom dev-environment based on node.js. I started the project before I got in contact with the UI5 Tooling and still like many functions. I never liked the way you have to add views, controllers and fragments to your app in the Web IDE, there was not enough … automation. For example when you have a Base.controller.js, when you add a new view with a new controller you have to adjust that every time. What I like is the feature of adding services and the git-integration.

I will not work in the cloud for a view years from now, so cloud foundry extensions where no option. The local Web IDE was not my taste, so I started hosting a Ui5 app local with a node.js server. That worked so well, so it was the point of no return for me. I created the App-Generator.

I develop custom Ui5 apps for our gateway with my custom server. It creates a local web server that hosts all Ui5 projects at the same time – like Web IDE. With an http-proxy, I connect to our services from the gateway. The root of the server is one level above all project folders.

Because I’m lazy the start.bat launches the server and opens the Ui5 App of my Generator in the browser. From here, I can jump to all my Projects and manage them.

Template App:

Because I don’t have cloud foundry, I have no access to template apps inside the Web IDE. I had to have it, so I created my own template that is copied every time I create a new app. It already has services I always want, a base controller and resources, including custom files. The namespace cannot be provided yet, you might want to add yours inside the template.

 

The App Generator has access to a few of the custom extensions.

Create View:

I provide a template.view.xml/template.controller.js in every project. When I need a new view, I only have to provide a name. The files get copied, renamed and saved. They contain just the bare basics that I need to insert every time. Like the variable for i18n, the base controller and my placeholder-tags (used for dialogs).

 

Add Dialog:

A basic xml with a dialog inside that has two buttons. Again, you need to provide a name and the view you want to add it. Why the view you ask? Because I use the placeholders in the controller of that view to insert dialog functions. I like having the dialog stored in a variable inside my controller for easy access. The variable, open, init and close function will be created. I use one init / open / close function for all dialogs. The idea came from providing the name of the dialog inside the open call in the xml, but this does not work on Ui5 1.52 [press=”onOpenDlg(‘AddView’)]. An event reader uses the dialog id and opens the requested one. The placeholders are probably the best feature with the most potential. You could insert a lot more code snippets like that when they are the same every time.

 

Git:

A simple git function that commits and pushes your changes. It tries to pull changes before pushing. I don’t recommend trusting it fully – I work alone and I’m the only committer, it works for me but might not work for you. If you pull and merge manual before, you could use it or just commit and push from VS Code. It should be save to use but I’m no expert. On a new project, it requests the git-url and stores it in the zProjInfo.json.

 

Once you created your first app via the AppGenerator you get access to the following. It makes no sense showing them on the generator.

Add Service:

It inserts the provided service to a standard data-source-object and creates the model in the same step. If you need to adjust the standard object, go to lib/editor.js/addService().

 

Ui5 Build:

This button-press executes the “ui5 build” command inside the project. Thanks to the Ui5 Tooling. Before this was an option, I pushed my changes, cloned them to the Web IDE and then deployed my app from there. The build creates the dist folder with everything needed for deployment. Check out Ui5 Tooling to learn more.

 

Deploy:

It uses the npm package “grunt-nwabap-ui5uploader”. Thankfully this exists, http is required for me once again. You have to provide the package, the app name, a description and the transport. Be careful, the deploy-language is set to “DE” inside the lib/builder.js/deployApp(). The deploy credentials are saved in the zProjInfo.json.

 

In my humble opinion, the future of custom Ui5 Development is local. Tools like VS Code are just too good not to use. The level of customization cannot be reached by the cloud. It is a fun project and I will keep working on it. Would I do it again? Yes, 100% yes. I learned a lot during this project and still enjoy the result. Do I use the Ui5 Tooling? Yes, the offline option is great and you can specify the ui5 version with it. It’s a pleasure to test the finished app with it. Thanks to the tooling the build can be done local. The guys over there do a great job, make sure to check them out. A big thank you to Wouter Lemaire, his coding helped me to get started. I even can run a ui5 serve parallel to provide the libraries to run 100% offline. Please let me know if you are interested in that, the coding is not finished because it was a proof of concept. If you have any advice for me please let me know, I´m looking for feedback.

Thank you for reading!

 

Git: https://github.com/henloh/Ui5AppGenerator