DOCSEARCHbyAlgolia
Submit Docs

循循渐进 (Step by Step) Blog

website·Indexed 30 days ago

https://mao-118.github.io/blog-site

A technical blog covering frontend development topics including Vue 3.2 setup syntax, React 18, TypeScript, Node.js, uni-app, Webpack, Git commands, micro-frontends, and design patterns like the Observer pattern.

Tokens
5.8K
Snippets
23
Records
40
Agent score
75%

What's inside 循循渐进

  1. Overview of React features

    React is a JavaScript library focused on building user interfaces. Its core characteristics include:

    1. Declarative UI (JSX): Allows developers to write UI similarly to HTML, replacing complex imperative implementations.
    2. Component-Based Architecture: UI is built using reusable components that can be composed like building blocks to create complete pages, improving maintainability.
    3. Cross-Platform Capability: The same syntax can be used for web applications, native mobile apps (via React Native for iOS and Android), and VR applications.

  2. Understand TypeScript core concepts and design goals

    TypeScript (TS) is an open-source programming language developed by Microsoft in 2012. It is a superset of JavaScript that follows the latest ES6 and ES5 specifications, extending JavaScript's syntax by adding static type support. Its primary design goals are to adhere to current and future ECMAScript standards, enable the development of large-scale applications that compile to pure JavaScript for browser execution, and serve as a cross-platform development tool under the Apache open-source license.

  3. Understand the purpose of build tools like Webpack

    Build tools (bundlers) are necessary to transform modern development code into a format that browsers can execute. Their primary functions include:

    1. Compilation: Converting framework code (React, Vue), ES6 modules, and CSS preprocessors (Less, Sass) into standard JavaScript and CSS.
    2. Optimization: Compressing code to reduce file size.
    3. Compatibility: Handling cross-browser compatibility issues.
    4. Performance: Improving overall code execution and loading performance.

    Common build tools include Webpack, Vite, Rollup, Parcel, Gulp, and Grunt.

  4. Understand the Node.js Runtime Environment

    Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Unlike the browser, which serves as the frontend runtime for JavaScript, Node.js provides a backend runtime environment. Because it operates outside the browser, Node.js cannot call browser-specific built-in APIs such as the DOM (Document Object Model) or BOM (Browser Object Model).

  5. Understand Vue.js core concepts and architecture

    Vue.js is a progressive framework used for building user interfaces by efficiently filling HTML pages with data. It operates on the MVVM (Model-View-ViewModel) pattern, where the Model represents the data source, the View is the UI, and the ViewModel is the Vue instance that connects the two.

    Key architectural features include:

    1. Data-Driven Views: Changes in the underlying data automatically trigger updates in the view, allowing developers to focus on data management rather than manual DOM manipulation.
    2. Two-Way Data Binding: This ensures synchronization between the JavaScript data and the UI. Changes in JS are rendered to the page, and user input in form fields is automatically captured and updated back into the JS data.

  6. Evaluate the benefits of using Micro Frontends

    Implementing a Micro Frontend architecture provides several key advantages for development teams:

    1. Team Autonomy: Projects are split by business modules. Each team maintains, develops, and deploys their own module independently, significantly reducing code merge conflicts and deployment scheduling conflicts between teams.
    2. Legacy Project Compatibility: It allows organizations to integrate old 'monolithic' projects (e.g., legacy jQuery apps) into a modern ecosystem without needing to rewrite the entire legacy codebase immediately.
    3. Technology Stack Agnostic: New modules can be created using any technology stack chosen by the team. Different modules within the same system can coexist using different frameworks without interfering with one another.

  7. Understand Micro Frontend architecture concepts

    Micro Frontends apply the architectural principles of microservices to the frontend. Instead of a single monolithic application, a large frontend project is split into multiple smaller modules. Each module can be managed by a different team, use its own technology stack (framework), maintain its own repository, and be deployed independently. This approach is particularly useful for long-term enterprise internal projects (middle-office/back-office systems) that tend to become 'monolithic' over time, leading to outdated tech stacks and slow build/deployment cycles.

  8. Evaluate the advantages and disadvantages of using TypeScript

    Using TypeScript provides several benefits for developers, including earlier error detection, comprehensive code completion (IntelliSense) to increase efficiency, improved maintainability and easier refactoring due to the type system, and access to the latest ECMAScript syntax. However, there are trade-offs: initial development costs may increase, some libraries may not integrate perfectly, there is a learning curve for concepts like interfaces and generics, and additional effort is required to integrate TS into automated build pipelines.

  10. Identify essential Vue.js learning paths for project development

    To gain the ability to develop Vue projects, developers must master the following framework-specific concepts and tools:

    • Vue Directives: Special attributes used to apply reactive behavior to the DOM.
    • Components: Reusable UI structural units.
    • Vue Router: The official router for single-page applications.
    • Vuex: The state management pattern and library.
    • Vue Component Libraries: Pre-built UI component sets.

  11. Node.js Learning Path for JavaScript Developers

    To transition from browser-based JavaScript to Node.js, follow this learning progression:

    1. JavaScript Basic Syntax (shared with browser environment).
    2. Node.js Built-in API Modules (e.g., fs for file system, path for path utilities, http for networking).
    3. Third-party API Modules (e.g., express for web servers, mysql for database connectivity).

  12. Access global properties in <script setup>

    To access properties attached to app.config.globalProperties (the prototype) inside a <script setup> block, use the getCurrentInstance function to retrieve the proxy object.
    // main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
const prototype = app.config.globalProperties
prototype.name = 'Jerry'
    <script setup>
  import { getCurrentInstance } from 'vue'
  const { proxy } = getCurrentInstance()
  console.log(proxy.name) // 'Jerry'
</script>