2021 SegmentFault D-Day big front-end front-end technology practice

This article participated in the SegmentFault D-Day essay call, welcome to join if you are reading.

Tao Department web front-end architecture development practice

• Plug-in hexagonal architecture, providing plug-in life cycle, communication mechanism between plug-ins;
• Engineering packaging tools are available: webpack, vite, gulp, rollup...;

• Upgrade of R&D model, same warehouse, same dependency, and same order;
• Front-end and back-end isomorphic development, built by midway and hooks functions, combined with serverless for full-link development;

How to observe front-end performance

• Observability: Provide monitoring and visualization corpus, database selection and customization of the same query language;

• Link tracing: OpenTracing specification, call relationship diagram;

• Log analysis: correlation analysis of container logs, application logs, and host system logs;

Front-end DDD architecture design for the future and browser specifications

• Front-end DDD: component service, abstraction of divide and conquer, sub-domain segmentation and definition of bounded context, good anti-corrosion, more accurate caching and on-demand loading granularity;

• Web Components docking class Single-SPA life cycle;
• Portals, as an alternative to iframe, can better customize sandbox in depth;

• All renders are essentially an appendChild, and the framework is a besieged city. It should be close to the development direction of the browser’s native API.

Front-end spreadsheet technology sharing

• Online table: Cells are stored based on the sparse matrix of row mode, and build a chain of calculations dependent on the sequence of calculation formulas

React's impact on the development of global front-end frameworks

• Framework design: React is an ultimate runtime solution, while NG, Svelte, Solid, etc. are the ultimate compile-time solutions. Vue is somewhere in between, which can be transported and edited;

• React Hooks is essentially a kind of React's ui=F(state), that is, ui is a data design philosophy practice, a best practice of functional programming, and it is more suitable for serverless lambda function practice.

• CPU bottleneck: 1. Provide performance optimization API (lower layer to reduce runtime process); 2. Time slicing, such as batch processing and startTransition (reduce user perception). IO bottleneck: Suspense, new SSR