前端技术能力全景梳理

业务方向

低代码/无代码（Low Code/No Code）

• 产品示例：阿里云-宜搭

  • 功能：企业级低代码应用构建平台
  • 特点：拖拽式页面搭建、流程编排、数据集成
  • 技术：Node.js、Vue.js、Ant Design

• 产品示例：腾讯云-微搭

  • 功能：无代码平台，支持小程序和 Web 应用开发
  • 特点：跨平台应用、内置模板库、流程自动化
  • 技术：Node.js、React、Ant Design

• 产品示例：ClickPaas

  • 功能：低代码开发与应用集成

  • 特点：支持多类型业务系统集成、强大的数据建模

  • 技术：Node.js、React、Ant Design

lowcode: retool、iila cloud

nocode: glide、ramer

客户关系管理（CRM）

• 产品示例：销售易

  • 功能：智能 CRM 与销售管理平台

  • 特点：全渠道销售、数据驱动、AI 推荐

  • 技术：Node.js、Vue.js、Ant Design

• 产品示例：纷享销客

  • 功能：移动办公与客户关系管理

  • 特点：全渠道营销、智能销售预测、客户全生命周期管理

  • 技术：Java、JavaScript、Spring Boot

数字孪生

• 产品示例：易知微

  • 功能：数字孪生低代码
  • 特点：拖拉拽实现数字孪生需求
  • 技术：Node.js、React、WebGL

• 产品示例：阿里云-达摩院城市大脑

  • 功能：智慧城市与数字孪生平台
  • 特点：城市数据融合、实时分析与智能决策
  • 技术：Node.js、React、WebGL

• 产品示例：腾讯-数字孪生城市

  • 功能：城市级数字孪生与智慧管理
  • 特点：多层级数据融合、实时渲染、决策支持
  • 技术：Node.js、Three.js、WebGL

商业智能（BI）

• 产品示例：阿里云-Quick Bi
  • 功能：企业级商业智能与数据可视化
  • 特点：自助数据分析、丰富数据源、拖拽式报表
  • 技术：Node.js、React、AntV
• 产品示例：腾讯云-云慧 BI
  • 功能：全流程商业智能与数据洞察平台
  • 特点：内置分析模型、多维度可视化、实时数据监控
  • 技术：Node.js、Vue.js、AntV
• 产品示例：帆软-FineBI
  • 功能：企业级商业智能与自助数据分析
  • 特点：自助式分析、动态报表、智能预警
  • 技术：Java、JavaScript、Ant Design
• 产品示例：致远互联-氚云
  • 功能：自助式商业智能与可视化报表
  • 特点：跨部门数据整合、多维度分析、预测分析
  • 技术：Node.js、Vue.js、AntV

bdp、powerBI

内容管理与发布（CMS）

• 产品示例：WordPress
  • 功能：博客、网站的内容创建与管理
  • 特点：灵活的主题与插件系统
  • 技术：PHP、JavaScript、Gutenberg 编辑器
• 产品示例：Contentful
  • 功能：内容管理与 API 交付
  • 特点：无头 CMS，GraphQL API
  • 技术：Node.js、React、GraphQL

电子商务

• 产品示例：Shopify
  • 功能：在线商店与支付系统
  • 特点：灵活的模版与插件系统
  • 技术：React、Liquid、GraphQL
• 产品示例：Magento
  • 功能：电子商务平台与多渠道零售
  • 特点：支持 B2B 和 B2C 业务、可定制性强
  • 技术：PHP、JavaScript、PWA Studio
• 产品示例：WooCommerce
  • 功能：基于 WordPress 的电商插件
  • 特点：支持扩展、适合中小型商家
  • 技术：PHP、JavaScript、REST API

协作与办公工具

• 产品示例：Trello
  • 功能：团队协作与项目管理
  • 特点：卡片式任务看板、插件系统
  • 技术：Node.js、React、REST API
• 产品示例：Slack
  • 功能：企业即时通讯与协作工具
  • 特点：集成第三方应用、频道化沟通
  • 技术：Electron、React、GraphQL
• 产品示例：Notion
  • 功能：知识管理、任务管理与文档协作
  • 特点：灵活的数据库与模版系统
  • 技术：React、Node.js、Electron

企业软件与 SaaS

• 产品示例：Salesforce
  • 功能：客户关系管理、销售自动化
  • 特点：全面的 SaaS 解决方案、AppExchange 应用市场
  • 技术：Apex、JavaScript、Lightning Web Components
• 产品示例：Zendest
  • 功能：客户服务与支持管理
  • 特点：工单系统、多渠道沟通
  • 技术：React、Node.js、Ruby
• 产品示例：Workday
  • 功能：人力资源与财务管理
  • 特点：人力资本管理、财务规划与分析
  • 技术：Java、JavaScript、Node.js

业务架构设计

团队基建亮点

• “技术基建”，即为研发团队的技术基础设施建设，一个团队通用技术能力沉淀
• 文档规范，脚手架工具，工程化、工具链，凡是能促进业务效率、沟通成本都可以称作基建

意义

主要是为了以下几点：

• 业务复用，提高效率：基建可以提高单个人的工作产出和工作 效率，可以从代码层面解决一些普遍性和常用性的业务问题
• 规范、优化流程制度：优异的流程制度必将带来正面的、积极的、有实效的业务支撑
• 更好面对未来业务发展：像建房子一样，好的地基可以建出万丈高楼
• 影响力建设、开源建设：建设结果对于业务的促进，更容易获得内部合作方的认可；沉淀下来的好的经验，可以对外输出分享，也是对影响力的有力帮助

落地前思考

大方向

• 三个落地要素：公司的团队规模、公司的业务、团队水平
• 四大基础特性：技术的健全性、基建的稳定性、研发的效率性、业务的体验性

实施准备

基建开始之前，首先得确定建设的策略及步骤，主要是拆解研发流程入手的

一个基本的研发流程闭环一般是：

• 需求确定
• 需求拆解
• 技术方案制定
• 编码
• 联调
• 自测优化
• 提测与 bug 修复
• 部署发布
• 监控与数据收集复盘
• 迭代优化

在研发流程闭环中每一个环节的阻塞点越少，研发效率就越高。基建，就是从这些耽误研发时间的阻塞点入手，按照普遍性+高频的优先级标准，挨个突破。

发力点

通用的公式是：标准化+规范化+工具化+自动化，能力完备后可以进一步提升到平台化+产品化。在方向上，主要是从下面的7 个主要方向进行归类和建设，供大家参考：

• 开发规范：这一部分沉淀的是团队的标准化共识，标准化是团队有效协作的必备前提
• 研发流程：标准化流程直接影响上下游的协作分工和效率，优秀的流程能带来更专业的协作
• 工程管理：面向应用全生命周期的低成本管控，从应用的创建到本地环境配置到低代码搭建到打包部署
• 性能体验：自动化工具化的方式发现页面性能瓶颈，提供优化建议
• 安全防控：三方包依赖安全、代码合规性检查、安全风险检测等防控机制
• 统计监控：埋点方案、数据采集、数据分析、线上异常监控等
• 质量保障：自测 CheckList、单测、UI 自动化测试、链路自动化测试等

如上是一般性前端基建的主要方向和分区，不论是 PC 端还是移动端，这些都是基础的建设点。业务阶段、团队能力的差异，体现在基建上，在于产出的完整性、颗粒度、深入度和自动化的覆盖范围

大小公司基建重点

• 小公司：针对一些小团队或者说偏初创期的团队，其建设，往往越偏向于基础的技术收益，如脚手架、组件库、打包部署工具等；优先级应该排好，推荐初创公司和小团队成立优先搭建好：规范文档、统一开发环境技术栈/方法/工具、项目模板、CI/CD 流程，把基础的闭环优先搭建起来
• 大公司：越是成熟的业务和成熟沉淀的团队，其建设会越偏向于获取更多的业务收益，如直接服务于业务的系统，技术提效的同时更能直接带来业务收益。搭建起一套坚实的项目底座，能够更好的支持上层建筑的发展，同时也能够提升团队的成长，打开在业界的知名度，获取更好的信任支持。大公司在基础建设上，会更加考虑数据一些监控以及数据的埋点分析和统计，更加的偏重于数据的安全防范，做到质量保证

落地

规范&文档

规范和文档是最应该先行的，规范意味着标准，是团队的共识，是沟通协作的基础

文档：

• 新人文档（公司、业务、团队、流程等）
• 技术文档
• 业务文档
• 项目文档（旧的、新的）
• 计划文档（月度、季度、年度）
• 技术分析交流会文档

规范：

• 项目目录规范：比如 api，组件，页面，路由，hooks，store 等
• 代码书写规范：组件结构、接口（定义好参数类型和响应数据类型）、事件、工具约束代码规范、代码规范、git 提交规范

脚手架

开发和维护一个通用的脚手架工具，可以帮助团队快速初始化项目结构、配置构建工具、集成常用的开发依赖等

省事的可能直接拥抱框架选型对应的全家桶，如 Vue 全家桶，或者用 Webpack 撸一个脚手架。能力多一些的会再为脚手架提供一些插件服务，如 Lint 或者 Mock。从简单的一个本地脚手架，到复杂的一个工程化套件系统。

组件沉淀

公司项目多了会有很多公共的组件，可以抽离出来，方便自身和其他项目复用，一般可以分为以下几种组件：

• UI 组件：antd、element、vant、uview...
• 业务组件：表单、表格、搜索...
• 功能组件：上拉刷新、滚动到底部加载更多、虚拟滚动、拖拽排序、图片懒加载...

工具/函数库

前端工具库，如 axios、lodash、Day.js、moment.js、big.js 等等

常见的方法/API 封装：query 参数解析、device 设备解析、环境区分、localStorage 封装、Day 日期格式封装、Thousands 千分位格式化、防抖、节流、数组去重、数组扁平化、排序、判断类型等常用的方法和hooks抽离出来组成函数库，方便在各个项目中使用

最佳实践模版

可以提前根据公司的业务需求，封装出各个端对应通用开发模版，封装好项目目录结构，接口请求，状态管理，代码规范，git 规范钩子，页面适配，权限，本地存储管理等等，来减少开发新项目时前端准备工作时间，也能更好的统一公司整体的代码规范

1. 通用后台管理系统基础模版封装
2. 通用小程序系统基础模版封装
3. 通用h5系统基础模版封装
4. 通用node系统基础模版封装
5. 其他类型的项目默认模版封装，减少重复工作

CI/CD 构建部署

前端具备自己的构建部署系统，便于专业化方面更好的控制流程。很多公司目前，都实现了云打包、云检测和自动化部署，每次 git commit 代码后，都会自动的为你部署项目至测试环境、预生产环境、生产环境，不用你每次手动的去打包后 cv 到多个服务器和环境。开发新的独立系统之初，以便实现代码的合规性静态检测能力。如果可以的话，可以去实现一套插件化机制，可以按需配置不同的检测项，如某检测项检测不通过，最终会阻塞发布流程

数据埋点与分析

前端团队可以做的是 Web 数据埋点收集和数据分析、可视化相关的全系统建设。可实现埋点规范、埋点 SDK、数据收集与分析、PV/UV、链路分析、转化分析、用户画像、可视化热图、坑位粒度数据透出等数据化能力，下面给大家细分一些这些数据：

• 行为数据：时间、地点、人物、交互、交互的内容
• 质量数据：浏览器加载情况、错误异常等
• 环境数据：浏览器相关的元数据以及地理、运营商等
• 运营数据：PV、UV、转化率、留存率（很直观的数据）

微前端

将你的大型前端应用拆分为多个小型前端应用，这样每个小型前端应用都有自己的仓库，可以专注于单一的某个功能；也可以再聚合成有各个应用组成的一个平台，而各个应用使用的技术栈可以不同，也就是可以将不同技术栈的项目给整合到一块。

技术深度与架构亮点

• 微前端在分拆原子应用场景下的落地与实践
• 协同编辑器从零到一架构实现
• 推动团队基建落地
• 数字孪生平台整体架构设计
• 低代码平台编排引擎设计与实现
• 低代码平台流程引擎设计与实践
• 低代码平台编辑器实现
• 低代码平台执行器与 JavaScript 沙箱设计
• 用户行为分析 SDK 及监控可视化整体实现
• Webpack 打包构建优化改良
• 可视化渲染引擎设计与实现

技能描述

• 熟悉掌握 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、zreender 开发自定义渲染引擎
• 丰富的跨端开发经验，熟练使用 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）的配置与管理

项目描述

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

不同阶段对前端的要求

1~3 年

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

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

3~5 年

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

• 关注社区中关于进阶 的资料和路线，强化基础知识
• 深入掌握常用框架的高级用法，探索其原理
• 在业务开发中不仅完成功能，还需考虑项目结构设计、封装基础工具、设计和开发基础组件
• 思考提高团队效率的方法，例如：
  • 集成代码检验和风格统一插件（如 eslint、stylelint、prettier）
  • 从工程化角度提高本地开发效率，优化 webpack 构建、探索 esbuild、vite 等工具
  • 对于多项目开发，整理差异和统一部分，建立内部脚手架以减少重复工作
  • 尝试搭建 CI/CD 平台，维护公司内部的通用 npm 包
  • 培养软技能，如沟通协作，协调各角色共同推进目标

5 年以上

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

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