Building a simple UI5 app with Typescript
Building a simple UI5 app with Typescript

Building a simple UI5 app with Typescript

Software Development
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
  • 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

Test everything