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

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

业务亮点

在梳理业务亮点之前,要充分理解业务,这是很多同学欠缺的。

业务方向

低代码/无代码（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、framer

客户关系管理（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

  • 产品示例：Zendesk

    • 功能：客户服务与支持管理
    • 特点：工单系统、多渠道沟通
    • 技术：Node.js、React、Ruby

  • 产品示例：Workday

    • 功能：人力资源与财务管理
    • 特点：人力资本管理、财务规划与分析
    • 技术：Java、JavaScript、Node.js

业务架构设计

团队 基建亮点

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

意义

主要是为了以下几点：

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

落地前思考

大方向

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

实施准备

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

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

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

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

发力点

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

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

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

大小公司基建重点

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

落地

规范&文档

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

「文档：」

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

「规范：」

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

脚手架

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

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

组件沉淀

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

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

工具 / 函数库

前端工具库，如 axios、loadsh、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 到多个服务器和环境。开发新的独立系统之初，也会希望能实现一种 Flow 的流式机制，以便实现代码的合规性静态检测能力。如果可以的话，可以去实现了一套插件化机制，可以按需配置不同的检测项，如某检测项检测不通过，最终会阻塞发布流程。

数据埋点与分析

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

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

微前端

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

技术深度与架构亮点

微前端在分拆原子应用场景下的落地与实践 【@miaoma/macro】

协同编辑器从零到一架构实现 【@miaoma/docs】

推动团队基建落地 【@miaoma/vuse、@miaoma/hooks、@miaoma/pack、@miaoma/cli】

数字孪生平台整体架构设计 【@miaoma/visualizer】

低代码平台编排引擎设计与实现 【@miaoma/lowcode】

低代码平台流程引擎设计与实践

低代码平台编辑器实现

低代码平台代码执行器与 JavaScript 沙箱设计

用户行为分析 SDK 及监控可视化整体实现 【@miaoma/monitor】

Webpack 打包构建优化改良

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

妙码学院——让进取的人更具职业价值

我们主要从以下方面为你的升职加薪提供帮助

  1. 技术摸底
  2. 简历优化指导
  3. 面试辅导
  4. 深度学习计划制定（偏长期）
  5. 就业辅导+内推
  • 跨端开发 Taro（Taro 编译器 compiler、运行时 runtime）、uniapp
  • 协同编辑器（文档类、画板类）wangEditor、CKEditor
  • 团队基建工程（UI 库、图表库、Cli -> 产生产物 npm 包）
  • 3D 可视化数字孪生 bigdata
  • 低代码平台

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

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

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

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

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

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

不同阶段对前端的要求

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

1~3年

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

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

3~5年

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

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

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

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

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

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

5年以上

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

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

【未知组件reminder】