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

ai-notes.zip

很多同学可能第一次来，我分享了那摩多干货公开课，不允许你不知道！都在这里，需要 文档和配套视频找咨询老师 领取~

【飞书文档】备战金九银十，进阶大前端，涨薪全突破！

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

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

【飞书文档】面试被算法干吐了？字节大佬带你突破极限，冲击 30K+ 必掌握算法与 WebAssembly 技术

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

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

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

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

自顶向下，react 架构，dom 操作

React react-dom scheduler react-Reconciler

hooks？函数式编程思想，代数模型

数据结构：优先队列、小根堆、fiber

算法：

LLM 相对落地的可发展领域

个人开发者

Prompt设计和优化

  • 初步学习 ：学习如何设计有效的prompt。可以从简单的任务入手，如问答系统、文本生成等。
  • 实验和迭代 ：通过不断实验和调整prompt，观察模型的输出，逐步优化prompt的设计。
  • 工具和平台 ：使用现有的AI工具和平台，如OpenAI的GPT-3、ChatGPT等，进行快速开发和测试。

应用场景

  • 写作助手 ：开发可以帮助用户写作的工具，如文章生成、句子补全、内容改写等。
  • 学习辅助 ：创建用于语言学习、问题解答、知识查询的AI助手。
  • 个人项目 ：结合个人兴趣，开发创意性的AI应用，如诗歌生成、代码生成等。

小型团队或初创公司

定位业务需求

  • 需求分析 ：识别业务中的具体需求，确定AI应用可以解决的问题。
  • 用户调研 ：通过用户调研了解目标用户的痛点和需求，从而设计针对性的AI解决方案。

原型设计和开发

  • 快速原型 ：使用现成的AI模型和API（如OpenAI API）快速开发应用原型，验证概念。
  • 反馈迭代 ：将原型提供给一部分用户使用，收集反馈，快速迭代优化产品。

具体应用案例

  • 客服聊天机器人 ：开发自动化客服系统，提升客户服务效率。
  • 内容生成工具 ：如自动化内容营销工具，帮助企业生成营销文案、博客文章等。
  • 数据分析和报告 ：开发基于AI的数据分析和报告生成工具，提升业务决策效率。

大型企业

战略规划

  • 长期战略 ：制定AI技术的长期发展战略，明确AI技术在企业业务中的定位和目标。
  • 资源投入 ：投入足够的资源（如人才、资金、技术）来支持AI项目的开发和落地。

业务集成

  • 现有业务优化 ：利用AI技术优化现有业务流程，如供应链管理、客户关系管理、运营分析等。
  • 创新业务模式 ：通过AI技术探索新的业务模式和市场机会，如个性化推荐系统、智能制造等。

平台和基础设施

  • 数据平台建设 ：构建企业级数据平台，支持大规模数据的采集、存储、处理和分析。
  • AI开发平台 ：搭建内部AI开发平台，提供统一的模型训练、部署和管理工具。

具体应用案例

  • 智能客服系统 ：大规模部署智能客服系统，处理大量客户咨询，提高服务效率和客户满意度。
  • 市场分析和预测 ：利用AI技术进行市场趋势分析和销售预测，支持战略决策。
  • 智能推荐系统 ：开发个性化推荐系统，提升用户体验和销售转化率。

跨行业应用

医疗

  • 疾病预测和诊断 ：利用AI技术进行疾病预测和诊断，提高医疗效率和准确性。
  • 个性化医疗 ：通过AI分析患者数据，提供个性化治疗方案。

金融

  • 风险控制 ：开发AI模型进行风险预测和控制，提高金融产品的安全性。
  • 智能投顾 ：提供基于AI的投资建议，帮助用户进行理财决策。

教育

  • 智能教学助手 ：开发智能教学助手，提供个性化学习方案和即时反馈。
  • 教育数据分析 ：利用AI技术分析学生数据，提升教育质量和管理水平。

AI 应用核心概念

AI，不是在训练模型就是在训练模型的路上，所以，AI 好坏的评判就是在模型上，模型需要数据训练，结果生成后调优。

AI，不折不扣地践行“知行合一”，知是行之始，行是知之成。

训练

训练是AI模型开发过程中的一个关键步骤，涉及以下几个方面：

  1. 数据收集和准备 ：训练模型需要大量的高质量数据，这些数据需要经过收集、清洗和标注，确保数据的准确性和相关性。

  3. 特征提取和工程 ：从原始数据中提取有用的特征，这是模型能够理解和学习数据的重要前提。特征工程包括数据的归一化、标准化、降维等处理方法。

  4. 模型选择 ：根据具体任务选择合适的模型类型，例如神经网络、决策树、支持向量机等。

  5. 训练过程 ：将准备好的数据输入模型进行训练，这个过程通常涉及迭代优化算法（如梯度下降法）来调整模型的参数，使其在训练数据上的表现尽可能好。

  6. 验证和测试 ：使用独立的验证数据集和测试数据集来评估模型的性能，确保其在未知数据上的泛化能力。

  7. 超参数调优 ：通过调整模型的超参数（如学习率、正则化参数等），进一步优化模型的性能。

模型

模型在AI应用中扮演着核心角色：

  1. 定义和结构 ：模型的结构决定了它如何处理输入数据和生成输出结果。不同任务会使用不同的模型结构，如卷积神经网络（CNN）适用于图像处理，循环神经网络（RNN）适用于序列数据处理。

  2. 训练后的知识储备 ：经过训练的模型包含了从数据中学习到的模式和知识，当遇到新问题时，可以利用这些知识进行推理和决策。

  3. 推理能力 ：训练好的模型能够对新的、未见过的数据进行推理，输出预测结果。这一过程不需要再次训练，只需提供新数据即可生成结果。

常见模型：

  1. GPT-3.5 模型
  2. GPT-4（生成式预训练变换器 4）
  3. GPT-4o
  4. BERT（变压器双向编码器表示法）
  5. T5（文本到文本转换器）
  6. XLNet（极限学习机器网络）
  7. DistilBERT（由 Hugging Face 创建） https://huggingface.co/distilbert
  8. Claude（由 Anthropic 公司创造）
  9. 字节豆包

Prompt

Prompt在AI与用户交互中起着至关重要的作用：

  1. 定义 ：Prompt是用户给模型提供的指令或提示，用于引导模型产生特定的输出。例如，在自然语言处理任务中，prompt可以是一个问题、一个不完整的句子等。

  2. 设计 ：设计有效的prompt是确保模型产生高质量输出的重要因素。好的prompt应该明确、具体，并与模型的训练数据和任务相关。

  3. 应用场景 ：Prompt广泛应用于各种AI任务中，如对话系统、文本生成、代码补全等。通过提供不同的prompt，用户可以实现多种多样的功能。

输出

输出是AI模型根据输入的prompt生成的结果，质量和准确性至关重要：

  1. 形式 ：输出可以是多种形式的，如文本、图像、音频等，取决于具体的任务和模型的类型。

  2. 评价指标 ：评估输出质量的方法包括准确率、精确率、召回率、F1分数等，这些指标帮助量化模型的表现。

  3. 调优和改进 ：通过分析输出结果，可以发现模型的不足之处，从而进行针对性的调优和改进。包括重新训练模型、优化prompt设计、增加数据量等方法。

知行合一——AI 大师

知（知识的积累）

  1. 数据学习 ：AI通过训练数据学习和积累知识，这一过程类似于人类通过阅读和学习积累知识。

  2. 知识存储 ：模型训练完毕后，所有从数据中学到的模式和规律都储存在模型的参数中。

行（知识的应用）

  1. 实际应用 ：训练好的模型在现实世界中应用于各种任务，如语音识别、图像分类、自动驾驶等，解决实际问题。

  2. 反馈与改进 ：通过应用中获得的反馈，不断改进和优化模型，实现“知行合一”，即知识的积累和应用的循环提升。

总的来说，AI的应用核心在于通过不断的训练和优化模型，实现从数据学习到实际应用的循环，以解决实际问题并不断提升其性能和价值。

AI 重点技术/方法

SHE

RAG（Retrieval-Augmented Generation）

RAG是一种结合信息检索和生成模型的技术，旨在提升生成文本的质量和准确性。它的核心思想是先从一个大型数据库中检索相关信息，然后将这些信息作为上下文输入到生成模型中，以生成更为准确和相关的输出。

  1. 信息检索 ：

    • 步骤 ：在生成文本之前，RAG模型首先从一个预定义的知识库或文档集合中检索与输入相关的信息。这一步通常使用检索模型（如BM25或DPR，Dense Passage Retrieval）。
    • 作用 ：这一步的目的是找到与输入相关的背景信息，帮助生成模型了解更多的上下文，从而生成更有意义和准确的输出。

  2. 生成模型 ：

    • 步骤 ：检索到的信息被输入到生成模型（如GPT-3或BERT）中，该模型基于这些信息和原始输入生成最终的输出。
    • 作用 ：生成模型利用检索到的信息增强其生成能力，使其能够在更丰富的上下文基础上生成更准确和相关的内容。

  3. 优势 ：

    • 提高准确性 ：通过检索相关信息，RAG模型可以生成更加准确和相关的文本，尤其在回答问题或提供具体信息时效果显著。
    • 知识扩展 ：RAG模型可以动态地从大型知识库中获取信息，使其能够应对更多样化和复杂的问题。

Agent

在AI领域，Agent（智能体）通常指能够感知环境并采取行动以实现特定目标的自主实体。AI Agent可以应用于多种任务，从简单的自动化任务到复杂的决策系统。以下是AI Agent的主要特征和应用：

  1. 感知（Perception） ：

    • 定义 ：Agent能够通过传感器或数据接口感知其环境。感知的内容可以是视觉、声音、文本数据或其他形式的信息。
    • 作用 ：感知能力使Agent能够获取当前环境状态，并基于这些信息做出决策。

  2. 决策（Decision Making） ：

    • 定义 ：Agent根据其感知到的信息和内部模型或策略做出决策。这些决策通常是为了实现特定的目标或最大化某种效用。
    • 作用 ：决策过程是Agent行动的核心，决定了Agent如何响应环境变化和任务需求。

  3. 行动（Action） ：

    • 定义 ：Agent在决策后执行具体的行动。这些行动可以是物理运动、发送指令、生成文本等。
    • 作用 ：通过行动，Agent能够对环境产生影响，推进其目标的实现。

  4. 学习（Learning） ：

    • 定义 ：高级AI Agent具有学习能力，可以通过交互和反馈不断改进其感知、决策和行动策略。
    • 作用 ：学习能力使Agent能够在动态环境中适应变化，持续优化其性能。

  5. 应用场景 ：

    • 游戏和仿真 ：Agent在虚拟环境中进行任务和挑战，如游戏中的对手角色或模拟器中的驾驶系统。
    • 自动化 ：Agent用于自动化任务，如客服聊天机器人、智能助手、自动驾驶汽车等。
    • 决策支持 ：Agent在金融、医疗等领域提供智能决策支持，如股票交易机器人、诊断辅助系统等。

Transformer 模型

Transformer 是一种深度学习模型架构，特别适用于处理序列数据（如文本）。Transformer模型使用自注意力机制来并行处理序列数据，大大提高了效率和性能。

  • 自注意力机制 ：允许模型关注序列中的不同部分，提高对上下文的理解。
  • BERT （Bidirectional Encoder Representations from Transformers）：一个预训练的语言模型，通过掩蔽语言建模和下一句预测任务进行训练，适用于多种NLP任务。
  • GPT （Generative Pre-trained Transformer）：一个生成型语言模型，擅长文本生成、对话系统等任务。

GAN（生成对抗网络）

GAN 是一种生成模型，由两个神经网络（生成器和判别器）组成，互相对抗进行训练。

  • 生成器 ：尝试生成看起来真实的样本。
  • 判别器 ：尝试区分真实样本和生成样本。
  • 应用 ：图像生成、图像修复、风格转换等。

强化学习（Reinforcement Learning）

强化学习 是一种训练代理的方法，通过奖励和惩罚机制让代理学习如何在环境中采取行动以最大化累计奖励。

  • Q-learning ：一种无模型强化学习算法，通过估算状态-动作对的价值来指导代理行动。
  • Deep Q-Networks (DQN) ：结合深度学习的Q-learning，用神经网络来近似Q值函数。
  • 政策梯度方法 ：直接优化策略函数，适用于复杂、高维的动作空间。

自监督学习（Self-Supervised Learning）

自监督学习 是一种不需要人工标注数据的学习方法，通过设计任务让模型从数据本身学习有用的特征。

  • 预训练任务 ：如预测下一个词、恢复被掩蔽的词等。
  • 应用 ：自然语言处理、计算机视觉等领域。

图神经网络（Graph Neural Networks, GNN）

图神经网络 是一种专门处理图结构数据的神经网络，用于捕捉节点和边之间的关系。

  • 应用 ：社交网络分析、推荐系统、分子结构分析等。

迁移学习（Transfer Learning）

迁移学习 是一种将从一个任务中学到的知识应用到不同但相关任务中的技术，通常用于解决数据匮乏问题。

  • 预训练和微调 ：在大规模数据上预训练模型，然后在目标任务上进行微调。
  • 应用 ：图像分类、自然语言处理等。

联邦学习（Federated Learning）

联邦学习 是一种分布式机器学习方法，允许模型在多个节点上训练，而不需要将数据集中到一个中心服务器。

  • 隐私保护 ：通过在本地数据上训练模型，提高数据隐私。
  • 应用 ：医疗、金融等对数据隐私要求高的领域。

神经架构搜索（Neural Architecture Search, NAS）

神经架构搜索 是一种自动化设计神经网络架构的方法，通过搜索算法找到最优的网络结构。

  • 提高效率 ：减少人工设计网络结构的时间和成本。
  • 应用 ：图像识别、自然语言处理等。

AI 应用开发切入点（字节业务向探讨）

  • 文档续写/助手
  • 低代码应用生成
  • 业务系统 AI 设计搭建

低代码应用生成

低代码应用生成，主要在于 AI 服务层、AI 服务对接、后置处理。

核心

AI 服务层

AI服务层是低代码应用生成的基础，提供各种AI功能，提供将 AI 流程定义好，然后通过服务的形式提供输出 API 。

AI服务层特点：

  • 预构建AI模型 ：提供一系列预构建的AI模型，用户可以直接使用这些模型进行文本分析、图像处理等任务。
  • 模型供应商 ：用户可以在平台上选择AI模型，满足特定业务需求。

AI 服务对接

AI服务对接是将AI模型和服务集成到低代码应用中的过程。这一步骤包括调用API、处理数据输入输出等。

AI服务对接特点：

  • API集成 ：提供简化的API集成方式，用户可以通过拖拽组件、配置参数来调用AI服务，无需编写复杂的代码。
  • 数据连接器 ：支持与多种数据源连接，如数据库、云存储等，方便将数据输入到AI模型中进行处理。
  • 实时处理 ：支持实时数据处理和批处理模式，满足不同应用场景的需求。

后置处理

后置处理是对AI服务输出的结果进行进一步处理和优化的过程。这一步骤确保输出结果符合业务需求，并可以直接用于最终应用。

后置处理特点：

  • 结果校正 ：提供结果校正和优化工具，用户可以根据业务逻辑对AI输出结果进行调整。
  • 工作流编排 ：用户可以在平台上定义复杂的工作流，自动化处理多个AI服务的输出，形成完整的业务流程。
  • 可视化工具 ：提供数据可视化工具，帮助用户分析和展示AI处理结果，提升决策效率。

AI 工作流编排

AI工作流编排是指在低代码平台上设计和管理多个AI服务之间的交互和处理流程。

AI工作流编排特点：

  • 可视化编排 ：通过拖拽组件的方式，用户可以在Dify平台上轻松设计复杂的工作流。
  • 条件逻辑 ：支持条件逻辑和分支处理，用户可以根据不同的输入和中间结果，动态调整工作流。
  • 任务调度 ：提供任务调度和监控功能，确保工作流按预定计划执行，并在异常情况下及时报警。

AI 服务对接

AI服务对接涉及与外部AI服务和数据源进行通信和数据交换。

AI服务对接特点：

  • 标准化接口 ：提供标准化的接口和数据格式，简化与不同AI服务的集成。
  • 安全保障 ：在数据传输和处理过程中，Dify提供强大的安全保障机制，确保数据隐私和安全。

DSL 对接

将 AI 服务输出内容，对接到低代码平台，解析 DSL 生成对应页面。

这一步其实是让 AI 通过 Prompt，将生成页面这种灵活度非常高的行为，通过 DSL 约束，约束之后生成的页面内容就更接近我们所想要的形式了。

应用步骤举例

假设我们要开发一个低代码自动生成服务应用：

  1. 选择和配置合适模型模型 ：配置问题分类模型，设置API接口。
  2. 列举 Prompt 并优化 ：定义符合业务流的 Prompt，并优化
  3. 知识库提炼（基于 RAG） ：可将企业已有数据作为可检索数据
  4. 编排工作流 ：拖拽组件，设计工作流，包括 Prompt、检索信息和输出三个主要步骤。
  5. AI服务 API ：提供最终编排好的服务，并能通过 api 访问对应数据。
  6. 后置处理 ：设置结果校正和优化规则，确保最终输出符合业务需求。
  7. 测试和部署 ：在AI开发平台上测试整个AI 工作流，确保无误后部署上线。
  8. 对接低代码 DSL ：将输出内容对接到低代码渲染器，实现页面生成

课外了解： https://www.imagica.ai/

业务系统生成

假设我们要开发一个系统生成服务应用：

  1. 选择和配置合适模型模型 ：配置问题分类模型，设置API接口。
  2. 列举 Prompt 并优化 ：定义符合业务流的 Prompt，并优化
  3. 知识库提炼（基于 RAG） ：可将企业已有数据作为可检索数据
  4. 编排工作流 ：拖拽组件，设计工作流，包括 Prompt、检索信息和输出三个主要步骤。
  5. AI服务 API ：提供最终编排好的服务，并能通过 api 访问对应数据。
  6. 后置处理 ：设置结果校正和优化规则，确保最终输出符合业务需求。
  7. 测试和部署 ：在AI开发平台上测试整个AI 工作流，确保无误后部署上线。
  8. 对接表格 Schema ：将服务生成数据，解析对应到表格 schema，完成字段与行的生成。

课外了解： https://www.feishu.cn/product/base

低代码平台 DSL 相当于是给 AI 加了一层枷锁。

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

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

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

  • 协同编辑器从零到一架构实现

  • 推动团队基建落地

  • 数字孪生平台整体架构设计

  • 低代码平台设计与实现

    • 编排引擎
    • 流程引擎
    • 编辑器
    • 代码执行器与 JavaScript 沙箱

  • 用户行为分析 SDK 及监控可视化整体实现

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

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

简历优化（30K+ 简历样板）

技能描述

  • 熟练掌握 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）【框架基础】
    2. 框架原理，React 生态库原理（React-Router、Redux）、Vue 生态库原理
    3. 工程化（构建工具：Webpack、Vite、Rspack、ESBuild、swc）
    4. CI/CD 自动化，自动化构建、自动化部署
    5. 基建能力（Node、命令行工具开发 Cli），UI 库、图表库、工具库
    6. 业务方面（管理系统、图表类），衍生 -> 可视化、编辑器、云表格、低代码、SaaS 产品、数字孪生、三维可视化

  2. 至少参加过两个以上大型项目，并主导过一个复杂项目

    1. 管理系统，（项目搭建、方案、技术栈、CI/CD 等等）
    2. 可视化、编辑器、云表格、低代码、SaaS 产品、数字孪生、三维可视化

  3. 面试表现好

    1. 个人介绍【 打个草稿 】，基本信息、技术栈、项目重难点

    2. STAR：

      • 遇到了什么问题 question，需求
      • 怎么评估解决方案，方案对比，方案落地 react 状态管理（redux、mobx、jotai、recoil）Vue3 -> Pinia
      • 方案落地
      • 反思，优化
    • 面试过程中，重点去复习只是重难点（v8 内存管理、Promise A+ 规范、事件循环、this、面向对象编程原型）
    • 技术储备，由你的项目经验体验，技术怎样在你的项目中落地的

  4. 学历

    1. 大专，尽快考一个本科证（年限去掉）
    2. 民办
    3. 内推，学历问题、工作经历的问题

补足短板

  • 项目简单，管理后台一做就是大半年，天天 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
  • 协同编辑器（文档类、画板类）wangEditor、CKEditor
  • 团队基建工程（UI 库、图表库、Cli -> 产生产物 npm 包）
  • 3D 可视化数字孪生 bigdata
  • 低代码平台

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

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

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

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

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

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

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

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

不同阶段对前端人的硬性要求

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

1~3年

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

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

3~5年

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

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

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

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

  • 思考提高团队效率的方法，例如：

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

5年以上

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

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

职业规划指导

评论区选取三位同学互动，其他同学也可以联系咨询老师，文字方式提供辅导解答。

【未知组件reminder】