Concepts a Web Developer Should Know

Han Chen

Han Chen

February 9, 2023

Concepts a web Developer should know - Part 1

This article discusses the concepts of PUT and PATCH in the context of the Omnisend API, as well as the difference between these two HTTP methods. It also provides an explanation of the term "Process" and how it relates to starting a web server, including a list of other processes that run on a computer. The article concludes with a definition of PORT, which is a logical connection point for network services, and how it is used in the context of starting a web server. The article provides a concise overview of these key concepts for those interested in learning about web development and the underlying technology behind it.

The difference between PUT and PATCH

The Omnisend API documentation states that the PUT action in the cart represents "replacing an existing cart," while the PUT action represents "updating a cart." Although there is a clear distinction between PUT and PATCH, different API providers may have their own way of defining their APIs. For example, my supervisor uses the POST method for all actions, and some logistics providers also only use POST for all actions.

Like CRUD, SOLID, and REST, REST is another catchy term. Some articles even use the term "backronym" to describe it as a specially constructed acronym designed to fit a specific word or concept. I keep REST in mind and therefore, our project files consist of various index.js files.

The following is the treeview of my files scattered in the pages/api directory, showing the organization of my API routes and endpoint files.

|-- address_info
|   `-- [id].js
|-- auth
|   `-- [...nextauth].js
|-- bigCommerce
|   |-- CustomerAttribute.js
|   |-- addresses
|   |   `-- [id].js
|   |-- cart
|   |   |-- [id]
|   |   |   |-- [itemId]
|   |   |   |   `-- index.js
|   |   |   `-- index.js
|   |   `-- index.js
|   |-- coupons
|   |   |-- [id].js
|   |   `-- index.js
|   |-- customers
|   |   |-- [customerId]
|   |   |   |-- addresses
|   |   |   |   `-- index.js
|   |   |   |-- attributes.js
|   |   |   |-- index.ts
|   |   |   `-- orders.js
|   |   |-- credentials.js
|   |   `-- index.js
|   |-- email
|   |   |-- [id].js
|   |   `-- index.js
|   |-- forgotPassword.js
|   |-- orders
|   |   |-- [id]
|   |   |   |-- access-token.js
|   |   |   |-- index.js
|   |   |   |-- order_items.js
|   |   |   |-- pay.js
|   |   |   |-- returns.js
|   |   |   |-- shipments.js
|   |   |   `-- status.js
|   |   |-- create-order-response.json
|   |   `-- index.ts
|   |-- productVariants.js
|   `-- products
|       `-- [productId]
|           `-- reviews.js
|-- contactUs.js
|-- email
|   `-- order_confirmation.js
|-- mailchimp
|   |-- ping.js
|   |-- subscribe.js
|   `-- unsubscribe.js
|-- mongodb
|   |-- carts
|   |   |-- [id]
|   |   |   `-- index.js
|   |   `-- index.js
|   |-- orders
|   |   `-- index.js
|   |-- paypals
|   |   `-- index.js
|   `-- transactions
|       `-- index.js
|-- omnisend
|   |-- carts
|   |   |-- [id]
|   |   |   `-- index.js
|   |   `-- index.js
|   |-- customers
|   |   `-- index.js
|   |-- newsletters
|   |   |-- cnvsSubscription.js
|   |   |-- cnvsSubscriptionCNVS.js
|   |   |-- cnvsSubscriptionHome.js
|   |   |-- distroPlateSubscription.js
|   |   |-- keebSubscription.js
|   |   |-- newsletterSubscription.js
|   |   `-- pushConnectSubscription.js
|   `-- orders
|       `-- index.js
|-- password-reset.js
|-- paypal-save-drowning-transactions-polling.js
|-- ping.js
|-- product-registrations
|   |-- [id]
|   |   `-- index.js
|   |-- index.js
|   `-- ssr.js
|-- products
|   |-- [productId]
|   |   `-- images
|   |       `-- [sku]
|   |           `-- index.js
|   |-- dropdown.ts
|   `-- index.ts
|-- rebuild.js
|-- salesInquiry.js
|-- sanityQuery.js
|-- sanityUpdateLandingPagesLinks.js
|-- shipStation
|   `-- getRates.js
|-- tax-rule.js
|-- tax.js
|-- trpc
|   `-- [trpc].ts
`-- user
    |-- email
    |   |-- index.js
    |   `-- verification.js
    `-- password
        |-- index.js
        `-- reset.js

Both the PUT and PATCH actions are used for updating a specific instance. In recent times, PUT and PATCH are considered to be interchangeable. Typically, PATCH is utilized for updating an existing entity with new information, but it cannot be used to update a non-existent entity. On the other hand, PUT is used to set an entity's information entirely. It functions similarly to POST, except that if the entity already exists, it will be overwritten, and if it does not exist, it will be created.

PUT is a technique of altering resources when the client transmits data that revamps the whole resource. PATCH is a technique for transforming the resources when the client transmits partial data that will be updated without changing the whole data. Imagine there is a hole on your pants, you'd like to patch the hole with a piece of fabric.

In the case of Omnisend, it adheres strictly to the RESTful conventions. On the other hand, Bigcommerce, as described in its API reference, only employs the PUT method for updating instances.

Process

Starting a coffee machine is like initiating a process of coffee generation, where clicking the start button initiates the process. Similarly, starting a Next.js project involves running the command npm run dev or yarn dev, which is akin to clicking a start button. This command serves to initiate the server and, just as a coffee machine can generate multiple cups of coffee, the server can be restarted multiple times.

A coffee machine is the tool used to produce coffee, and coffee is the actual product that is produced. Native speakers are the people who produce spoken English, and spoken English is the actual language produced. A camera is the tool used to produce photos, and photos are the actual images produced.

In this sense, the coffee machine and coffee, as well as native speakers and their spoken English, and a camera and photos, can be thought of one is used to produce the other.

The analogy of a coffee machine and coffee can be used to compare the source code of a website to the process that starts the server. The source code can be seen as the blueprint for the website, just as the coffee machine is the blueprint for making coffee. The process that starts the server can be seen as the actual running of the website, just as the coffee that is produced is the result of the coffee machine being activated.

Here are a few examples of processes in addition to web servers (We already are familar with web):

A database process, which manages the storage and retrieval of data in a database
A word processing process, which creates, edits, and saves text documents
A media player process, which plays audio and video files
A game process, which runs a computer game
A mail server process, which manages the sending and receiving of email messages
A web browser process, which allows a user to view and interact with web pages
A compiler process, which converts source code into executable code

These are just a few examples, but there are many other processes that run on a computer and perform a variety of tasks. The key thing to remember is that a process is simply a program that is executing and performing a specific task.

PORT

A port is a logical connection point for network services, such as an application or a web server. In computer networking, a port is a communication endpoint for sending or receiving data across a computer network. Each port has a unique number, known as the port number, which is used to identify the service or application running on that port.

When you start a web server, you need to specify a port number for the server to listen on. Commonly used port numbers for web servers include port 80 for HTTP traffic and port 443 for HTTPS traffic.

In your example, if you want to start a server on port 3000, you would run the command node index.js 3000, or similar, where index.js is the entry file for your application. Similarly, to start a server on port 3300, you would run the command node index.js 3300, and to start a server on port 3500, you would run the command node index.js 3500.

In the context of a Next.js project, you might start the development server with the command npm run dev or yarn dev, which by default starts the server on port 3000. However, you can specify a different port number by passing it as an environment variable, like this: PORT=3300 npm run dev or PORT=3300 yarn dev.

Simple Node.js Web Server on Port 3000

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

In this example, the http module is required, and the server is created using the createServer method. The server listens on the specified hostname (in this case, 127.0.0.1, which is the localhost) and port (in this case, 3000). When the server is started, a message is logged to the console to indicate that the server is running and listening on the specified host and port.

Webserver and Process

In the example, the Node.js web server is similar to a process in that it runs and performs a specific task. The process in this case is serving web content in response to HTTP requests.

Like any process, the web server can be started and stopped, and it can be run on a specific port, which in this case is port 3000. When the web server is started, it listens for incoming HTTP requests on the specified port and responds to those requests by sending back the specified content (in this case, "Hello World").

So, in summary, the Node.js web server can be thought of as a process that performs the task of serving web content in response to HTTP requests.