It’s often to take over a web product for frontend-side from colleagues during work. When you’re on-boarding a company for a web frontend engineer role, you may find you situated in a misted forest. You may not see people or cowork with them, because there have some reasons such as they just quit the job or switch to another poducts.

In modern frontend develop conventions, there are somethings you can catch during taking over.

1. You must make sure versions of Node and NPM. Find out whether there has .nvmrc file in frontend repo or not. If it has .nvmrc file, content in .nvmrc means the version of Node for this repo and environment at local development use Node Version Manager to manage multiple versions of Node execution.
2. If this repo has yarn.lock file, it represents this repo use Yarn, which is another kind of node package manager, to install and uninstall packages. It also means build/compile code for dev/staging/production environments with yarn.
3. In package.json file, you can find out two important parts: dependancies and scripts:

• dependancies often indicates packages, library or frameworks are used in this repo such as typescript, angular, rxjs, nebular, ionic, redux, redux-observable, jest, testcafe or cypress. You can quickly understand packages environment for execution. devDependancies also often companies with that, and devDependancies shows packages only be used in a local development environment. It’s better to lock versions of packages for preventing or eliminating supply-chain attack in the future.
• scripts lists scripts for many purposes such as exection at local development environment, building code, and testing code automatically for dev/staging/production environments. Please make sure:
  • What tasks in scripts do still in use?
  • What tasks in scripts are broken and need to fix? Especially for e2e testing towards different environments such as dev, staging and prodution.

4. Find out what state management package the product(s) use.

• In React ecology, redux, react-redux, redux-observable, redux-thunk, redux-saga are common packages used for centralized state management.
• In Vue, vuex is a remarkable one.
• In Angular, ngrx is the one.

5. Make sure whether the product is PWA or not. If it is, you need to understand how to develop, and maintain the product with PWA.

• service worker, please figure out resource cache policies about image, video, and ajax request
• push notification such as firebase cloud messaging

6. Make sure whether websocket is involved in the product. If the product uses websocket as its part of functions, it often means the product require high interactivity between network intercommunications so it uses websocket for saving extra network construction overheads with respect to tradictional one-shot request-response behavior.

• It would be great if you learn first what authenticate and authorization mechanism of websocket in this product.
• Common caveat is unexpected disconnection between browser and server. It’s hard to debug root cause of this situation if you don’t realize full picture of heart-beat and the product communication infrastructure. If the product communication instrustructure is setup in your serving company, which is known as on-premise, you can first inspect whether the rules of firewall are changed, added or deleted recently or not. If there is conflict between connection keep-alive timeout rule of firewall and websocket heartbeat interval, you must resolve them.

7. Find out whether the product is using user tracking tools/libraries such google analytics, amplitude, and hotjar.

• In medium and large company, my advice is to figure out what web performance metrics do the department of the company care in the past and also since now. You can snapshot scores of them when you’re on boarding in you handnote. After joining this corporation around 3 or 6 months, you can conduct score evaluation again and then find what you achieve or contribute from score comparison.
• Metrics are diversify such as LCP, FCP, and mobile friendly, …etc. Their importances depend on what kind or target audience of a company it wants. It’s common and continuous to pursuit better scores for a company of to-customer business.

8. Troubleshooting tools/libraries such as datadog and sentry.