ReScript: The secret sauce for high-quality large-scale application building on the JavaScript platform

  • A scripting language designed to serve JS

  • Data is separated from function

Second, using cross-end scheme Rax to write hongmeng application

  • Multiple operating system mode has its own system, based on the idea of large front-end is more efficient (lower labor cost)

  • VDOM is a standard data structure that drives the UI

  • Multi-terminal rendering docking scheme: 1. Syntax compilation, thinking during compilation; 2. Runtime thinking; 3, the underlying rendering instruction idea

  • Multi-engineering build: Build multiple Webpack tasks (or other packaging tool tasks such as rollup, Vite, gulp, etc.) with a big front-end approach

  • The construction of cross-end solution is inseparable from the construction of IDE side. The R&D link is connected in series. The bottom-pocket solution can connect to the THIRD-PARTY IDE through Dev Server solution

3. V8 JS Aot-oriented exploration and practice

  • JS AOT scheme: 1, the use of local code (machine code, assembly), disadvantages: slow compilation, large volume, high memory, poor performance, CPU architecture is not universal; 2. Full bytecode cache, disadvantages: performance loss; 3. Partial bytecode cache, disadvantages: version problem, CPU generality, machine generality

  • 1. Pre-release of Profile-Guided Optimization (PGO); 2. Prior rules, which predict the code to be executed, incremental update;

  • Compatibility: 1, online generation, ① idle time preheating ② access generation; 2. Offline generation

  • Mobile terminal can do pre-release stage, provide AOT scheme for JS

Brief introduction to web Component practice and application

  • Custom Element, Shadow DOM

5. Interpret the visualization technology of data exploration under ten-thousand-level relationship network

  • Massive data relationship processing, using DAGRE layout + visual channel mapping (color) technology to draw node dependencies

  • Massive data processing solutions: 1. Offline rendering technology, PlanUml and Offline Canvas; 2. Local rendering technology, dirty matrix rendering; 3. Dual engine switch and GPU rendering

  • 1, point aggregation, granularity division, such as: drilling access, interaction; 2, side pruning, reduce visual chaos, such as: reverse delete algorithm, Prim algorithm; 3, edge binding, reduce visual confusion, such as: prominent edge mode;

  • Visual analysis, from the point of view of business requirements, including the establishment of graph database

  • Visual layout: to solve the limitations of general layout strategy, using layout fusion technology to solve: 1. Sub-graph embedding (DAGRE+GRID); 2. Layout overlay: front layout + force-guided layout + node compaction + network alignment + grid expansion; 3. Subgraph fusion; 4, intelligent layout; 5. Gradual layout

  • Subgraph embedding scheme: 1. Node hierarchy; 2. Virtual grouping; 3. Node layout; 4, group embedded

  • Figure quality analysis: 1. Grouping analysis; 2. Geospatial analysis; 3. Time sequence analysis; 4. Algorithm analysis

  • Figure product idea: upstream link analysis, downstream impact analysis

Vector to Ink: Manga style rendering techniques for analyzing 3D models from the perspective of painting

  • Color Differential is generated by interpolation of hue, contrast and saturation. 2. Depth Fall, which is caused by the discontinuity of Depth change; 3. Compression of Surface is generated by the degree of tangency between the line of sight and the edge of the object

Vii. Core design ideas of open source form scheme Formily

  • “Data + Protocol” form framework: protocol layer + bridge layer + application layer

  • Tool class editor massive field form rendering scheme

  • Extension scheme: 1. Attribute extension; 2. Context extension; 3. Connector expansion; 4. Template extension

8. Brief introduction to the working mechanism of collaborative documents

  • Document model -> View model, without dependencies contentEditable

  • OT and CRDT coordination

Application of CRDT real-time collaboration technology in draft editor

  • Event Souring mechanism: 1. Rebase mechanism, such as git operation; 2. Operation mechanism, such as OT(Operational Transform); 3, Model mechanism, e.g. CRDT(Conflict-free Replicated Data Type)

  • YATA algorithm, Yjs landing

  • Performance optimization

  • Test plan

The Birth of virtual idols – Digital People industry and technology exploration

  • Virtual character construction

  • Web3.0 dilemma

  • Cloud Rendering: Serverless, Web 3D + Puppeteer, non-real-time rendering

11. Design and implementation of Web short video editor – making video like PPT

  • Editor design: General editor build, layered build
  • Video editor layer: application layer, engine layer, dependency layer

  • Clock synchronization, audio and video editing code
  • Codec scheme: 1. FFmpeg+ WASM; 2. WebCodecs API+ library (e.g. Mux.js)