Invoke REST API using Typescript in Simple Web page

Spread the love
  • 2
    Shares

We learned few basic Typescript concepts in last video series. This time, instead of just talking to you about the concepts, I felt it is better to make use of examples. The intention is to understand how and where these concepts are used. In addition to that, I have added a few tips to the videos. (I got my hands on After Effects 🙂

Typescript, REST API and Webpage (Photo by rawpixel on Unsplash)

The video begins with a Github URL that you can leverage to download the code and speed up the project creation step. Most of the configuration that we explored till now is already baked in.

Simplicity

Instead of working with Simple Hello World example, I decided to make use of the real-time requirement. Most of you might be already working with REST APIs and I felt why not take that as a use case. Luckily, JavaScript comes with ready to use objects that can be used to invoke URLs.

Simple, yet beautiful (Photo by NordWood Themes on Unsplash)

REST API

The project contains an HTML page with a simple form having two fields – Name and Job. The intention of this exercise to invoke the API, pass the form information and display a success message.  While working on this example, I was a bit concerned about the REST API. I had no intention to increase the complexity of the example by going through the process of building one. Luckily, there is a fantastic site available – https://reqres.in

Reqres.in contains a set of ready to use CRUD APIs. The site claims that it doesn’t store any data that you pass to it, so it seems to be a safe bet. While the number of APIs are limited, it is sufficient to develop a quick prototype or medium sized application.

Build Utilities

I realized that most of the time I am just repeating quite a few steps to build this example. For e.g. whenever I used to change HTML or CSS file, I was manually copying it to dist folder. This was definitely no-no for me, I would rather love the IDE or Build scripts to take care of it (Blame Eclipse, it made me lazy).

Build Tools (Credit – Photo by Maxime Agnelli on Unsplash)

This led to a discovery of copyfiles and nodemon. These utilities have a lot of options to customize the behavior. Both these modules are very popular and must have for a build process. Check the official document here and here.

Typescript and Modularity

It is too early to talk about modularity OR may be it is a right time. All these years of development, led me to a realization that if we can make a simple program easy to read, the same principle can be applied to complex logic. Hence, the typescript file discussed in this program makes use of functions dedicated to doing a single job. There is still a scope to further refactor it.

The video ends with successful invocation of REST API and displaying alert message to the user. We learnt quite a few things in this video

  • Using tools to speed up build process
  • Use dummy REST API to quickly demonstrate UI prototype
  • Use browser tools to verify API requests
  • And most important how to use Typescript for Web development

Whats coming next???

It is true that for actual projects instead of using plain Typescript programs, we will be making use of frameworks/libries. The series will advance through some of the frameworks like Node JS, Browserify, JQuery etc. So keep a watch.

Leave a Comment.