Table of Contents
The skill-sharing website from chapter 21 of the famous book about JS - "Eloquent JavaScript", with a few additional features.
Before cloning and using this application, you'll need to install these things on your computer:
- Node.js: a single-threaded, open-source, cross-platform runtime environment for building fast and scalable server-side and networking applications. It runs on Chrome's V8 JavaScript runtime engine, and it uses event-driven, non-blocking I/O architecture, which makes it efficient and suitable for real-time applications.
- node-static: a simple, rfc 2616 compliant HTTP static-file server module for Node.js, with built-in caching. You can install this package by typing this command in terminal:
npm install node-static
- Visual Studio Code: You can choose any IDE or Text Editor that you want. To build a simple application like this, I recommend Visual Studio Code.
You can install this application by cloning this repository into your current working directory:
git clone https://github.com/theEmperorofDaiViet/skill-sharing-website.gitAfter cloning the repository, you can open the project by Visual Studio Code.
Open a terminal and type this command:
node skillsharing_server.jsThen open a browser window for http://localhost:8000/ to go to the skill-sharing website! I chose port 8000. You can switch to another port by changing the port number in /skillsharing_server.js.
A skill-sharing meeting is an event where people with a shared interest come together and give small, informal presentations about things they know. At a gardening skill-sharing meeting, someone might explain how to cultivate celery. Or in a programming skill-sharing group, you could drop by and tell people about Node.js. Such meetups are a great way to broaden your horizons, learn about new developments, or simply meet people with similar interests.
Our goal is to set up a website for managing talks given at a skill-sharing meeting. Imagine a small group of people meeting up regularly in the office of one of the members to talk about unicycling. The previous organizer of the meetings moved to another town, and nobody stepped forward to take over this task. We want a system that will let the participants propose and discuss talks among themselves, without a central organizer.
There is a server part, written for Node.js, and a client part, written for the browser. The server stores the system’s data and provides it to the client. It also serves the files that implement the client-side system.
The server keeps the list of talks proposed for the next meeting, and the client shows this list. Each talk has a presenter name, a title, a summary, and an array of comments associated with it. The client allows users to propose new talks (adding them to the list), delete talks, and comment on existing talks. Whenever the user makes such a change, the client makes an HTTP request to tell the server about it.
The application will be set up to show a live view of the current proposed talks and their comments. Whenever someone, somewhere, submits a new talk or adds a comment, all people who have the page open in their browsers should immediately see the change. This poses a bit of a challenge - there is no way for a web server to open a connection to a client, nor is there a good way to know which clients are currently looking at a given website. A common solution to this problem is called long polling, which happens to be one of the motivations for Node’s design.
When a request matches none of the request types defined in our router, the server must interpret it as a request for a file in the 📂public directory. I used node-static - a solid, well-tested static file server from NPM. This isn’t the only such server on NPM, but it works well and fits our purposes.
The skill-sharing server in v1.0.0 keeps its data purely in memory. This means that when it crashes or is restarted for any reason, all talks and comments are lost. In v1.1.1, the server was extended so that it stores the talk data to disk and automatically reloads the data when it is restarted.
The wholesale redrawing of talks works pretty well because you usually can’t tell the difference between a DOM node and its identical replacement. But there are exceptions. If you start typing something in the comment field for a talk in one browser window and then, in another, add a comment to that talk, the field in the first window will be redrawn, removing both its content and its focus. In a heated discussion, where multiple people are adding comments at the same time, this would be annoying. v1.2.0 solved it.
v1.3.0 provided a little more friendly user interface.
Here is an example to illustrate the features of this application:
I open two windows in two different browsers to illustrate two user of the skill-sharing website: an user named "Node Guru" in Microsoft Edge, and an user named "Anon" (the default name) in Google Chrome:
- First, in Microsoft Edge, Node Guru creates a new talk with title: "Node.js" and summary: "Get started with Node.js".
- I switch to Google Chrome, where Anon can see the new talk and add a comment to that talk: "Oh, it's exactly what I need!".
- Back to Edge, Node Guru's seen the comment of Anon. He reply by a comment: "You're welcome. I hope I can help anyone who is interested in Node.js". But he hasn't submit it yet (by clicking the Add comment button).
- At the same time, in Chrome, Anon is typing his second comment: "Thank you very much!", then submit it. (I get back to Edge in a moment to show that the comment of Node Guru still hasn't been submited)
- Then, back to Edge again, the second comment of Anon is shown. And the comment which hasn't been submited of Node Guru is still here. Now he submit it.
- Finally, for some reasons, Node Guru decides to delete the talk he created. It disappears in Edge, and Chrome for sure.
You can contact me via:
