In a generic single page app (SPA), I would implement a routing logic with Express.js. But what approach should I use in SAPUI5 environment? Should I rely on sap.ui.core.routing.Router and sap.m.routing.Router routing modules of SAPUI5 or implement such functionality with Express.js?
I think you are slightly confusing routing concepts. Let's try to clarify them a little.
Express is a server-side Node.js library for building HTTP interfaces. In this context, routing refers to matching an incoming request to a handler function (based on URL patterns for example). The handler function then must produce the HTTP response based on the incoming request (status, headers, body, etc). This is analogous to Spring @RequestMapping, JAX-RS @Path, Rails routing, etc.
// Express route
// all GET requests on the / URL will be handled by this function
// which in turn sends back a plain text "Hello world!" response
app.get('/', (req, res) => res.send('Hello World!'))
Example matching request for the above code: GET http://localhost:3000/.
UI5 is a framework for building client-side, single page applications. As you mentioned, it has a built-in hash based router. In this context, routing means matching a browser's current location to a view inside your SPA. Usually (but not always), this is done via the hash as UI5 does it, i.e. via the portion of the URL after the # symbol. This is used because URL changes that affect only the hash do not cause the browser to load a new page. Which in turn ensures that the JavaScript context is not destroyed + re-created and the previously loaded resources are still accessible. This is analogous to the React Router, Angular Router, mithril routing etc.
// UI5 router config
// it first defines where are your views (in the sap.ui.demo.nav.view "package")
// and where the views should be rendered (inside the pages of the app control)
// lastly, it defines one route, which matches the /home URL inside the app to
// the Home view.
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "sap.ui.demo.nav.view",
"controlId": "app",
"controlAggregation": "pages"
},
"routes": [{
"pattern": "/home",
"name": "appHome",
"target": "home"
}],
"targets": {
"home": {
"viewId": "home",
"viewName": "Home"
}
}
}
Example matching location for the above config: http://localhost:3000/index.html#/home.
In essence, if you want to build a UI5 application with a Node.js backend, you will most likely use both:
Hope this provides some clarity.
Later edit: one thing I omitted was server side rendering. That may muddy the waters even more, but in the context of UI5, it cannot be done (yet) easily anyway.