Pillars of Web Development
In all simple words there are 3 main tasks that a web application should do. One is be able to manipulate DOM. Create interactive events with the user. Communicate with the server, either sending or receiving data. Let’s go over manipulating the DOM. What is DOM? DOM = Document Object Model. In here we have all our HTML tags. The entire document is also referred to as the DOM tree. The HTML tags, called Nodes, branch off into different sections, each containing either branching off to more nodes or data. Here are two examples, one in code and the other being the DOM tree. The left being the actual Document Object Model(HTML file) and the right being the DOM tree representation of the file.
The second pillar would be the Events. Events is the interaction of the user with our web app. There are certain things inside of the website that allow the user to add items to a cart, like a picture, go to a profile, etc.. These so called events, are what help the web app determine what the user is doing, by sending data when something is clicked on, or hovered over, or even by pressing keys in the keyboard. The data is then transferred to another part of the application that activates another function and gives the user back a response. These events, are called “event listeners”, they are ‘listening’ for user interaction inside of the web application. The following are the types of “listeners” you can use with the “.addEventListener” method:
Adding a like to a picture, post, comment…
Even placing the cursor over an area could create an effect, like this submit button only having a white border and when you hover over it makes it fill in white.
The last is being able to communicate with the server. In other words being able to send and receive information between the user and the database. For example, if a user wants to create an account on a website, we need to be able to store the information that they type in. Being able to save all that information into a database will be very important. It will also be necessary to retrieve all of that information from the database. You could use the method fetch. It gets access into an API or database and in return you can make HTTP Requests to it, in order to interact with the data.
For example when you log into an account, we need to access data from a database to compare the username/email and password to make sure the information you typed in already exists and is correct.
At it’s most basic form this is what the web application needs in order to work properly and have a good user experience. It needs to able to manipulate DOM elements, “listen” to events or user interactions, and be able to send or receive data between the user and the database.
