Building a simple UI5 app with Typescript

For many years you could only build a UI5 application with plain JavaScript. But for some time now the team behind UI5 is releasing UI5 type definitions. With these type definitions in place and a community built yo generator we can easily build UI5 applications with Typescript.

So lets build one for ourself to get a feeling for that. But first of all lets define a simple idea what our app should be capable of.

I guess everyone know Pokemon, the little creatures we were all hunting for as kids to catch ‘em all. There was a special device to help poke trainers identify unknown creatures - the Pokedex! I think this is a good idea to build because we dont have to worry about data in general and even the UI should be easy to design as we have plenty of reference material out there in the wild.

Now with our use case in mind what do we need to accomplish the mission?

First of all we need a local installation of NodeJS, npm and yo with the easy-ui5 generator.

Generate boilerplate code

easy-ui5 und ts-template

tsconfig anpassen

Horizon theme

Implement views

app view

tnt layout

fragments

tnt header

tnt maincontent pages

page 1 → pokemon search and pokemon list
page 2 → pokemon details

Implement controller

Pokemon search

data retrieval

display of search results

navigation to detail page

Pokemon list

data retrieval

display list of pokemon

navigation to detail page