How to use APIs to build Javascript Apps
- Jonnie Russell
- April 29, 2020
- 5:36 pm
Javascript as a language has now evolved to a place where it’s used to build both frontend and backend server applications.
It is a high level scripting/programming language built into all modern browsers, enabling dynamic functionality to be added to static web pages, and enables the creation of single page web applications seen in everyday use from Google’s GMail application to Twitter’s website.
This blog will highlight the main parts and concepts involved in creating a simple Javascript Application, concluding with a ‘sum of all parts’ working application. As you’ll see in the diagram below, 3 parts are required to deliver a functioning app.
Delivering a functioning app
The first of these is the client’s device which can be a laptop, pc or mobile device running a modern browser such as Chrome, Firefox or Edge.
Each browser includes an interpreter which executes JavaScript code. V8 is Google’s open source (http://v8.dev) high-performance JavaScript engine, which is written in C++ making it easily portable to any platform. It is used in Chrome and also in the new Microsoft Edge browser, which was released in January 2020.
The next is the Web Server, which is responsible for serving up files (such as html, images, javascript, etc) over HTTP to the users browser requests. The most popular Open Source Web Servers are Apache and Nginx, between them they run most of the websites on the internet.
The final piece is the Application Server, which is used to host the application that the Javascript app will talk to, over its API (Application Programming Interface).
The API is a specification of the functionality that the application provides, it is intended to enable software components to communicate with each other. The concept behind API’s is that they should abstract away the more complex functionality of the application’s code and provide a simple, easy to use interface for other applications/programs to be able to use. When two systems connect together via an API we say that they are integrated. In an integration, there are two distinct sides: the client and the server, the server is the side that runs the program that provides the API, and the client is the side that uses/consumes the API.
OpenAPI is one of the more popular API specifications, it was previously known as Swagger, it is used to define the API endpoints as well as the format of the response messages which are defined in JSON, a machine-readable data format.
The following are an example of the steps necessary for a Javascript app to request and display a list of contacts.
Stages 1-2
The browser makes a http request to https://www.example.com this requests the index.html page from the Apache web server. Once the browser processes the index page any additional referenced items from the index page such as css, images or javascript are also loaded and then in the case of javascript the script/scripts are run.
Stages 3-4
Once the Javascript app has started up in the browser, it makes a https request, for example to retrieve a list of contacts, to the application server via https://api.example.com/contacts/list which on success returns a list of contacts in json format
[
{
"name": "Cassio Zen",
"email": "cassiozen@gmail.com"
},
{
"name": "Dan Abramov",
"email": "gaearon@somewhere.com"
},
{
"name": "Pete Hunt",
"email": "floydophone@somewhere.com"
}
]
Once the application has received the json data response from the API, it uses this to render a list of the contacts in the browser.
This has been a high level overview of how javascript applications work in combination with APIs, the next blog will cover the security and authentication side of APIs.
Talk to us
If you’d like to talk to someone on our team about this topic, please get in touch.
