FrontEnd Flashcards
What is a dependency Graph?
A dependency Graph is used by Module bundlers like Webpack, in order to organize modules into bundles and optimize the build process
What is being sent to the server in each request?
Cookies
Maximum Size of a cookie is?
4kb
What kind of storage is being automatically emptied when the tab or window is closed?
Session Storage
What kind of storage is being persisted even when the browser window is closed?
Local Storage
Do cookies have an expiration date?
yes
What is a polyfill?
A polyfill is a piece of code used to provide modern JS functionality on older browsers that do not natively support it.
adding polyfills to a bundle increases the bundle size, and decreases web performance.
You are developing a web app for a browser that does not support modern JavaScript features but you want to use them. You set up Babel to transpile the code before you ship it. Which of the following is a downside in production?
Bigger bundle size due to all the polyfills the transpiler will add
The process through which the module bundler removes unused dependencies(dead code) is called:
Tree shaking.
Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module syntax, i.e. import and export.
What is the default behavior of a click on the submit button of a form in the web browser?
A GET request to the same path with the form content in the body and a page refresh
To be able to debug in production(after the code was compressed, uglified and minified) we need to:
Emit Sourcemaps from our build process.
Sourcemaps are files with names ending with .map (for example, example.min.js.map and styles.css.map) that map your compiled code back to the original code.
They can be generated by most build tools, for example, Vite, webpack, Rollup, Parcel, esbuild, and more.
Tree-shaking will only work if:
We use ES6 imports(import/export) that allow for static module analysis
ES6 module syntax (import and export) is static, meaning the imports and exports are defined at compile-time rather than runtime. This static nature allows build tools like Webpack or Rollup to determine which exports are used by the importer and which aren’t, thus enabling them to drop the unused exports from the final bundle.
CommonJS modules, which use require and module.exports, are dynamic because imports are resolved at runtime. This dynamic resolution makes it difficult or impossible for static analysis tools to safely determine which parts of a module are unused. As a result, CommonJS is not suitable for tree-shaking.
by code “uglification” for production we mean(2 options apply):
Remove unnecessary characters like the new line character or the whitespace character.
Renaming variables to shorter names(a.k.a. obfuscation)
.
How do we solve accessibility issues as part of our code quality process?(2 apply)
Running Accessibility checks with tools like the AXE Plugin
.
Setting up the a11y linter to catch accessibility issues in the IDE(HTML, JSX, etc)
🟡 4.1 When should you decide to “lift state up” to a higher component?
When two different child components need or modify the same state
What are the disadvantages of using too much global state? (3 options apply)
State pollution risk.
Decrease Performance.
Reduce in component reusability
JSX code will transpile to?
A recursive chain of calls to React.render
A JSX snippet transpiles to a recursive call to React.create element. The result of those recursive calls will be a virtual DOM structure that will be synchronized with the real DOM(reconciliation). You can check the transpilation result in the babel editor.
How do we make components easier to test?
Use as little state as possible.
Keep component dependencies minimal.
Avoid using global state(unless necessary)
Composition Over Inheritance is an OOP principle that states …
We can reuse code by grouping classes or components in higher order structures
Composition over inheritance is the principles that states we can add more functionality to a specific class/component by bundling it with others rather than making it extend a certain parent. Is the principle at the core of modern SPA frameworks like React, Vue or Anguar.
The relationship between the app state and what we see on the screen is deterministic. That means
For each version of the state, there is a unique version of the UI
The Virtual DOM is a design pattern used by SPA frameworks to …
Make DOM updates faster by batching them
State should be placed:
Placed as close to the elements using/changing it as possible.
The product manager complained a web application is slow which frustrates users. What is the first step to fix it?
Running an Core Web Vitals analysis with tools like Lighthouse to understand where the perception of “slow” comes from
Code splitting is an optimization technique that:
Divides the output bundle in smaller pieces that can be loaded in parallel or lazy loaded for better performance