Use Nginx as a reverse proxy for Node.js services
Nginx is commonly used as a reverse proxy to sit in front of backend service programs, routing incoming traffic to the appropriate internal server ports.
Fang Haoming's Engineering Blog and Docs
website·Indexed 30 days ago
http://fanghaoming.dpdns.org/A collection of engineering methodologies, technical guides, and study notes. Topics include problem decomposition, Docker fundamentals, monorepo tool selection (Nx, Lerna), Node.js interview experiences, and dynamic programming templates.
What's inside Fang Haoming's Blog
Apply First Principles to resolve framework-level issues
When framework-specific behavior (e.g., React components not updating) is inexplicable, revert to the 'First Principles' of the web to find the root cause. Key fundamental concepts include:
- HTTP and URLs
- HTML and CSS Cascade
- DOM and JavaScript Event Loop
- Browser Rendering Pipeline
- Caching and Same-Origin Policy
- Accessibility
Example: If a React component doesn't update, check for reference stability (mutation), incorrect
keyusage, closure staleness, or asynchronous callback timing.Define the role of a high-level frontend engineer
A proficient frontend engineer's value extends beyond writing pages. The core capability is the ability to:
- Place complex problems into a structured framework.
- Transform uncertainty into testable hypotheses.
- Convert verification results into informed decisions.
- Codify problem-solving experiences into stable, repeatable engineering systems.
Engineering competency framework for frontend and software developers
High-level engineering capability is defined by the ability to transform complex problems into structured systems. This involves a multi-dimensional skill set applicable across frontend, backend, client, algorithm, testing, and architecture roles. In a frontend context, these capabilities manifest in browser management, UI development, state handling, API integration, performance optimization, build processes, deployment, and collaboration.Category Competency Dimensions Cognitive Problem Decomposition, Abstraction & Modeling, First Principles, System Boundary Awareness Analytical Structured Analysis, Hypothesis & Verification, Root Cause Analysis, Observability Thinking Design Interface Contract Thinking, State Machine Thinking, Defensive Design, Layered Abstraction, Complexity Management Decision Trade-offs & Decision Making, Risk Control, Constraint Optimization, Cost-Benefit Analysis Evolution Continuous Correction, Evolutionary Design, Human-Computer Collaboration, Decision Logging, Standardization & Scaling, Antifragility Optimize deliverables under project constraints
Engineering is not about pursuing perfection with infinite resources, but making correct trade-offs under constraints. Common constraints include time, manpower, performance, compatibility, design fidelity, SEO, security, maintainability, and business priority. The goal is to find a deliverable solution that balances ideal architecture with immediate needs (e.g., using static configuration and core components for a tight deadline while preserving the structure for future CMS integration).Core competency framework for software engineers
Software engineering excellence across roles (Frontend, Backend, Client, Algorithm, Testing, Architecture, Product) relies on a set of cross-functional cognitive and technical capabilities. For frontend engineers, these are applied specifically to browsers, UI, state management, APIs, performance, build systems, deployment, and collaboration.Category Competency Dimensions Cognitive Problem Decomposition, Abstraction & Modeling, First Principles, System Boundary Awareness Analytical Structured Analysis, Hypothesis & Verification, Root Cause Analysis, Observability Thinking Design Interface Contract Thinking, State Machine Thinking, Defensive Design, Layered Abstraction, Complexity Management Decision Trade-offs & Decision Making, Risk Control, Constraint Optimization, Cost-Benefit Analysis Evolution Continuous Correction, Evolutionary Design, Human-Computer Collaboration, Decision Logging, Standardization & Scaling, Antifragility Optimize deliverables under project constraints
Engineering is not about pursuing perfection with infinite resources, but making correct trade-offs under limited resources. When faced with constraints such as time, manpower, performance, compatibility, SEO, or security, the goal is to find a deliverable solution rather than ignoring the constraints. For example, if a page must launch tomorrow, prioritize static configuration and core components over a full CMS integration and A/B testing, while maintaining a structure that allows for future CMS integration.Understand Docker core concepts and architecture
Docker is a containerization platform used to develop, distribute, and run applications by packaging them with all dependencies into a standardized container. Key characteristics include being lightweight (sharing the OS kernel), cross-platform (Linux, Windows, Mac), and providing isolation between containers and the host.Compare Nx and Lerna for monorepo management
When choosing a monorepo tool, the decision depends on the project's complexity and primary goals.
Nx is best for complex architectures, microservices, and projects requiring high development efficiency. It provides intelligent task scheduling, distributed caching for build/test results, code generators (e.g., for React, NestJS), and graphical dependency analysis. However, it has a higher learning curve.
Lerna is best for simpler projects focused on library development and multi-package publishing (e.g.,
lerna publish). It is easier to learn but lacks native task scheduling and caching mechanisms, and has a declining community ecosystem compared to Nx.Recommendation:
- For library development and publishing: Use Lerna.
- For microservices or complex architectures: Use Nx.
- For a hybrid of both: Nx and Lerna can be used together.
Establish API contracts for frontend-backend collaboration
Stability in collaboration depends on a strict contract (Schema First/Design by Contract). A contract must define more than just field names; it should include:
- Data types and nullability
- Enum values and default values
- Error codes and pagination/sorting rules
- Compatibility strategies and field deprecation methods. Focusing on boundary values and exception paths prevents bugs that occur when the backend changes data types (e.g., number to string).
Perform structured performance analysis using a layered framework
Use a structured approach (based on MECE/Issue Tree) to ensure performance troubleshooting is exhaustive and non-overlapping. Instead of focusing on a single slow function, analyze across these dimensions:
Layer Focus Areas Network Resource size, request count, caching, CDN Build Bundle size, code splitting, tree shaking Rendering Layout, paint, composite, long tasks Data API latency, duplicate requests, concurrency control Interaction Input latency, animation stutter, scrolling performance Business Unnecessary data or component loading Model UI logic using State Machine thinking
Frontend UIs are essentially state machines. Explicitly modeling states prevents conflicting conditional logic. Instead of a simple 'data' vs 'no data' binary, consider states such as:
- Initializing, Loading, Success, Empty, Error, Retrying, Partial Success, Permission Denied, Offline, and Stale Data.