WDX-180
Web Development X
Week 20 | Node JS
Week 20 - Day 1 | Node JS
Schedule
- Lecture: Node JS
- Practice
- Work on Project (Group/Personal)
Week 20 - Day 2 | Group Project
Schedule
- Work on Project (Group/Personal)
Week 20 - Day 3 | Node JS
Schedule
- Lecture: Node JS
- Practice
- Work on Project (Group/Personal)
Week 20 - Day 4 | Tiny Server Refactoring
Schedule
Study Plan
In this exercise we are going to study and refactor the code of a tiny Web Server that uses the built-in node:os module to return system information back to the user. Our aim is to detect parts of the code that can be improved and detect any code smells that can be removed.
“A code smell is a surface indication that usually corresponds to a deeper problem in the system.” ~ Martin Fowler
Requirements:
- Fundamental knowledge of Node.js
- Familiarity with the
node:os,node:fsandnode:httpbuilt-in modules. - Familiarity with the basic Web Server boileplate
Here’s the plan…
1) First, let’s start by watching a series of short videos from Jacob Sorber on Code Smells:
- Smelly code and long functions
- Smelly code and bad names
- Code Smells: Duplicate Code (DRY)
- Smelly code and Magic Numbers
This will take you around 20 minutes. After you’ve finished watching these videos, take a piece of paper and write down what you’ve learned in the form of a checklist.
Exercises
2) Download, study and run the following code:
Source code here or here (index.js) and here (style.css).
This is a Node.js app, so you must execute the code using the node command from the terminal:
node index.js
See if you can find any code smells and ways to improve the code based on the newly acquired knowledge before moving forward. Make sure to take a short break before moving on. 🚶♀️
3) Watch the Code Review and refactor accordingly
Watch this video and then apply the same refactoring to the original source code.
Once you’ve finished code refactoring, can you spot any more code smells?
There’s still a lot to be improved.
4) New requirements!
The boss came up with some new requirements for the project!
Here are the new features you must implement on the refactored code:
The System Overview page should look like this:
As you can see, the boss is kind of a visual guy.
Good luck!
Questions, comments, suggestions? Please leave them on the comment section below.
Sources and Attributions
- Initial Node.js code: Alex Kokh
Week 20 - Day 5 | Node JS
Schedule
- Lecture: Node JS
- Practice
- Work on Project (Group/Personal)
Weekly feedback: Hey, it’s really important for us to know how your experience with the course has been so far, so don’t forget to fill in and submit your mandatory feedback form before the day ends. Thanks you!