Zhaoyu's Frontend Engineering and Web3 Documentation

Babel is a JavaScript compiler that converts ECMAScript 2015+ (ES6+) code into backward-compatible JavaScript for older browser environments. It provides three primary capabilities: syntax transformation, polyfilling for missing built-in functions/methods, and source code transformation.

Core components include:

• @babel/core: The central functional engine of Babel. Required for all Babel operations.
• @babel/cli: The command-line interface providing the babel command for project-level builds.

Flexbox (Flexible Box Layout) is a CSS3 layout model designed to provide an efficient way to layout, align, and distribute space among items in a container, even when their size is unknown or dynamic.

Key concepts:

• Flex Container: The element that adopts display: flex.
• Flex Item: The direct children of a flex container.
• Main Axis: The primary axis along which items are laid out (horizontal by default).
• Cross Axis: The axis perpendicular to the main axis (vertical by default).

Important Caveats:

• When using Flexbox, the float, clear, and vertical-align properties on child elements will be ignored.
• For WebKit-based browsers, the -webkit- prefix may be required for some properties.

HTML5 introduces several powerful capabilities for modern web applications:

• Canvas: A scriptable canvas for drawing 2D graphics and animations (used by libraries like Echarts).
• Geolocation: API to retrieve the user's current latitude and longitude.
• WebSocket: A protocol providing full-duplex communication channels over a single TCP connection.
• Hardware APIs: Access to device features like gravity sensors (accelerometer), camera, and contacts.
• Manifest (Offline Cache): Allows caching page resources locally so the site can be viewed while offline.

Concurrent Rendering introduces the ability for rendering to be interruptible. Unlike previous versions where rendering was blocking, React 18 can pause a render to prioritize high-priority tasks (like user input) and resume later. This is a scheduling improvement on the single-threaded JS main thread, not true parallelism.

Key APIs for managing concurrency include:

• useTransition
• useDeferredValue
• Suspense (for asynchronous UI)

Native tokens (like ETH) are defined at the blockchain protocol layer, whereas ERC tokens are defined at the smart contract layer.

• Native Tokens: Do not rely on smart contracts. They are used primarily for Gas fees and network staking. They do not follow ERC interface rules.
• ERC Tokens: Created via smart contracts. They follow standardized interfaces (like ERC-20) to ensure compatibility across wallets, DApps, and exchanges.

The Vue 2.0 rendering process follows these four primary stages:

1. init: Initializes state, including data hijacking for objects and arrays.
2. $mount: Locates or creates the render method. The flow is: el → template → AST object → codegen (generates string code) → render function.
3. _render: Executes the render function to generate the Virtual DOM (vnode).
4. _update: Converts the Virtual DOM into real DOM nodes and replaces the old DOM elements to complete the initial render.

Web3 frontend development differs from traditional development in five key areas:

1. State Source: State comes from both traditional backends/databases and on-chain smart contracts.
2. Interaction Model: Reading data uses RPC calls; writing data requires transactions.
3. Identity: User identity is defined by their wallet address and cryptographic signatures rather than accounts/passwords.
4. Failure Models: Transactions can be pending, revert, or fail due to insufficient gas.
5. Security Model: Developers must protect users against malicious signatures and phishing transactions.

Micro-frontends are an extension of frontend engineering designed for large-scale organizational collaboration. They address challenges such as high code coupling in monolithic projects, the difficulty of upgrading legacy technology stacks, and the need for independent development and deployment across different teams.

Key Values:

• Increases team autonomy.
• Reduces single-point-of-failure risks for the main application.
• Enables incremental migration of legacy systems.

Trade-offs and Costs:

• Increased architectural complexity.
• Complexities in sub-application communication, style isolation, route coordination, and shared dependency management.
• Higher operational and monitoring costs.

Recommendation: Micro-frontends are suitable for large organizations and complex business logic; they are not recommended for small projects.

The Same-Origin Policy is a security measure implemented by browsers that restricts how a document or script loaded from one origin can interact with a resource from another origin. A request is considered 'same-origin' only if the following three elements are identical between the current page URL and the requested resource URL:

1. Protocol (e.g., http vs https)
2. Domain or IP address
3. Port number

SOP restricts access to:

• Storage: Cookies, LocalStorage, IndexedDB
• DOM nodes
• AJAX responses (the browser intercepts the result if the request is cross-origin)