1. Explain the Tool Set
Node.js - Engine for tools
Let's start with node.js. From the project website:
Most tools (that we will be use) to build web apps are created in JS, and Node.js is a runtime to run this tools. It isn't the best runtime, but it is the most popular. We have some alternatives like deno or bun, but the tools that we use, didn't migrate to them.
How to start with node.js? You can just go to main page of project nodejs.org and download one of the version: LTS or Current. Current is the latest release with all new features and you should choose this version if you planning use them. LTS provide longer time for support and good for project that need to survive more than year.
But you shouldn't install node form this website. When you start working of one project it is not a problem, but if you working new ones and support old ones, you will have trouble, because older projects won't be able to work on newer version of node.
There is solution: Node version management tool. I used nodenv, it is light, work pretty fast, and what I need to do with all my project it is to add file
.node-version with version number as a value.
nodenv install and version for this project will be downloaded. But for newest project I use
pnpm as package manager (I explain this later) that also provider functionality for node version management, in very simpler way, only needing to be added property
.npmrc we don't need to do anything else.
pnpm take care to download proper version in the background.
Of course if you starting from scratch and you want generate some project, you can setup global version of node using
nodenv global 18.12.1 or
pnpm env use --global 18.12.1 that will be used in that cases.
PNPM - Package manager
The big advantage of JS development is
npm registry, that contain very large amount of code packages, that you can easily use in your project. That's what package managers are for. The default one is
npm, it's stable and working, but have some problems with
node_modules like for each project can exist the same set of libraries (and some of this problem are under development). But second amazing thing around JS world are alternatives like:
For newest project I use
pnpm, because solve problems of
node_modules (you can read more in pnpm motivation), but also add some features that help during development, like: managing Node.js versions, patching dependencies.
If you decided to stay on Windows with environment, you should remember to enable in
Privacy & security =>
For developers =>
pnpm relay on symlinks, that are disable in normal mode for not admin terminal.
Vite - Frontend Tool
And the last kind of tools that you need to know is frontend tool such as Vite. This tool allow you to serve your code during development, and bundle js, css and other assets together for production. You can learn more from video Vite in 100 Seconds
TypeScript - Language
When I started working at my team we the first fronted projects was done in
TypeScript show you this errors during development.
- Fancy code - Strange coding that isn't self explaining. Using
TSyou can describe all fancy code that you can write in
JS, but when is difficult to type something, the red flag in your mind should appear and code should be rewritten.
- What I have in that place - something you need display new information, and we don't know if that info already is in that place and debugging is needed to add small info.
- Typos - There were some missing info because the field in an class have different name.
- Auto complete in
JSmore like guessing - in
But all this features have a cost: you need to learn how to type, for beginning development in
TS will be much slower (in my case I typed to much).
React - for building user interfaces
The library for web and native user interfaces
MobX - for state management
Simple, scalable state management.