In this chapter, we will build WorldExplorer, a web application that will retrieve and display information about the world population. The data will be obtained through a RESTful web service of the World Bank (https://datahelpdesk.worldbank.org). The application will display interactive charts using the Chart.js (https://www.chartjs.org) library.
We will introduce you to additional TypeScript concepts such as modules, module resolution, barrels, and some others. Thanks to modules, we will be able to drastically improve the organization of our code, as well as its readability and testability.
In order to get the data, we will use the Fetch (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) and Promise (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) APIs included in modern web browsers. We will also learn about async and await to make our asynchronous code look synchronous.
In this chapter, we are hence covering the following topics:
- Understanding modules
- Loading and bundling modules
- Exploring TypeScript modules
- Introducing module resolution
- Building the WorldExplorer application
- World Bank Open Data APIs
- Understanding the Fetch API
- Understanding async/await and generators
- Implementing the domain model
- Implementing the population service
- High-level design
- Implementing the view layer
- Implementing the controller layer