Making API requests in JavaScript web apps

It’s been a while since my last post in the summer when I finished Makers Academy… Since then I’ve been fortunate enough to land my dream job as a Graduate Software Engineer at ThoughtWorks and have recently returned from an intensive training program in China. Over the past few months I’ve immersed myself in the delightful world of Java — but sadly not written about it!

I’m now returning to produce weekly blog posts on my learnings. The aim of these is really to share some new things I’ve learnt (or relearnt) to improve my knowledge, with a hope that this blog series could help others.

Kicking off with this post on making API web requests in JavaScript web apps.

Quick recap of client-server

Client-Server overview — MDN web docs

Server: serves the content.

Client: makes a request for a server.

HTTP Protocol: an agreement of how the server-side and client-side will understand the message

API: (Application Programming Interface) enables interaction between software and other functions.

In Web development, an API is generally a set of code features (e.g. methods, properties, events, and URLs) that a developer can use in their apps for interacting with components of a user’s web browser, or other software/hardware on the user’s computer, or third party websites and services. API — MDN Glossary

API requests from the browser

When to use it? When you don’t need to process any data, but want to show data from API requests in the browser.

What are the benefits? You can work directly with JavaScript and JSON objects without having to worry about building out a back end.

What are the trade offs? As there’s no back end server it’s not possible to have an API end point. Having an endpoint could be useful for writing tests and creating your own routes for your app.

Resources: In my tests I used Jest which I have found to be the most straight forward testing framework to use with the clearest instructions on integrating Babel for ES6. When working with JSON objects it’s also worth using a JSON formatter.

The example: A single page app example that makes a GET request to MVLA to display specific information about a vehicle.

Vehicle object takes the JSON data as it’s argument. It then uses this to create properties for this object from the keys of the JSON object.
The VehicleComponent object is responsible for ensuring the Vehicle object and it’s properties can be rendered on the page.
Here’s one version of the interface that is responsible for making the GET request using xmlHTTP. The JSON object from this request is then stored and used to create the vehicle object and component. This function is then invoked so that as soon as the page loads the request will be made and the vehicle object and component will be created.
Here’s a second version of exactly the same GET request carrying out the same purpose as the above interface. However, this time the request is made using the Fetch API to make a Fetch request. The advantage of this is that it is more modern and uses JS promises to enable chaining.

API requests from a node server

When to use it? When you need to process data and/ or you need an API endpoint as well as show data from API requests in the browser.

What are the benefits? You can create your own API endpoint.

What are the trade offs? When I first worked with an Express App I became a bit confused with Express JS router, and Request Promise. Make sure that you really need a server, as the configuration especially with ES6 can get tricky at times. If you only need an API endpoint and no processing of data you may be able to get away with a mock endpoint like Apiary.

Resources: If you’re in a hurry you can use the Express app generator to create your app in minutes (maybe even seconds). Express routing documentation here. Stubbing for JS with Sinon JS.

The example: A simple Node Express server that creates some bank account routes with hardcoded JSON objects.

This index.js sets up the routes for the app and directly passes in the JSON object.
The typical Express app generated by the Express app generator, edited to have less information in it.

Got any comments/ feedback/ advice? Please do share them below as the purpose of the blog is to learn. That’s all for now!