Experiment with JS and backends

[David-Estevez]

As part of the upcoming printer reservation web we had the idea of using JS in a static webpage such as this to render dynamic contents obtained from a backend.

To test whether this is possible or not, I'm going to do a small proof of concept with a web that queries the GitHub API to keep an updated list of ASROB members.

This proof of concept will provide us useful information for our developments in the printer reservation web and to decide which approach is better in the website redirection.

[David-Estevez]

I've finished the experiments successfully. This is the report.

Objective

The objective of the experiments was to determine if GitHub pages could host a static webpage able to retrieve data from an API belonging from us (see asrob-uc3m/actas#87 (comment)).

As @PeterBowman mentioned in the original thread saving us some headaches, the Same-origin Policy prevents browsers from doing requests to a different origin (domain, port or protocol). There are two ways of avoiding this policy:

• JSONP: as the <script> tags are not limited to the same origin, one can request a .js file to the backend server containing a JS statement declaring a variable containing the requested data. This JS code in then interpreted to obtain the data.

• CORS: is a method to ensure that both the source page and the backend server are aware of this cross-domain exchange of data and allow it. It is based on http headers.

Experiments

For the experiments I used CORS as it seemed to me that it would be easier to keep a more standard API by returning JSON data instead of a JS file for JSONP.

To test that this could indeed work, I set up a simple local backend server in my PC using hug:

import hug

@hug.response_middleware()
def alow_origin(request, response, _):
    response.set_header('Access-Control-Allow-Origin', '*')

@hug.get('/')
def getdata():
    data = {'name':'Dédalo', 'working':True, 'type': 'Prusa i2'}
    return data

The code of this server just returned some test data in JSON format:

{"working": true, "type": "Prusa i2", "name": "D\u00e9dalo"}

For the frontend I added a testing page to my personal webpage, which uses Jekyll to generate a static website and is hosted using GitHub pages: http://destevez.me/testing. This page uses AngularJS to display the data requested to the backend, whose url has to be set up in the input field. Once the button is clicked, the request is sent and the received data is displayed in the page.

I tested this with the frontend page both in a local Jekyll server and in GitHub pages. I also connected this frontend with the backend using a local url (localhost:8000) and over the internet though my router, and it worked in both cases.

Even though I did not test it with the GitHub API, I read in the docs that they support both CORS and JSONP, so in principle we could implement an always-updated printers status website, for instance.

Conclusions

Since we are going to design and implement the API, we are in control of the backend server. This makes it very easy for us to add the required headers to implement CORS, so I would stick to it instead of JSONP. One thing I did not test and could be an issue is performing the authentication. But since we do not know how to implement the authentication yet, I guess this is something our future-selves will have to deal with.

I'll call it a success and close this issue now.

Bonus

Another kind of CORS