⚠️温馨提示: 文档中包含【2个】暂不支持的区域,请通过搜索关键字【暂不支持的文档区域】进行后续处理

ai-engine-notes.zip

过往分享了很多进阶知识与架构内容,课程文档列表如下,配套对应 课程文档和配套视频回放找咨询老师 领取~ 希望对你的技术成长有帮助!

【飞书文档】前端智能体 Ollama + Deepseek AI 开发平台全链路设计与实践,特邀字节专家分享前端人高光时刻


【飞书文档】NestJS 从入门到进阶全栈开发实战,字节专家带你突破前端开发能力边界

【飞书文档】前端性能优化核心点全面解析,高级前端专家传授涨薪高分面能力

【飞书文档】飞书低代码物料体系与编排引擎设计,字节前端专家在线评审实现工程重难点 低代码核心,高薪面试技巧补益

【飞书文档】企业级低代码平台核心需求与方案设计,字节前端专家带你精研产品业务与工程架构 低代码业务核心必看


【飞书文档】vite、rollup、tsup、tsc 打包构建工具详解,字节前端专家带你深入多业务构建方案

【飞书文档】基于 pnpm monorepo 大厂项目工程化设计,字节架构师传授多场景项目架构要诀

【飞书文档】前端单测、集成测试与端到端测试方案全面解析,字节大佬分享字节系产品分场景测试最佳实践

【飞书文档】css、cssinjs、tailwindcss 核心用法与进阶,字节系产品样式方案评审与最佳实践

【飞书文档】Typescript 进阶与高分技巧,字节面试官细数常问面试题与优秀开源项目最佳实践

【飞书文档】Docker 入门与服务编排进阶,字节前端专家带你光速掌握 CI/CD 运维技能


【飞书文档】ESLint 前端编码规范化与原理剖析,特邀字节大佬分享团队代码质量把控细节

【飞书文档】Notion 与飞书文档协同方案精析,字节前端专家传授百万年薪架构师级项目重难点 飞书文档编辑器原理续,进阶

【飞书文档】Ant Design 组件库架构设计与开发实践,高级前端专家带你掌握基建面试技巧 组件库与团队基建面试必看

【飞书文档】Taro、Tauri 多端开发实践与原理剖析,《Taro 多端开发权威指南》作者带你悟透多端框架原理 多端开发涨薪必学


【飞书文档】Nest 服务端开发与原理深度剖析,《NestJS 实战》作者带你领略框架设计之美 全栈进阶,企业级框架

【飞书文档】Babel 与编译原理详解,字节高级前端专家带你从零实现飞书表格公式执行器

【飞书文档】服务端渲染(SSR)与前后端同构技术原理揭秘,字节前端专家带你光速进阶全栈 进阶必学


【飞书文档】大数据可视化引擎与数字孪生平台设计浅析,字节架构师:一起来剖析 DataWind 数据洞察平台架构之道

【飞书文档】飞书文档协同编辑器技术揭秘,特邀字节架构师分享富文本编辑器方案细节

【飞书文档】前端性能与异常监控平台全链路设计与实践,字节架构师:掌握这整套拿个 40K+ 不在话下吧

【飞书文档】字节面试专场——中厂在职学员冲击大厂 30K+,看看面试官如何评价 大厂模拟面试,问得很深慎看

【飞书文档】冲击中大厂筹备与涨薪突击最优方案,特邀字节面试官带你体验大厂面试全流程


【飞书文档】Webpack 原理深度解读与面试专项突击,字节面试官带你手撕难缠打包构建面试原理题 工程化与构建原理深入

【飞书文档】脚手架/CLI 工具原理与开发实践,特邀字节前端专家带你体悟大厂团队基建与研发工作流 团队基建必看

【飞书文档】Vite 构建过程与源码深度剖析,你怎么也想不到一线大厂工程化构建面试会问这么深!

【飞书文档】Vue3 源码深度剖析,字节面试官教你轻松拿捏高级前端专家面试框架原理题

【飞书文档】React18 源码深度剖析,字节面试官教你轻松拿捏高级前端专家面试框架原理题

【飞书文档】前端破局 AI 应用开发,特邀字节大佬分享字节系 AI 场景落地应用与 AI 引擎编排流程 探索前端新方向同学福音


【飞书文档】高级前端专家如何做性能优化?特邀字节大佬细数飞书应用优化细节(二)【内部培训版】

【飞书文档】小小微前端,轻松拿捏,特邀字节大佬开讲微前端架构与源码剖析【内部培训版】 35K+ 同学必看

【飞书文档】高级前端专家如何做项目架构与工程化设计? 特邀字节大佬细数字节开源项目架构细节【超详细内培版】

【飞书文档】高级前端专家如何做性能优化?特邀字节大佬细数飞书应用优化细节(一)【超详细内培版】


【飞书文档】面试被算法干吐了?字节大佬带你突破极限,冲击 30K+ 必掌握算法与 WebAssembly 技术 冲刺年包 50W+ 同学必看

【飞书文档】字节大佬带你弯道超车,深入剖析大厂面试真题~

【飞书文档】项目没有难点亮点?字节大佬带你前端项目弯道超车

【飞书文档】备战金九银十,进阶大前端,涨薪全突破! 跳槽涨薪需求同学必看

  • 初中级 】面试官:你有做过自动化、批处理或者生成式 AI 相关的业务吗?说说你对于流程引擎理解和整体方案
  • 中高级 】面试官:看你有低代码、AI 应用引擎等项目经验,请说说你之前项目中的流程引擎编辑器和执行器具体实现
  • 专家级 】面试官:要构建一个完整生成式 AI 应用引擎,平台生态体系如何实际并实现?

初中级 】你有做过自动化、批处理或者生成式 AI 相关的业务吗?说说你对于流程引擎理解和整体方案

自动化和批处理 :在现代企业中,自动化指的是通过技术手段让某些流程、任务、工作自动执行,减少人工干预,提高工作效率和准确性。而批处理则是指对大量数据或者任务进行批量处理的一种方式。在这些领域,很多公司使用自动化工具来完成常规的、重复的任务,比如数据处理、文件转换、报告生成等。

生成式 AI :生成式 AI 是指基于大规模数据训练出来的 AI 系统,能够生成新的内容,如文本、图片、音频等。常见的生成式 AI 技术包括 GPT、GAN(生成对抗网络)等。这些 AI 模型可以在多个业务场景中发挥重要作用,比如自动写作、内容创作、数据分析等。

流程引擎的理解

流程引擎是一个用于自动化管理和执行业务流程的软件工具。它通过定义和执行一系列业务步骤,来实现工作流的自动化。流程引擎通常支持:

  • 工作流建模 :通过图形界面设计业务流程和操作步骤,通常以 BPMN(业务流程建模符号)形式呈现。
  • 任务调度 :自动分配任务、通知责任人、监控任务执行进度。
  • 集成外部系统 :与其他系统、工具和应用集成,实现数据流转和系统交互。
  • 灵活配置 :可以根据企业业务的变化,灵活调整业务流程和逻辑。

对于流程引擎的方案,我认为其核心在于以下几点:

  • 高可扩展性 :流程引擎应该能够适应企业业务的不断变化,支持不同规模的操作和流程。
  • 自动化与灵活性 :流程不仅要自动化执行,还要支持根据不同情境灵活调整流程。
  • 监控与分析 :提供监控工具,帮助管理者跟踪流程的执行情况,及时调整和优化。

低代码与 AI 开发平台

在现代开发中,低代码平台提供了一种简化的开发方式,让非技术人员也能参与到开发过程中。通过拖拽组件、配置参数,低代码平台能够帮助企业快速构建应用和业务流程。

  1. Dify AI 开发平台 :Dify AI 提供了一种结合人工智能与低代码开发的方式,帮助开发人员和业务人员一起快速构建智能化应用。这个平台可以支持生成式 AI 模型的集成,使得业务流程能够在自动化的同时融入更强的智能化能力。例如,可以通过自然语言处理技术生成文本内容,或者结合数据分析模型提供个性化的推荐系统。
  2. 字节扣子平台的流程引擎 :字节扣子的流程引擎更侧重于业务流程管理。这个平台提供了一个集成环境,用户可以在其中设计工作流、自动化任务,并将这些流程和企业的其他系统进行连接。通过集成不同的工具和服务,可以大大提高企业的工作效率和业务响应速度。

具体方案实现

  1. 低代码开发 :利用低代码平台,首先要明确业务流程,理解需要自动化或智能化的任务。通过拖拽式的界面设计,用户可以快速配置流程节点、设定条件和任务。结合生成式 AI 技术,可以让流程更加智能化,例如自动生成报告或分析数据。
  2. AI 集成 :生成式 AI 的集成需要通过 API 接口、SDK 或平台的 AI 模块来实现。可以把自然语言处理、机器学习、数据预测等技术嵌入到业务流程中,使其更加智能。例如,在自动化审批流程中,AI 可以根据历史数据预测审批结果。
  3. 流程监控与优化 :通过流程引擎的监控工具,管理员可以查看各个任务的执行状态,识别瓶颈并及时进行优化。对于低代码平台来说,这也意味着可以动态调整流程,使其更加适应业务变化。

以下是您所提到的三种技术: Glide 平台的 Actions、Retool 平台的 WorkflowLLM AI 应用引擎 ,的详细介绍,包括它们的背景、核心价值、工作原理、整体流程、不同节点设计和实现方案。

Glide 平台的 Actions(前端实现的内存型工作流)

背景与价值

Glide 是一个低代码开发平台,旨在简化应用程序的构建过程。其核心价值在于简化复杂的应用开发,使业务人员也能通过拖拽和配置来创建应用程序,而不需要编写大量的代码。Glide 的 Actions 机制是该平台的一项创新,用于实现前端工作流的管理和处理。不同于传统的服务器端流程,Glide 的 Actions 在用户的设备端直接处理,主要通过内存存储和即时执行任务。

核心逻辑

  • 内存型工作流 :Glide Actions 允许用户在浏览器端通过内存型数据存储和即时执行来管理应用的业务逻辑。工作流是以用户的操作和前端界面的交互为中心进行设计的。
  • 动态交互 :用户的每一个操作(如点击按钮、修改数据、选择选项等)都会触发一个或多个 Actions。这些 Actions 会在前端完成数据处理、逻辑判断等操作,快速响应用户需求。
  • 节点设计 :Glide 中的 Actions 节点设计通常包括数据操作节点(例如增、删、改)、API 调用节点(通过 HTTP 请求外部服务)、条件判断节点(根据用户输入和当前数据执行不同的逻辑)等。

实现方案

  • 前端触发 :用户操作通过 UI 组件触发事件,后端根据定义的 Action 触发相应操作。
  • 内存存储 :数据存在前端缓存中,避免频繁的服务器请求,提高响应速度。
  • 快速反馈 :通过在前端即时响应用户的需求,Glide 平台能够以最低延迟提供操作反馈。

Retool 平台的 Workflow(服务端实现的工作流)

背景与价值

Retool 是一个支持企业级应用快速开发的低代码平台,重点在于能够将现有的业务流程与数据库、APIs 和服务端集成。Retool 提供的 Workflow 引擎通过服务端执行工作流,将更多复杂的业务逻辑和跨系统交互放到后台处理,适合需要高可靠性、低延迟和大规模数据处理的应用场景。

核心逻辑

  • 服务端驱动的工作流 :与 Glide 的前端驱动不同,Retool 的工作流主要是在服务端执行。它将多个外部系统、数据库和服务结合起来,以完成更复杂的数据操作和集成。

  • 节点设计 :Retool 的工作流支持灵活的节点设计。常见的节点包括:

    • 数据库操作节点 :执行增删改查(CRUD)操作。
    • API 调用节点 :与外部系统、服务或数据库进行交互。
    • 条件判断节点 :根据数据或参数判断下一步流程。
    • 多步骤操作节点 :结合多个步骤或操作,例如获取数据、处理数据、发送通知等。

实现方案

  • 后端执行 :工作流的各个节点由服务端执行,根据业务需求从数据库获取数据,或者通过 API 调用与外部系统交互。
  • 可视化配置 :用户通过可视化界面配置工作流,定义节点间的执行顺序和条件。
  • 自动化和监控 :Retool 支持自动化触发和实时监控工作流执行状态,帮助用户快速发现和解决问题。

LLM AI 应用引擎(生成式 AI 工作流引擎)

背景与价值

随着生成式 AI,特别是大型语言模型(LLM,如 GPT-3 和 GPT-4)的广泛应用,AI 引擎能够大幅提升自动化、决策支持和数据分析的能力。LLM AI 应用引擎的核心价值是通过自然语言处理和生成式 AI 技术,帮助企业和开发者创建自动化、智能化的应用,尤其在处理复杂任务、决策支持和个性化推荐方面表现出色。

核心逻辑

  • 大规模语言模型的集成 :LLM AI 引擎利用大规模语言模型处理输入的自然语言,并生成相关的文本、报告或分析结果。

  • 智能节点设计 :LLM AI 引擎的工作流设计通常包括以下几个节点:

    • 文本输入节点 :接受用户输入的自然语言或业务指令。
    • 文本生成节点 :通过 LLM 生成或补全文本信息,如报告生成、问答系统等。
    • 数据处理节点 :结合生成的文本和数据,对业务进行进一步分析或推荐。
    • 反馈节点 :根据生成的文本或分析结果,触发后续的动作,如通知、邮件、API 请求等。

实现方案

  • 数据集成与 API :通过集成不同的数据源和服务,LLM AI 引擎可以将外部的数据与生成式 AI 模型结合,进行高效处理和生成。
  • 自然语言理解与生成 :模型的处理核心在于自然语言理解(NLU)和生成(NLG),即根据用户的输入理解意图并生成合适的响应。
  • 业务流程自动化 :在 AI 引擎中,生成的内容和处理结果通常触发其他业务流程的自动化,例如生成报告后自动发送邮件,或在数据分析后触发决策支持系统。

工作流引擎对比

Glide Actions Retool Workflow LLM AI 引擎
技术类型 前端驱动的内存型工作流 服务端驱动的集成工作流 生成式 AI 驱动的智能工作流
核心价值 简化前端工作流操作,快速响应 提供复杂的业务集成和自动化 提供智能化决策、自动内容生成
节点设计 UI 操作触发事件、数据操作、条件判断 数据库操作、API 调用、条件判断、多步骤操作 自然语言输入、文本生成、数据处理、反馈
应用场景 用户操作驱动的快速交互 企业级应用的工作流和集成 文本生成、自动化决策、数据分析支持

中高级 】看你有低代码、AI 应用引擎等项目经验,请说说你之前项目中的流程引擎编辑器和执行器具体实现

流程编辑器与流程执行器的定义

流程编辑器

流程编辑器是一个图形化界面,允许用户设计和创建业务流程。通常是低代码平台或自动化工具的一部分,用户通过可视化操作(如拖拽组件、配置节点)定义流程的步骤、条件、依赖关系等。流程编辑器生成的是一个工作流的蓝图,用户可以直观地看到每个节点如何链接和相互交互。

一般我们可以选择类似 x6、xyflow 来实现,vue 的同学可以尝试 vue-flow

流程执行器

流程执行器则是负责根据流程编辑器定义的蓝图实际运行这些流程的引擎。执行器需要实现以下功能:

  • 节点执行 :根据流程图中定义的顺序和逻辑执行每个节点,特别是异步节点的执行。
  • 异步执行 :有些流程节点(如 API 请求、数据库操作等)需要异步执行,执行器需要确保异步节点能够正确处理并在完成后返回反馈。
  • 流程监控与反馈 :执行器负责监控流程的状态,并在执行完成时将结果反馈给用户或系统。

三种工作流引擎的具体实现方案

Glide Actions (前端内存型工作流)

流程编辑器的实现

Glide 的流程编辑器允许用户通过图形化界面设计工作流。用户可以通过拖拽元素(如按钮、文本框等)来设计每个步骤,并定义每个元素触发的动作(如更新数据、调用 API、发送通知等)。编辑器主要以前端为主,生成的工作流配置存储在本地,用户可以快速预览和调试。

流程执行器的实现

在 Glide 中,流程执行器主要依赖浏览器端的 JavaScript 引擎执行工作流,流程执行的异步节点(如 API 调用、定时器等)通常使用 JavaScript 的异步处理机制(如 async/awaitPromise 等)来处理。

  • 节点执行 :每个节点由一个函数或动作定义,当触发某个节点时,执行器会运行对应的代码。
  • 异步执行 :例如,调用外部 API 时,流程执行器会异步发送请求,等待返回后继续执行后续操作。这个过程通过 Promiseasync/await 管理,以确保流程的顺序性。
  • 反馈处理 :每当一个异步任务完成时,执行器会根据返回的结果(如 API 响应)决定下一步流程,或者直接反馈给前端进行更新。

实现方案

async function executeWorkflow(nodeId) {
  const node = getNode(nodeId);
  switch (node.type) {
    case 'API_CALL':
      const response = await callAPI(node.endpoint, node.params);
      return response;
    case 'UI_UPDATE':
      updateUI(node.data);
      return 'UI updated';
    default:
      return 'Node type not recognized';
  }
}

Retool Workflow (服务端工作流)

流程编辑器的实现

Retool 的流程编辑器是基于其可视化低代码平台构建的,用户可以通过拖拽、配置和链接不同的服务端操作节点来设计复杂的工作流。每个节点对应着一个任务或操作,例如查询数据库、调用 API、执行数据转换等。用户在编辑器中定义节点的顺序、条件和输入输出。

流程执行器的实现

Retool 的流程执行器通常运行在服务端,执行各个节点的操作,包括异步任务处理。它通过服务端的 JavaScript 引擎和后台 API 调用来管理节点之间的执行。每个节点的执行都需要被异步处理,特别是在调用数据库或外部 API 时。

  • 节点执行 :流程执行器按照编辑器定义的顺序执行每个节点。如果节点涉及外部服务的交互(如数据库查询、API 调用),这些操作将被异步执行。
  • 异步执行 :使用服务器端的异步处理机制(例如 Node.js 中的 Promise ,或使用 Python、Go 等语言的异步库)来管理长时间运行的任务,避免阻塞其他操作。
  • 反馈处理 :每个异步节点的反馈(如查询结果、API 返回的数据)会被传递到下一个节点,或者通知流程管理者或用户。

实现方案

async function runWorkflow(nodeId) {
  const node = getNodeFromDatabase(nodeId);
  switch (node.type) {
    case 'API_CALL':
      const apiResult = await makeApiCall(node.apiUrl, node.params);
      storeApiResult(apiResult);
      break;
    case 'DB_QUERY':
      const data = await queryDatabase(node.query);
      return data;
    case 'SEND_NOTIFICATION':
      sendNotification(node.message);
      break;
    default:
      console.log('Unknown node type');
  }
}

LLM AI 应用引擎 (生成式 AI 工作流)

流程编辑器的实现

LLM AI 应用引擎的流程编辑器主要用于设计和配置智能任务流。用户通过图形化界面配置不同的 AI 操作节点(例如:自然语言理解、生成文本、数据推理等),并通过设置每个节点的输入、输出、依赖关系等参数,构建一个完整的智能工作流。编辑器通常会提供模板和示例,帮助用户快速构建流程。

流程执行器的实现

AI 应用引擎中的流程执行器负责根据预定义的工作流配置,执行不同的 AI 操作节点。每个节点通常涉及到 AI 模型的推理任务(如 GPT-3 的文本生成、语音识别等),这些任务通常是异步的,因为 AI 模型的计算需要一定的时间。

  • 节点执行 :每个节点执行不同的任务,可能是文本生成、数据推理、图像生成等。执行器通过集成 AI 模型 API 或服务来处理这些任务。
  • 异步执行 :AI 任务通常是耗时的,执行器会异步处理这些请求,并在完成后返回结果。这些请求可能是远程 API 调用,或者是内部的推理计算。
  • 反馈处理 :AI 引擎的反馈可以是生成的文本、图像或推理结果,并会被传递到下一个节点,继续完成后续任务。

实现方案

async function executeAIWorkflow(nodeId) {
  const node = getNodeFromAIWorkflow(nodeId);
  switch (node.type) {
    case 'TEXT_GENERATION':
      const generatedText = await generateTextUsingLLM(node.inputText);
      storeGeneratedText(generatedText);
      break;
    case 'DATA_ANALYSIS':
      const analysisResult = await analyzeDataWithAI(node.data);
      return analysisResult;
    case 'IMAGE_GENERATION':
      const image = await generateImageFromText(node.textDescription);
      return image;
    default:
      console.log('Unknown node type');
  }
}

日志系统、上下文变量池、错误机制

在实际的流程引擎设计中, 整体执行日志上下文变量池错误处理机制 等都是至关重要的组成部分,它们对流程的执行、监控和调试具有重要意义。

整体执行日志

背景与价值

执行日志是对流程执行过程的全面记录,它能够帮助开发人员和系统管理员了解流程的执行状态,包括每个节点的执行情况、执行时间、返回结果和错误信息等。在复杂的工作流中,执行日志不仅是调试和问题排查的重要工具,而且能为业务人员提供透明的流程监控。

如何实现

在每个节点执行前后,流程执行器应该记录日志。一般来说,日志包括:

  • 节点开始执行的时间
  • 节点执行的输入和输出数据 (如果有敏感数据,需加密或遮盖)。
  • 节点执行的状态 (成功或失败)。
  • 执行的错误信息 (如果节点执行失败)。

实现方案

以下是一个基于异步执行的流程日志记录方案,假设每个节点执行时都记录相应的日志。

async function logAndExecute(nodeId) {
  const node = getNode(nodeId);
  const startTime = new Date();
  // 记录节点开始执行的日志
  logExecution(nodeId, 'START', startTime);
  try {
    let result;
    switch (node.type) {
      case 'API_CALL':
        result = await callAPI(node.endpoint, node.params);
        break;
      case 'UI_UPDATE':
        result = updateUI(node.data);
        break;
      default:
        throw new Error('Unknown node type');
    }
    const endTime = new Date();
    // 记录节点成功执行的日志
    logExecution(nodeId, 'SUCCESS', endTime, result);
    return result;
  } catch (error) {
    const endTime = new Date();
    // 记录节点执行失败的日志
    logExecution(nodeId, 'FAILURE', endTime, error.message);
    throw error; // 抛出错误继续处理
  }
}
function logExecution(nodeId, status, timestamp, data) {
  const logEntry = {
    nodeId,
    status,
    timestamp,
    data
  };
  console.log(logEntry); // 可替换为日志管理系统,如 ELK Stack 或日志文件
}

通过这种方式,每次节点的执行都会产生一个日志条目,并且捕获执行状态、执行结果等信息。

上下文变量池(Context Variable Pool)

背景与价值

在复杂的工作流中,不同节点之间需要共享上下文信息。上下文变量池用于存储在流程执行过程中不断变化的状态和数据,确保每个节点可以访问到正确的上下文。上下文池的设计要求能够灵活地存储、更新和传递变量,避免每个节点都重复获取和处理相同的数据。

如何实现

上下文变量池应在整个流程执行期间保持全局有效,存储流程执行过程中所有必要的状态信息。这些变量可以是输入数据、计算结果、外部调用的响应数据等。通常,在每个节点执行时,执行器会根据节点的需求从上下文池中获取数据或更新数据。

实现方案

class Context {
  constructor() {
    this.variables = {};
  }
  // 获取上下文变量
  get(variableName) {
    return this.variables[variableName];
  }
  // 设置上下文变量
  set(variableName, value) {
    this.variables[variableName] = value;
  }
  // 清除上下文变量
  clear(variableName) {
    delete this.variables[variableName];
  }
}
// 创建上下文实例
const context = new Context();
// 在节点执行时更新上下文
async function executeNodeWithContext(nodeId) {
  const node = getNode(nodeId);
  const result = await executeNode(node);
  // 假设某些节点的执行结果需要存入上下文变量池
  if (node.saveToContext) {
    context.set(node.contextVariable, result);
  }
  return result;
}
async function executeNode(node) {
  // 假设执行节点的某些操作
  switch (node.type) {
    case 'API_CALL':
      return await callAPI(node.endpoint, node.params);
    default:
      return 'Executed';
  }
}

在这个方案中,每个节点可以访问和更新上下文池中的变量,确保不同节点之间的状态传递和共享。

错误处理机制

背景与价值

错误处理机制是流程执行器中不可或缺的一部分,它确保在流程执行过程中出现异常时能够有适当的应对措施。错误处理不仅仅是简单的日志记录,还应该包括流程的恢复策略、错误重试机制、用户通知等。良好的错误处理能提升系统的鲁棒性,并且帮助业务人员及时发现并解决问题。

如何实现

错误处理机制通常包括以下几种策略:

  1. 全局错误捕获 :流程执行器应该有一个全局错误捕获机制,捕获流程中所有未处理的错误,并记录相关信息。
  2. 节点级别错误处理 :每个节点可以定义自己的错误处理逻辑。例如,当一个 API 请求失败时,可能需要重试请求。
  3. 错误通知 :在关键节点出错时,流程引擎可以向管理员或用户发送通知。
  4. 错误恢复 :对于某些可恢复的错误(例如网络问题),可以设计重试机制。

实现方案

async function executeWithErrorHandling(nodeId) {
  const node = getNode(nodeId);
  try {
    return await executeNode(node);
  } catch (error) {
    // 捕获并记录错误
    logExecution(nodeId, 'ERROR', new Date(), error.message);

    // 进行错误恢复
    if (node.retryOnFailure) {
      return await retryNodeExecution(node);
    } else {
      // 根据需求发送错误通知
      sendErrorNotification(nodeId, error);
      throw error;  // 重抛异常,终止流程执行
    }
  }
}
async function retryNodeExecution(node) {
  let attempts = 0;
  while (attempts < 3) { // 重试三次
    try {
      return await executeNode(node);
    } catch (error) {
      attempts++;
      if (attempts === 3) {
        throw new Error('Maximum retry attempts reached');
      }
    }
  }
}
function sendErrorNotification(nodeId, error) {
  // 发送错误通知给管理员
  console.error(
Error occurred at node ${nodeId}: ${error.message}
);
}

在这个方案中,执行器会处理每个节点的错误,通过重试、通知和日志等方式来确保错误的有效管理。

总结

在实际的流程引擎实现中,以下几个方面是至关重要的:

  1. 执行日志 :记录每个节点的执行状态、输入输出和错误信息,帮助开发人员和运维人员进行调试和监控。
  2. 上下文变量池 :用于存储流程执行中的全局变量,保证节点之间可以共享和传递必要的状态信息。
  3. 错误处理机制 :保证流程在遇到错误时能够正确处理,确保流程的可靠性和系统的健壮性。

这些功能对于一个高效、稳定的流程引擎至关重要,特别是在企业级的工作流中,它们提供了对流程执行的深度控制、监控和管理能力。

专家级 】要构建一个完整生成式 AI 应用引擎,平台生态体系如何实际并实现?

生成式 AI 应用引擎概述

生成式 AI 应用引擎是一个综合性平台,集成了大规模语言模型(LLM)、智能体(Agent)及插件、工作流、触发器等核心组件,目标是通过自动化处理任务、生成内容,提升工作效率并提供个性化服务。

核心功能模块与代码

插件机制(Plugins)

插件化机制允许在生成式 AI 应用引擎中集成外部功能和服务。每个插件都需要实现一个统一的接口,这样可以在不同的模块中进行调用。

插件协议的 Typescript 实现:

// 定义插件接口
interface PluginInterface {
    execute(...args: any[]): any;
}
// 插件示例:天气查询插件
class WeatherPlugin implements PluginInterface {
    execute(location: string): string {
        return 
Weather in ${location} is sunny with 25°C.
;
    }
}
// 插件管理器:用于注册和获取插件
class PluginManager {
    private plugins: Map<string, PluginInterface> = new Map();
    registerPlugin(name: string, plugin: PluginInterface) {
        this.plugins.set(name, plugin);
    }
    getPlugin(name: string): PluginInterface | undefined {
        return this.plugins.get(name);
    }
}
// 插件注册和使用
const pluginManager = new PluginManager();
pluginManager.registerPlugin('weather', new WeatherPlugin());
const weatherPlugin = pluginManager.getPlugin('weather');
if (weatherPlugin) {
    console.log(weatherPlugin.execute("New York"));  // 输出:Weather in New York is sunny with 25°C.
}

详细说明:

  • PluginInterface 定义了插件的通用接口,确保每个插件都有 execute 方法。
  • PluginManager 负责插件的注册和获取,使得插件的扩展和管理变得简单。

插件协议生态体系

在前端开发中,我们可以通过 HTTP 请求与插件进行交互,例如通过 API 调用外部服务数据。插件机制不仅使得代码扩展更加灵活,还能够根据业务需求增加新的功能。

工作流机制(Workflows)

工作流用于自动化地执行一系列任务。每个任务被封装为一个“节点”,工作流按照节点顺序执行。

工作流节点的 Typescript 实现:

// 定义节点接口
interface Node {
    execute(input: any): any;
}
// 模型节点:处理生成式 AI 模型的任务
class ModelNode implements Node {
    execute(data: string): string {
        return 
Processed by Model Node: ${data}
;
    }
}
// 插件节点:调用外部插件
class PluginNode implements Node {
    execute(data: string): string {
        const pluginManager = new PluginManager();
        pluginManager.registerPlugin('weather', new WeatherPlugin());
        const weatherPlugin = pluginManager.getPlugin('weather');
        if (weatherPlugin) {
            return weatherPlugin.execute(data);
        }
        return "Plugin not found";
    }
}
// 工作流类:管理节点并执行任务
class Workflow {
    private nodes: Node[] = [];
    addNode(node: Node) {
        this.nodes.push(node);
    }
    execute(input: any): any {
        return this.nodes.reduce((result, node) => node.execute(result), input);
    }
}
// 创建并执行工作流
const workflow = new Workflow();
workflow.addNode(new ModelNode());
workflow.addNode(new PluginNode());
const result = workflow.execute("New York");
console.log(result);  // 输出:Weather in New York is sunny with 25°C.

详细说明:

  • Node 接口为所有工作流节点定义了统一的 execute 方法。
  • Workflow 类管理工作流中的节点并依次执行。
  • 每个节点可以是不同的任务类型,例如模型任务(文本生成)或插件任务(获取外部数据)。

工作流的实际应用

工作流能够帮助开发者实现复杂的业务逻辑,将各个任务分解为简单的步骤。在前端应用中,可以通过按钮点击、表单提交等事件触发工作流。

触发器机制(Triggers)

触发器用于根据某些条件(如用户输入)自动触发特定的操作。触发器通常在前端根据用户行为或系统状态来触发工作流或插件。

触发器的 Typescript 实现:

// 定义触发器接口
interface Trigger {
    checkAndTrigger(userInput: string): boolean;
}
// 触发器实现:基于用户输入的触发
class UserInputTrigger implements Trigger {
    constructor(private condition: (input: string) => boolean) {}
    checkAndTrigger(userInput: string): boolean {
        if (this.condition(userInput)) {
            console.log(
Triggering task based on input: ${userInput}
);
            return true;
        }
        return false;
    }
}
// 使用触发器
const trigger = new UserInputTrigger(input => input.toLowerCase() === "weather");
if (trigger.checkAndTrigger("Weather")) {
    console.log("Weather plugin triggered");
}

详细说明:

  • Trigger 接口定义了检查用户输入的条件,并决定是否触发任务。
  • UserInputTrigger 类实现了触发器,根据输入内容决定是否执行相关操作。

知识库节点(Knowledge Base)

知识库节点帮助生成式 AI 从数据库或其他存储中检索信息并生成回答。

知识库的 Typescript 实现:

// 知识库类
class KnowledgeBase {
    private db: { [key: string]: string } = {
        'AI': 'Artificial Intelligence is the simulation of human intelligence.',
        'ML': 'Machine Learning is a subset of AI that involves algorithms learning from data.'
    };
    search(query: string): string {
        return this.db[query] || 'No information found.';
    }
}
// 使用知识库节点
const knowledgeBase = new KnowledgeBase();
console.log(knowledgeBase.search('AI'));  // 输出:Artificial Intelligence is the simulation of human intelligence.

详细说明:

  • KnowledgeBase 类模拟了一个简单的知识库,它存储了键值对并提供查询接口。
  • 知识库可以扩展为集成外部 API 或数据库的复杂应用。

⚠️ 暂不支持的文档区域,【文档小组件】

工作流核心串联

工作流是生成式 AI 引擎中的一个核心模块,它通过一系列有序的节点来自动化执行任务。每个节点代表一个处理单元,工作流则是由这些节点组成的自动化任务链条。节点之间的连接和顺序决定了整个流程的逻辑和执行方式。

工作流节点(Workflow Nodes)

工作流节点是执行具体任务的模块。每个节点执行一种特定的功能,例如调用模型进行自然语言处理、调用插件获取外部数据、进行条件判断等。

常见节点类型

  • 开始节点(Start Node)

    • 作为工作流的起始点,通常由外部事件或用户输入来触发。
    • 示例:用户提交查询请求时,开始执行工作流。
  • 模型节点(Model Node)

    • 调用生成式 AI 模型(如 GPT)来进行自然语言生成或理解任务。
    • 示例:根据用户的输入生成自然语言文本或回答。
  • 插件节点(Plugin Node)

    • 插件节点负责调用外部插件来处理一些需要集成外部服务的任务,如天气查询、支付处理等。
    • 示例:调用天气插件获取天气信息并将其返回给用户。
  • 业务逻辑节点(Business Logic Node)

    • 业务逻辑节点负责执行基于条件判断或复杂算法的任务。
    • 示例:根据用户输入执行不同的操作,如选择支付时触发支付流程。
  • 子工作流节点(Sub-Workflow Node)

    • 子工作流节点是将一个工作流嵌套到另一个工作流中的机制,使得工作流可以递归调用,提升工作流的可重用性。
    • 示例:将多个步骤封装为子工作流,然后在多个地方调用相同的子工作流。
  • 结束节点(End Node)

    • 作为工作流的结束点,表示工作流的所有任务已经执行完毕。
    • 示例:用户得到最终结果时,工作流执行完毕。

节点编辑和选型

在构建工作流时,选择适当的节点类型非常重要。每个节点都有其特定的功能和应用场景。

如何选择节点

  • 任务类型 :首先需要明确每个任务的目标。是需要生成文本(模型节点)、获取外部数据(插件节点)、还是执行一些自定义业务逻辑(业务逻辑节点)?
  • 模块化设计 :可以将一些常用的任务封装为子工作流(子工作流节点),实现模块化,避免重复设计。
  • 依赖关系 :根据节点间的依赖关系来安排节点的顺序。比如,在执行模型生成任务之前,可能需要先获取外部数据(插件节点)。
  • 性能考虑 :对于需要调用外部 API 的节点,可能会受到网络延迟的影响,选择合适的缓存策略和优化措施非常重要。

编辑工作流

在前端开发中,可以通过可视化编辑器来帮助开发者构建和编辑工作流。用户可以通过拖拽节点、设置节点属性、连接节点等操作来创建一个完整的工作流。

工作流编辑器的基本功能

  • 拖拽节点 :开发者可以从左侧工具栏中选择各种类型的节点,然后将它们拖放到工作流画布上。
  • 设置节点属性 :每个节点都有自己的配置选项,可以根据任务需求进行自定义设置。例如,模型节点可能需要选择模型类型,插件节点需要配置 API 调用地址等。
  • 连接节点 :节点之间通过箭头连接,表示它们的执行顺序。前一个节点执行完毕后,后一个节点才会执行。

工作流执行

工作流的执行是根据节点顺序逐一执行的。每个节点可以接收上一个节点的输出,进行相应处理后将结果传递给下一个节点。

工作流执行流程

  1. 输入接收

    • 用户输入数据或通过 API 接口接收到外部请求。
    • 例如,用户输入一个查询请求,工作流就会从输入节点接收用户数据。
  2. 节点顺序执行

    • 工作流从开始节点(Start Node)开始执行,每个节点按照预设顺序执行。
    • 如果节点类型是模型节点,则调用生成式 AI 模型进行文本生成或问题回答。
    • 如果节点是插件节点,则通过外部插件进行数据获取,如天气查询或支付处理。
  3. 数据传递

    • 每个节点处理完数据后,将结果传递给下一个节点,或者返回最终的结果。
    • 例如,插件节点获取外部数据后,传递给模型节点,模型节点进行进一步处理。
  4. 结束节点

    • 工作流执行完毕后,最后到达结束节点,返回最终结果给用户或外部系统。

工作流执行示例:

假设我们有一个工作流,用于处理用户的天气查询:

  1. 用户输入 :“天气查询”
  2. 触发器 :基于用户输入的“天气查询”触发工作流。
  3. 插件节点 :调用天气插件,查询指定城市的天气信息。
  4. 模型节点 :根据天气插件的返回数据,生成一段自然语言描述天气的文本。
  5. 输出节点 :将最终的天气文本返回给用户。

工作流执行代码示例(Typescript):

interface Node {
    execute(input: any): any;
}
class StartNode implements Node {
    execute(input: string): string {
        console.log("Starting workflow with input:", input);
        return input;
    }
}
class PluginNode implements Node {
    execute(input: string): string {
        // 假设调用外部天气插件
        return 
Weather in ${input} is sunny with 25°C.
;
    }
}
class ModelNode implements Node {
    execute(input: string): string {
        return 
The forecast is: ${input}
;
    }
}
class Workflow {
    private nodes: Node[] = [];
    addNode(node: Node) {
        this.nodes.push(node);
    }
    execute(input: any): any {
        return this.nodes.reduce((result, node) => node.execute(result), input);
    }
}
// 创建工作流并添加节点
const workflow = new Workflow();
workflow.addNode(new StartNode());
workflow.addNode(new PluginNode());
workflow.addNode(new ModelNode());
// 执行工作流
const finalResult = workflow.execute("New York");
console.log(finalResult);  // 输出:The forecast is: Weather in New York is sunny with 25°C.

工作流的优化与扩展

随着需求的复杂化,工作流可能需要进一步优化和扩展。以下是一些优化措施:

  • 缓存机制 :对于频繁调用的插件节点,可以加入缓存机制,避免重复请求相同的数据。
  • 错误处理 :为每个节点添加错误处理机制,当某个节点执行失败时,可以跳过该节点或使用备用方案。
  • 并发执行 :一些任务可以并行执行,例如多个插件节点的调用可以同时进行,而不是顺序执行。

专家简历优化指南(目标 35K+ )

核心技能

  • 熟练掌握 HTML、CSS、JavaScript、Typescript 以及 OOP、FP、 AOP 等设计思想

  • 掌握样式体系构建与落地,对 css 预编译、css in js、module css 以及 utility-first CSS 有深入研究,并从零改良过样式体系以支持 SSR、SSG

  • 熟悉 React、Vue 相关技术栈,熟悉 React、Vue 及相关技术框架的实现原理

  • 掌握构建工具 Webpack、Vite 等,掌握编译工具 Babel,并深入理解其原理,并参与 Rspack 构建

  • 丰富的数据可视化经验,熟悉 Canvas、svg 开发范式,理解 Echarts、Antv 原理,能根据业务需求基于 d3、zrender 开发自定义渲染引擎

  • 丰富的跨端开发经验,熟练使用 Taro、Flutter、React-Native 开发跨端应用,对构建 hybird App 有丰富经验,深入理解跨端开发编译原理

  • 基于 Node.js 开发脚手架、打包构建优化工具及中间件服务

  • 掌握常用设计模式、算法与安全知识,追求开发高质量、高可维护性代码,追求极致产品体验

  • 团队管理经验,并在项目架构设计与性能优化方面具有丰富经验

  • 算法与编程技术

    • 精通各种算法题的分类及解决方法,包括排序与查找、数据结构、动态规划、贪心算法、回溯算法、分治算法、图论算法、数学算法等。
    • 重点掌握动态规划的基本概念、解题步骤和经典题目。
  • 3D 数字孪生平台开发经验

    • 熟练使用 WebGL 和 WebAssembly 技术,开发高效的 3D 渲染引擎。
    • 精通正射影像和倾斜摄影技术,具备 Tile 和模型(包括白膜和精模)的处理经验,能够使用 Blender 进行模型制作。
    • 熟悉材质、光效和粒子系统的实现与优化。
  • 全面性能优化能力

    • 具备打包构建优化经验,熟练使用 Webpack 进行模块打包,掌握 chunk、treeshaking、happypack、cache-loader 等优化技巧,并使用 Webpack Module Federation 进行模块联邦管理。
    • 精通资源优化,能够有效进行图片、字体压缩,管理请求队列,并通过 OSS 和 CDN 提升资源加载速度。
    • 具有应用性能优化经验,包括数据结构优化和应用模块更新。
    • 深入了解缓存机制,熟悉强缓存(Expiration、Cache-Control)、协商缓存(Etag)和策略缓存(Service-Worker)的配置与管理。

项目重难点

这个环节至关重要,很多同学不重视,简历随便写一写就开始投递了,结果投出去几百份可能一家公司面试都没有,结果就在怀疑前端行情出问题了

STAR 法则:

  • 遇到了什么问题 question,需求
  • 怎么评估解决方案,方案对比,方案落地 react 状态管理(redux、mobx、jotai、recoil)Vue3 -> Pinia
  • 具体方案落地
  • 结果反思,细节优化思考

反面案例:

技术栈:Java、Vue2、echarts、WEui、BaiduMap、JavaScript 、HTTP数据库:MySQL管理工具:SVN

责任描述:

1)产品前端研发负责人,主要负责整体样式沟通,样式调配实现;门户、管理平台、移动端、智端、可视化等前端内容实现;

2)实现组织管理、人员管理、党员关系转接、待办通知、绩效考核(复杂功能算法实现)、发展党员(25个流程)、可视化等主体功能,兼容性优化、适配1920*1080屏幕以及响应式布局实现;

3)相关功能开发,包含前后端、数据库;

4)门户框架搭建、门户整体设计、后端接口、门户前端 UI 实现等;

5)微信小程序框架搭建、小程序页面设计及开发、知识图谱技术预演;

6 )项目经理工作辅助,包含需求沟通、UI设计沟通、交付材料项目经历整理、前端代码质量管理、部分功能设计。

项目经历深度优化

工作内容和成果

  • 架构设计 】参与智慧管理平台整体架构设计、技术选型与方案评审,担任全栈开发,完成相关核心模块
  • 企微开发 】对接企业微信生态,基于企微 SDK 完成平台支付、消息推送、机器人等功能开发
  • 可视化 】主导完成平台可视化渲染引擎(可视化图表的组件,数据协议)设计与开发,基于 echarts (svgRenderer、canvasRenderer 一千万行数据的表格渲染【不能使用 虚拟滚动 】 canvas table,chunk)封装业务图表库,服务于平台可视化场景
  • 地图开发 】使用百度地图 SDK,封装业务地图渲染器(MapRenderer),包含:地图撒点、地区数据下钻等功能
  • 小程序与App 】基于 uniapp 实现智慧党建用户端多端开发落地,产物编译为 H5、微信小程序两端应用
  • 团队基建 】推进团队业务组件库、图表库与基础库沉淀,完成 10+ 个业务组件沉淀,以此提升了团队协同开发效率
  • 优化 】设计产品响应式系统,基于 media query 设计响应式端点规则,适配不同端应用的展示
  • 自研 OA 打通 】...

以 STAR 法则梳理

【技术栈】

  • Java、Vue2、ECharts、WEui、BaiduMap、JavaScript、HTTP
  • 数据库 :MySQL
  • 管理工具 :SVN

【产品前端研发负责人】

  • 情境 (Situation) :担任产品前端研发负责人,负责门户、管理平台、移动端、智端、可视化等前端内容的实现。
  • 任务 (Task) :主要任务是与设计团队沟通,调配和实现整体样式,确保产品界面的一致性和用户体验。
  • 行动 (Action) :我协调设计与开发团队,定期召开样式沟通会,亲自进行样式的调配与实现,并负责不同平台和设备的前端内容开发。
  • 结果 (Result) :成功实现了多个平台的前端开发工作,提升了产品的用户体验和一致性,获得了团队和用户的高度评价。

【实现复杂功能及优化】

  • 情境 (Situation) :项目需要实现复杂功能算法和大规模功能模块,包括组织管理、人员管理、党员关系转接、待办通知、绩效考核、发展党员(25个流程)和可视化功能。
  • 任务 (Task) :负责上述复杂功能的实现,并优化其兼容性和响应式布局。
  • 行动 (Action) :通过设计和实现复杂算法,确保各模块的功能性;进行兼容性优化,使系统适配1920*1080屏幕和响应式布局。
  • 结果 (Result) :成功实现并优化了所有复杂功能,系统在不同设备和分辨率下均表现良好,提高了用户操作的流畅度和满意度。

【全面功能开发】

  • 情境 (Situation) :需要进行前后端和数据库的全面开发,确保系统各功能模块的无缝集成。
  • 任务 (Task) :开发和实现相关功能,包括前端UI、后端接口和数据库交互。
  • 行动 (Action) :采用Java、Vue2等技术,开发并调试各功能模块,与后端团队密切合作,确保接口的准确性和数据的一致性。
  • 结果 (Result) :成功完成了所有功能模块的开发和集成,系统运行稳定,性能优异,受到了客户的好评。

【微信小程序开发与知识图谱预演】

  • 情境 (Situation) :项目需要开发微信小程序,并进行知识图谱技术的预演。
  • 任务 (Task) :负责小程序框架的搭建、页面设计及开发,同时进行知识图谱的技术预演。
  • 行动 (Action) :使用WEui、JavaScript等技术,设计并开发小程序页面,进行知识图谱的技术预演和验证。
  • 结果 (Result) :成功搭建了微信小程序框架,完成了页面设计和开发工作,知识图谱技术预演顺利,通过了技术验证。

【项目经理工作辅助】

  • 情境 (Situation) :在项目中辅助项目经理,确保项目需求沟通顺畅,UI设计协调到位,交付材料齐全,前端代码质量高。
  • 任务 (Task) :辅助项目经理进行需求沟通、UI设计沟通、交付材料整理、前端代码质量管理以及部分功能设计。
  • 行动 (Action) :积极参与需求和UI设计的沟通,整理和管理项目交付材料,进行代码审查和质量管理,并参与功能设计。
  • 结果 (Result) :成功辅助项目经理完成了项目的各项工作,提高了项目的开发效率和交付质量,确保了项目的顺利进行。

高级项目实战提升简历看点

你可能不具备这些项目的实战经验,很多同学写了很多年管理系统,简单增删改查项目,如果不跳出这个圈子,很难在薪资上有非常大的突破!

  • 大厂 UI 组件库(Vue3)整体设计与开发实践(monorepo 架构)

  • 大厂业务 Hooks 库(React 18)整体设计与开发实践(从零到一的架构、规范流程)

  • 企业级脚手架工具开发实践

  • 企业级文档编辑器飞书文档开发实践

  • 前端性能、异常与行为监控

  • 3D 可视化数字孪生低代码实战 💥

    • 基于 cesium(arcGis、超图) 方案的 WebGIS 开发实践
    • 基于 openlayer、mapbox 开发
    • 基于 WebGL 3D 可视化开发实践

冲刺年包 50W+ 薪资长线规划

冲刺核心要素

  1. 全面的技术储备

    1. 框架基础

      • Vue 和 React 经验:包括 Vue3 + Typescript 和 React18(Hooks、Concurrent)
      • 掌握框架原理:React 生态库(React-Router、Redux)和 Vue 生态库原理
    2. 工程化能力

      • 构建工具:Webpack、Vite、Rspack、ESBuild、swc
      • CI/CD 自动化:自动化构建和自动化部署
    3. 基建能力

      • Node.js、命令行工具开发(Cli)
      • UI 库、图表库、工具库开发
    4. 业务领域经验

      • 管理系统和图表类应用
      • 可视化、编辑器、云表格、低代码平台、SaaS 产品、数字孪生、三维可视化
  2. 项目经验

    • 参与过至少两个大型项目,并主导过一个复杂项目
    1. 管理系统:包括项目搭建、技术方案选择、技术栈构建、CI/CD 流程
    2. 其他领域项目:如可视化、编辑器、云表格、低代码平台、SaaS 产品、数字孪生、三维可视化
  3. 面试表现

    1. 个人介绍

      • 准备个人介绍草稿,涵盖基本信息、技术栈和项目重难点
    2. STAR 法则

      • 问题描述:阐述遇到的问题或需求
      • 解决方案评估:方案对比与选择(如 React 状态管理:redux、mobx、jotai、recoil,Vue3 使用 Pinia)
      • 方案实施:具体的实施步骤
      • 反思与优化:项目反思及优化建议
    3. 面试准备

      • 重点复习知识点:如 v8 内存管理、Promise A+ 规范、事件循环、this、面向对象编程原型
      • 技术储备:结合项目经验展示技术在项目中的应用
  4. 学历提升

    1. 现有学历:大专
    2. 未来计划:尽快取得本科证书(不需要注明具体年限)
    3. 学历背景:民办学校
    4. 内推建议:应对学历和工作经历问题,通过内推提升机会

自身短板与补益

  • 项目简单,管理后台一做就是大半年,天天 CRUD

    • 看开源项目(react-hook-form ts 类型、hook 处理、状态管理、架构 Provider,keyPath)
    • 找一些不错的项目练手
    • 拿好的项目,学习完放在简历里, 可视化、编辑器、云表格、低代码、SaaS 产品、数字孪生、三维可视化
    • 1.自研:15K, 2.外包:20K ,这个火坑, 灰(供需决定)
  • 技术栈掌握不深不广,只会用 Vue2 (Vue3 + Typescript),React18(React stack reconciler)

  • 架构、方案设计没碰过

    • React,create-react-app、umi,没有真正从零到一去设计初始化过一个项目
    • Vue,Vue CLI,Vite/Webpack。Vue2 CLI 创出来项目 1. webpack、2.vite
  • 没有专精的技能或业务

    • 自驱 (假定自己是 Leader),项目的赢利点、商业价值【 可视化、编辑器、白板、团队基建、AI产品
    • 与生俱来有些东西,好奇心、自驱力、清晰规划
    • 我:管理平台,HPE(官网、后台管理),云表格(维格表、飞书云表格)、云编辑器(CKEditor 老【html string】)(语雀、【石墨文档】)

妙码学院——全程陪跑、督学、真·企业级全栈项目、内推

⚠️ 暂不支持的文档区域,【文档小组件】

  • 跨端开发 Taro(Taro 编译器 compiler、运行时 runtime)、uniapp
  • 协同编辑器(文档类、画板类)
  • 团队基建工程(UI 库、图表库、Cli -> 产生产物 npm 包)
  • 3D 可视化数字孪生 bigdata
  • 低代码平台

课程体系 2.0 升级,除了基础知识夯实,融入了更多项目实战内容,包含:

  • 企业级脚手架工具开发实践

  • 企业级文档编辑器飞书文档开发实践

  • 大厂 UI 组件库(Vue3)整体设计与开发实践

  • 大厂业务 Hooks 库(React 18)整体设计与开发实践

  • 埋点与数据监控平台实战

  • 3D 可视化数字孪生实战 💥

    • 基于 cesium 方案的 WebGIS 开发实践
    • 基于 WebGL 3D 可视化开发实践

妙码学院全网独家项目实战矩阵

所有项目实战,均完全 从零到一手写纯原创 ,项目架构与编码规范真一线大厂级。

  • 微前端在分拆原子应用场景下的落地与实践

  • 类飞书文档协同编辑器从零到一架构实现

  • 推动团队基建落地

    • React UI 库
    • Vue Composition API 库
    • 企业级脚手架
  • 数字孪生平台整体架构设计

  • 企业级无代码可视化平台实践(Vue3)

  • 低代码平台设计与实现

    • 编排引擎
    • 流程引擎
    • 编辑器
    • 代码执行器与 JavaScript 沙箱
  • 用户行为分析 SDK 及监控可视化平台架构设计与实现

  • 可视化渲染引擎设计与实现

  • 基于 RAG / Agent 前端 AI 应用流程编排平台

前端阶段性能力与冲刺目标

以下是对您提供的内容进行权威和专业化改写的建议:

1~3 年

在此阶段,重点在于评估个人的基础知识和热情。对前端基础、计算机原理、网络通信和算法等领域的要求较高。由于在此阶段难以评估业务深度,因此更多关注基础知识的掌握程度。

  • 关键在于通过学术教育或网络资源加强基础知识;
  • 在简历中以多种方式展示对前端的热情,展现个人潜力;
  • 积极探索前沿技术,关注国内外技术动态;
  • 尝试开发小型项目或参与社区开源项目;
  • 建立技术博客,以输出促进知识吸收。

3~5 年

此阶段通常是向成为独立工程师发展的关键时期,避免重复使用有限的经验。

  • 关注社区中关于进阶的资料和路线,强化基础知识;

  • 深入掌握常用框架的高级用法,探索其原理;

  • 在业务开发中不仅完成功能,还需考虑项目结构设计、封装基础工具、设计和开发基础组件;

  • 思考提高团队效率的方法,例如:

    • 集成代码检验和风格统一插件(如 eslint、stylelint、prettier、spellcheck);
    • 从工程化角度提高本地开发效率,优化webpack构建,探索esbuild、vite等工具;
    • 对于多项目开发,整理差异和统一部分,建立内部脚手架以减少重复工作;
    • 尝试搭建CI/CD平台,维护公司内部的通用npm包;
    • 培养软技能,如沟通协作,协调各角色共同推进目标。

5年+

进入此阶段,可能朝技术专家或管理方向发展。期望您能够独立负责高复杂度项目,突破关键技术难题。

  • 负责技术调研,关注行业趋势,选择最优技术方案,具备决策能力;
  • 拥有丰富的技术经验和技术储备,能够解决遇到的困难,并有自己的方法论;
  • 协助或主导业务目标制定,合理推动项目达成预期效果;
  • 是否具有团队领导经验,能够协调跨团队项目,处理团队成员情绪问题,解决技能分布不平衡等问题;
  • 打造技术氛围,促进团队共同成长。

【未知组件reminder】