Frontend development tips

Question 1

Why onSuccess/onError removed from useQuery

Answer 1

• An additional render cycle
• The callbacks might not run (cache)

soultion: onDataChanged in effect

https://tkdodo.eu/blog/breaking-react-querys-api-on-purpose#state-syncing

Question 2

How can slow down the browser speed?

Answer 2

Chrome DevTools > Performance Tab
CPU = 4 *slow down or …

Question 3

Which size metric is most relevant when considering the impact of a JavaScript library on a project?

Answer 3

The minified and gzipped size is the most relevant metric as it reflects the compressed size of the JavaScript code for efficient network transfer and optimal page loading.

https://bundlephobia.com/

Question 4

what’s the categories for a system design in frontend side

Answer 4

• features
• non-functional requirements
• user experience
• engineering
• back in API

Question 5

what things are considered in features category FE sys Design

Answer 5

• MVP
• high-level estimation
• core functionality

High level estimation
data volume , Peak traffic

Question 6

what items are included in non-functional requirements in front end system design

Answer 6

• performance
• offline mode
• security
• high availability

performance
* Cache
* CDN
* load on demand or preload
* page spliting

offline mode
* local storage
* indexedDB

security
* xss
* csrf

high availability
* load balancer
* health check

Question 7

Explain how JavaScript handled multiple files before the introduction of modules. What were the downsides of this approach?

Answer 7

multiple files could be included in a web page using multiple

 tags in HTML

all scripts loaded onto the same page shared the same global scope. This meant that scripts had to be careful not to overwrite each other’s variables and functions, leading to potential conflicts and bugs

Question 8

Describe the role of the “host” in the context of TypeScript module resolution and provide examples of different hosts.

Answer 8

the “host” is the system that ultimately consumes the output JavaScript code and directs its module loading behavior.

The TypeScript compiler models the behavior of the host to ensure correct module resolution and type checking

.Examples of different hosts:
Node.js Runtime
Bundlers
Web Browser

Question 9

Webpack?

Answer 9

Webpack is a popular module bundler
- it compiles files into static assets that browsers can easily serve
- It handles bundling, transpiling, and optimizing assets js/css/img

performance optimization:
- code splitting, tree shaking, minification

Question 10

what’s tree shaking?

Answer 10

-elimiate not used imports , varaibles, functions (* as lodash)
- less as possible

• in v5 - comes by default
• it only works with es6 static imports (not dynamic)
• not works with common js (require) it’s dynamic

Question 11

css in js , cons, pros

Answer 11

like styled-components

• • scoped styles
• • dynamic styling
• • performance runtime overhead,
• • learning curve
• • you can not cache the css files
• • makes bundle bigger
• • harder to debugg
• webpack, extract those classes and attaches in html dom in runtime