Front-end is the graphical user interface where users can interact with on their computers to communicate with the website’s database to view the information they need. To develop the front-end, developers use HTML, CSS, and JavaScript framework; and they also have to be aware of the constantly changing in the tools and techniques to create the front-end of a website.

HTML (HyperText Markup Language) is the most basic markup language (absolutely not a programming language), for documents designed to be displayed in a web browser. Learning HTML is the first step in front-end development. Come after HTML is CSS, stands for Cascading Style Sheet, and is used for formatting markup language, mostly for HTML. Finally, while HTML and CSS creates the structure of the website, JavaScript is what powers its interactivity. Furthermore, learning JavaScript is a never ending process since there are new frameworks coming every year. Let’s take a look at the popularity differences between these web frameworks, according to the Stack Overflow survey in 2019 and 2020 respectively:

We can see that jQuery is losing their numbers to React.js and Angular and React.js looks like they will get that first place this year, but the top three most popular frameworks are all JavaScript. Besides, as I said that there are new frameworks coming every year, it means that when a better framework shows up, front-end developers have to learn it in order not to be left behind. For now, in my opinion, React.js is what you should go for if you want to get a role in this field.

Besides the programming language skills, there are other tasks that front-end developers have to be aware of. From my experience, a method called fake API is really important. For instance, in the process of developing the graphical user interface, front-end developers have to test their work by calling the API from the back-end team to see how the data fit into their blocks. However, in case that back-end team falls behind or somehow is not able to provide the front-end team with the built API, fake API is one useful method to test the front-end. Another frustrating task that I’ve heard about is that the design has to be responsive which means that the website has to run properly on any device, from the smallest mobile device to the largest desktop.

In conclusion, above is what I know so far about the front-end. Also, I found outstanding guidance about the practice of front-end development from Frontend Masters including almost everything we’ll need regarding a front-end topic. Check it out if you want to learn something in the front-end.

From the blog CS@Worcester – Vien's Blog by Vien Hua and used with permission of the author. All other rights reserved by the author.

A while ago, I introduced the concept of API in the information technology industry. In addition, there are 3 different types of Web Services APIs which are REST APIs, SOAP APIs, and RPC APIs. Among them, REST APIs is no doubt the most popular API currently. REST APIs, also known as RESTful APIs, stands for Representational State Transfer. It is based on four different HTTP commands which are GET, PUT, POST, and DELETE.

When a client request is made via a RESTful API, it transfers a representation of the state of the resource to the endpoint. Then the information is delivered in one of several formats via HTTP: JSON (Javascript Object Notation), HTML, XLT, Python, PHP, or plain text. JSON is the most generally popular due to its readability.

According to the RESTful API website, a service interface needs to apply these 6 guiding principles and constraints to be referred to as RESTful:

1. Uniform Interface

Multiple architectural constraints applying to the interface so that information is transferred in a standard form requiring:

Identification resources – resources requested are identifiable and unique from the representations sent to the client

Manipulation of resources through representations – clients can manipulate the resources via the representation

Self-descriptive messages – each resource representation should carry enough information that the client can manipulate.

Hypermedia as the engine of application state – after accessing a resource, the client should be able to use hyperlinks to find all other currently available actions.

2. Client – server

It is the architecture made up of clients, servers, and resources, with requests managed through HTTP.

3. Stateless

Statelessness means that no client information is stored between each request and that the server cannot take advantage of previously stored context information.

4. Cacheable

There are cacheable and non-cacheable responses. If the response is cacheable, the client can reuse the response data for later use.

5. Layered system

A layered system allows an architecture to be composed of hierarchical layers by constraining component behavior.

6. Code on demand (optional)

It is the ability to send executable code from the server to the client when requested, extending client functionality.

Although REST API has these criteria to conform to, it is still considered easier to use than SOAP (Simple Object Access Protocol). The reason is that while REST is a set of guidelines which is simple to implement and faster in response time, SOAP has specific requirements like XML messaging, and built-in security and transaction compliance that make it slower and heavier.

Overall, the point of this blog is to introduce you to REST API, REST is just a term indicating the constraints applying to the API. In order to understand the power of REST, I would suggest going to create one and see how simple and convenient it is.

From the blog CS@Worcester – Vien's Blog by Vien Hua and used with permission of the author. All other rights reserved by the author.

In last week’s blog, I introduced the power of container technology, Docker. Besides the advantage of easy implementation, however, implementing a command again and again using a terminal is not a good idea long-term. Therefore, Docker Compose is a tool for defining and running multi-container Docker applications by implementing all the applications commands to a YAML file and having it executed when needed.

According to the Overview of Docker Compose, using Compose is a three-step process:

1.       Define your app’s environment with a Dockerfile so it can be reproduced anywhere.

2.       Define the services that make up your app in docker-compose.yml so they can be run together in an isolated environment.

3.       Run docker compose up and the Docker compose command starts and runs your entire app. You can alternatively run docker-compose up using the docker-compose binary.

Dockerfile is another concept, while in this blog I will introduce how to manipulate Docker compose. Let’s take this command as an example when we want to create a nginx server

docker run -d --rm \

--name nginx-server \

-p 8080:80 \

-v /some/content:/usr/share/nginx/html:ro \

nginx

This command serves the purpose of mounting an html file to the nginx server running at port 8080 locally where nginx-server is the name of the container, -p 8080:80 is mapping the local port at first parameter and the default container port at the second parameter, separated by a colon and -v /some/content:/usr/share/nginx/html:ro will mount that 8080 port with the html file at the pointed directory. Translating this command into Docker compose:

version: “3.9”

services:

                nginx-server:

               image: nginx

                                ports:

                                - 8080:8080

                                volumes:

                                - /some/content:/usr/share/nginx/html:ro

Version is the version of Docker compose we want to use, all the necessary commands will be integrated and placed under the services section. Name of the container is placed at first then all of its entities are written after a colon and one indentation in the next line. Image tag is the application we want to create, ports is equivalent to -p to map the port, and volume is the same as -v used for mounting. Under this format, we can implement as many images as we want at once and just rerun it with the command docker-compose up in the directory containing that docker-compose.yml file.

version: “3.9”

services:

                nginx-server:

               image: nginx

                                ports:

                                - 8080:8080

                                volumes:

                                - /some/content:/usr/share/nginx/html:ro

                redis-container:

                                image: redis

                …

Overall, the convenience of Docker is taken to a higher level thanks to the compose concept. Also, this video is another source that I watched to understand more about docker-compose. Therefore, I suggest using the main Docker Compose page from their site and this video as a reference if you might need it in the future.

From the blog CS@Worcester – Vien's Blog by Vien Hua and used with permission of the author. All other rights reserved by the author.

Docker is an open-source software that is used to deliver Linux and Windows images into virtual containers. According to this article, containers use shared operating systems, meaning that they are much more efficient than hypervisors in system resources terms. Instead of virtualizing hardware, containers rest on top of a single Linux instance. This means that 99.9 percent of useless VM junk is left behind, so we can have a small container containing necessary applications.

Specifically, container technology just abstracts the operating system kernel while the VMs hypervisor abstracts an entire device. Meaning that containers allow data center operators to cram much more workloads into less hardware. Furthermore, containers are portable, each instance is stored standalone in a port. It means that Docker allows you to run multiple copies of the same image in different local ports.

Another reason why Docker is so popular is its installation, downloading a whole application, for example, a database service, is usually frustrating since we have to follow strictly step by step, and if we mess up somewhere, the application will not function properly and we have to fix or reinstall the whole app. Docker is encapsulating the whole application into a container, to install a container to use locally, developers simply pull it from Docker Hub, which I will introduce below, with a command and run it.

Docker Hub is the largest library and community for container images, where users are able to find what image, container, command they need and share what they have to others. Just like GitHub, you will create an account and use it to fetch and push the source code or pull it from other people, but the repositories here are containers, image repositories. For instance, you need to set up the MySQL database for your application, instead of downloading and setting up the port for one database, you will look for it on Docker Hub and install it based on the repositories’ instructions and connect it to your computer port through a port. By the time this blog is posted, there are almost eight and a half million available images on Docker Hub for users to pull and work with.

In conclusion, Docker has revolutionized software development by making things possible. It gets more applications running on the same hardware; it is quick and simple to initiate an instance, therefore it makes managing and deploying applications much easier.

From the blog CS@Worcester – Vien's Blog by Vien Hua and used with permission of the author. All other rights reserved by the author.

API, absolutely not the IPA’s beers (unless there really is the API beer) that Petr Gazarov, a software developer with more than 3600 followers on medium, mentioned in his blog, is an acronym of Application Programming Interface. Hmm, you might have heard about it but what it really is?

When we type the URL, for example, facebook.com, we send the request to Facebook’s remote server, which is a remotely located computer, and that computer, which is a server, processes the request through an API to display the webpage. From that instance, Gazarov defined that “An API isn’t the same as the remote server–rather it is the part of the server that receives, requires and sends responses.”

One example is the Object–Oriented Design, code is organized into objects, which will later be used to interact with one another. From my own experience, the first time I was aware of using the API was in the Data Structure class, the Oracle API provides specifications for the JVM Platform, Standard Edition, and the instructions on how to use those methods are documented. I was working with Stack in Java and I want to look at the object at the top of this stack without removing it, I will use peek() instead of pop() as instructed from the API documentation to request relevant operations. The Stack is the object designed by Oracle and the peek() function is a public method in that object, and a set of public methods and properties is an API. Web Server API is similar, the idea is to receive requests and responses.

The difference is the format of the request and response, in my case, it was simply just a function with a small operation, in other cases, different APIs provide flexible responses with tons of uses. One thing I learned from his blog is that to render the whole web page, the browser expects a response in HTML containing presentational code, Google Calendar’s API call would return the JSON formatted data.

Another experience that I’ve got when I was working with my friend in a web project is creating the backend of this project, which is developing the GET, POST, PUT, DELETE functions to respond to his request for his frontend application. The role of this API is to return the data, formatted in JSON, which is stored in Firebase database to the person working in the frontend in order to design the graphical user interface.

In short, Gazarov concluded” any piece of software that can be distinctly separated from its environment, can be an “A” in API, and will probably also have some sort of API”. Since this blog consolidates my understanding about API, I hope you will also find it useful.

From the blog CS@Worcester – Vien's Blog by Vien Hua and used with permission of the author. All other rights reserved by the author.