In late fall of 2020, I went on a mission to better understand Node. I wanted to improve the way I use it, how I might be able to use more of its features, and moreover grow my front end knowledge to full stack. This series includes the notes I've compiled from my learnings over at The Odin Project. The lessons also include general web concepts necessary to better work with Node.
A continuation of fundamentals, I'll now be diving into what Node does for websites and why we would want websites like these in the first place.
Code running in the browser is known as client-side code and is primarily concerned with improving the appearance and behavior of a rendered web page. Server-side web programming involves choosing which content is returned to the browser in response to requests. The server-side code handles tasks like validating submitted data and requests, using databases to store and retrieve data and sending the correct data to the client as required. Node is a server-side web language.
💡 Servers can store and use information about clients to provide a convenient and tailored user experience.
A server is a computer that is connected directly to the internet. The computers we use regularly are called clients because they are connected indirectly to the internet via an ISP. Servers allow you to access information from databases or file storage.
Web browsers communicate with web servers using the HyperText Transfer Protocol. When you click a link on a web page, submit a form, or run a search, an HTTP request is sent from your browser to the target server.
An HTTP request includes:
- a URL identifying the affected resource
- Method that defines the required action (to get, delete, or post the resource)
- May include additional information encoded in URL parameters (the field-value pairs sent via a query string), as POST data (data sent by the HTTP POST method), or in associated cookies.
💡 These GET/POST/HEAD methods cost differently, some are more 'expensive' operations than others
Web servers wait for client request messages, process them when they arrive, and reply to the web browser with an HTTP response message. The response contains a status line indicating whether or not the request succeeded (e.g.
HTTP/1.1 200 OK for success).
The body of a successful response to a request would contain the requested resource. This could be a new HTML page, an image, etc, which could then be displayed by the web browser.
Frameworks are collections of functions, objects, rules and other code constructs designed to solve common problems, speed up development, and simplify the different types of tasks faced in a particular development stream. Client-side frameworks are often used to help speed up development of client-side code, but you can also choose to write all the code by hand. In fact writing your code by hand can be quicker and more efficient if you only need a small, simple web site UI.
In contrast, you would almost never consider writing the server-side component of a web app without a framework. Implementing a vital feature like an HTTP server is really hard to do from scratch in say, Python, but Python web frameworks like Django provide one out-of-the-box, along with other very useful tools.
Checkout the section titled A few good web frameworks? to learn more about the advantages of using some of the more popular frameworks out there.
- Static sites return the same hard-coded content from the server whenever a particular resource is requested.
- Dynamic sites are ones in which some of the responding content is generated only when needed. Dynamic sites can highlight content that is more relevant based on user preferences and habits. It can also make sites easier to use by storing personal preferences and information, like reusing stored credit card details to streamline subsequent payments.
Perhaps the most significant benefit of server-side code is that it allows you to tailor website content for individual users.
If you want to build a small, static page, one that requires no information be stored from any interactions and receives the same hard coded content.
- Generating dynamic page content
- Creating, opening, reading, writing, deleting and closing files on the server
- Collecting form data
- Adding, deleting, and modifying data in your database
Onto the next section, where we'll now get to see Node in action.