DOCSEARCHbyAlgolia
Submit Docs

JZZX Frontend Ecosystem Documentation

website·Indexed 29 days ago

https://relaxed-adny.netlify.app/

A comprehensive technical guide covering frontend development, including JavaScript (ES6-ES12, Promises, Event Loop, this), TypeScript advanced syntax, NestJS core concepts (IOC, AOP, MVC), data structures (Linked Lists, Stacks, Queues), and sorting algorithms. It also provides code specifications for ESLint, pnpm, nvm, and build tools like Vite, Webpack, and esbuild.

Tokens
34.4K
Snippets
202
Records
243
Agent score
72%

What's inside JZZX

  1. Understand the difference between Imperative and Declarative UI frameworks

    UI frameworks are generally categorized as either Imperative or Declarative.

    Imperative Frameworks (e.g., jQuery) focus on the process. The developer explicitly describes every step required to achieve a result, creating a one-to-one mapping between the logical steps and the code.

    Declarative Frameworks (e.g., Vue) focus on the result. The developer describes what the final state should look like, and the framework handles the underlying process of achieving that state. While the internal implementation of a declarative framework is imperative, the API exposed to the user is declarative.

    // Imperative approach (jQuery): Focuses on the process
$('#app')
  .text('Hello World')
  .on('click', () => alert('ok'))

// Declarative approach (Vue): Focuses on the result
<div id='app' @click=() => alert('ok')>hello World</div>

  2. Understand the performance trade-off between imperative and declarative code

    In framework design, there is a fundamental trade-off between performance and maintainability. Imperative code allows for maximum performance optimization because the developer explicitly defines exactly which properties need to change, avoiding unnecessary overhead. Declarative code, while significantly improving maintainability by removing manual DOM manipulation, introduces performance overhead because the framework must calculate the difference (diffing) between the previous and current states to determine what needs to be updated.

    Mathematically, if 'a' is the performance cost of calculating the difference and 'b' is the cost of the actual update, the total overhead of declarative code is 'a + b', whereas imperative code only incurs cost 'b'.

    // Imperative approach: Direct and high performance
div.textContent = 'vue3';

// Declarative approach: Describes the desired state
// Before: <div @click=() => alert('ok')>hello world</div>
// After:  <div @click=() => alert('ok')>hello vue3</div>
// The framework must diff these states to eventually execute: div.textContent = 'vue3'

  3. Pinia vs Vuex: Code Splitting and Architecture

    Pinia improves upon Vuex by utilizing a decoupled store design. While Vuex often bundles all stores into a single JS chunk regardless of usage, Pinia checks dependency references during bundling. If a page only requires one specific store, only that store and the page are bundled into the JS chunk, reducing resource waste and improving load times.

  4. Understand Linear Data Structures

    A linear structure is a finite sequence consisting of n data elements where there is a one-to-one relationship between the elements. Common examples include arrays and linked lists. Some linear structures are 'restricted,' meaning they limit where data can be inserted or deleted, such as stacks and queues.

  5. Understand AOP (Aspect-Oriented Programming) in NestJS

    Aspect-Oriented Programming (AOP) is a programming paradigm used to separate cross-cutting concerns—such as logging, permission control, and exception handling—from the core business logic. In a typical request flow (Controller → Service → Repository), AOP allows developers to inject generic logic before or after these stages without modifying the business code itself. This ensures that business logic remains pure and that generic logic can be reused or dynamically modified.

  6. Understand Virtual DOM performance trade-offs

    Virtual DOM is designed to minimize the performance cost of finding differences between state changes, allowing declarative code to approach the performance of imperative (native JS) code.

    Key performance characteristics:

    • Theoretical Limit: Virtual DOM cannot be faster than perfectly written native JS DOM operations because it introduces an additional step: calculating the difference (diffing) between the old and new virtual trees.
    • Practical Value: Writing high-performance imperative code is manually intensive and error-prone. Virtual DOM provides a high performance floor with significantly lower developer effort and better maintainability.

  7. Understand the relationship between CPU, Registers, and RAM

    The CPU and memory structure can be understood through the following components:

    • Registers: Act as 'short-term memory' within the CPU for immediate data access during computation.
    • ALU (Arithmetic Logic Unit): The component responsible for reasoning and mathematical calculations. It typically takes values from two registers, performs an operation, and stores the result in a third register.
    • RAM (Random Access Memory): Acts as 'long-term memory' relative to the CPU, storing both data and programs. It is characterized by constant access time regardless of the memory address.
    • Program Counter (PC): A pointer that tracks the address of the next instruction in the instruction space, driving the execution flow of the program.

  8. Understand Inversion of Control (IoC) for dependency decoupling

    Inversion of Control (IoC) is a design pattern used to decouple dependencies between objects in a system. In traditional programming, objects create their own dependencies internally (e.g., a Controller instantiating a Service using new), leading to high coupling and poor maintainability. With IoC, the responsibility of creating and injecting dependencies is moved outside the object. This allows dependencies to be managed externally, making the system more flexible and easier to maintain because changes to one object do not necessarily force changes in all dependent objects.

  9. Understand pnpm's security and dependency isolation

    Unlike npm and yarn, which use a flat node_modules structure that allows projects to access undeclared transitive dependencies (phantom dependencies), pnpm uses a unique dependency management system. This ensures that a project can only access dependencies explicitly declared in its package.json, preventing illegal access and increasing stability.

  10. Understand the Queue data structure

    A Queue is a restricted linear data structure that follows the First-In-First-Out (FIFO) principle. Elements are added to the back (rear) of the queue and removed from the front. It is typically used for processing events in chronological order, such as printer task queues or customer service lines.

  11. Compare Runtime and Compile-time framework architectures

    When designing a framework, there are three primary architectural choices regarding how templates or data are converted into DOM elements:

    1. Pure Runtime: The framework provides a render function that takes a structured data object (representing the DOM) and recursively creates elements. There is no compilation step; the logic executes entirely at runtime.
    2. Runtime + Compile-time: A compiler is introduced to transform a user-friendly format (like an HTML string) into the structured data object required by the runtime render function. This is often referred to as runtime compilation.
    3. Pure Compile-time: The compiler transforms the input (e.g., HTML strings) directly into the final data object or imperative code. In this model, a separate runtime render function may not be necessary as the output of the compiler is the final execution logic.

  12. Vue 3 Project Template Technology Stack Overview

    The @erkelost/template uses a modern Vue 3 ecosystem focused on performance and developer experience. Key components include:

    • Core: Vue 3, Vite 2, pnpm, and ESBuild.
    • UI & Styling: Naive UI (component library), UnoCSS (atomic CSS engine), and Iconify (on-demand icons).
    • State & Routing: Pinia for state management and Vue Router for routing.
    • Development Tools: TypeScript for static analysis, @VueUse/core for Vue 3 hooks, and SASS 1.5.1 for CSS preprocessing.
    • Code Quality: commitlint for commit standards, Prettier and ESLint for linting, and husky for git hooks.
    • DX Features: <script setup> syntax, reactivity transform, and unplugin-auto-import for automatic API imports.