Lightweight Generic CAP UI

Disclaimer: This is just me experimenting, nothing official.

Motivation

I really like the custom Bookshop UI (based on Vue.js) because it’s minimal and fast.

I was wondering if I could make parts of it generic (based on a given csn entity) without sacrificing performance. That means no client-side metadata analysis.

To achieve that, I use templates to generate HTML pages.

Implementation

I chose Handlebars as my templating mechanism.

First, I need to register two express handlers in my CAP bookshop application.

One of them makes sure that static files are accessible, the other one uses express-handlebars to connect the Handlebars templating mechanism to my express app. Once the /app endpoint is called, the result of the rendered index page is returned.

The rendering is based on my csn definitions and uses some helper functions which I defined here:

They help me to easily use my csn definitions in my templates.

Let’s look at the index page which needs to be rendered:

As you can see, there are no bookshop-specific elements.

Whenever you see {{ ... }}, it means that Handlebars will inject the given expression into the resulting HTML document. We have access to all provided helper functions and input objects.

Usually, the {{ and }} symbols are text-interpolation delimiters for Vue.js. But since Handlebars uses the same symbols, I changed the Vue.js delimiters to ${ and }.

The expression {{> list }} and {{> object }} just means that I want to include my defined partials, shown below.

{{> list }} (showing the table):

{{> object }} (showing the selected object):

As you can see, I can iterate over my elements using {{#each ...}}.

Finally, the Vue.js code to make the app dynamic:

Final Result

The resulting app is not as pretty as the custom-made one, but good enough as a proof of concept. I’m not a frontend developer after all.

You can find the complete code in my GitHub repository.

Thanks for reading and best regards,
David