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

repo-notes.zip

字节业务向工程基础架构

项目架构通常指的是项目目录结构、构建流程、规范等，社区均有对应方案，我们从项目初期调研到架构设计来探讨。

monorepo

Monorepo（单一代码仓库）是目前比较主流的项目组织方式，它允许你在一个仓库中组织多个项目。相对于多仓库（multirepo）策略，monorepo 在大型组织和复杂项目中具有许多显著的优势。

依赖管理

  1. 统一的依赖管理 ：在monorepo中，所有的项目共享一个依赖管理系统。这意味着可以更方便地管理和更新依赖库，减少版本冲突的可能性。
  2. 版本同步 ：可以确保多个项目之间使用相同版本的依赖，避免由于依赖版本不一致引发的错误。

代码复用

  1. 模块共享 ：在monorepo中，多个项目可以共享相同的模块或库，这减少了代码重复，提高了代码复用率。
  2. 统一工具链 ：可以为所有项目配置相同的工具链（如编译器、测试框架等），提升开发一致性。

协作效率

  1. 一致的代码风格 ：通过统一的代码风格和规范，确保所有项目遵循相同的开发标准，提升代码质量。
  2. 跨项目变更 ：在monorepo中，跨项目的变更可以在一次提交中完成，避免了跨多个仓库提交和同步的问题。
  3. 集中化的CI/CD ：可以设置统一的持续集成和持续部署（CI/CD）流程，简化自动化构建和部署流程。

可维护性

  1. 简化依赖图 ：通过集中管理项目之间的依赖关系，可以更清晰地理解和维护项目间的依赖。
  2. 快速重构 ：在monorepo中，可以更方便地进行大规模的代码重构，因为所有的代码都在同一个仓库中，便于搜索和替换。

版本控制

  1. 单一版本历史 ：所有项目的历史记录都在一个仓库中，便于查看项目的整体演进过程。
  2. 简化分支管理 ：分支和合并操作变得更加简便，减少了跨仓库操作的复杂性。

DX

  1. 统一的开发环境 ：所有项目共享相同的开发环境设置，减少了开发者在不同项目间切换时的学习成本。
  2. 更快的开发周期 ：由于减少了跨仓库的协调工作，开发周期可以显著缩短。

开源案例

基础选型

React 技术栈

基础库

  1. react
  2. react-native
  3. react-three-fiber

状态管理

  1. 基础

    • React Hooks ：如 useState 、 useReducer 用于管理组件内部状态。

  2. 全局状态

    • Redux ：流行的状态管理库，采用单一数据源和不可变状态。

      • Redux Thunk ：中间件，支持异步操作。
      • Redux Saga ：中间件，使用生成器函数管理复杂的异步逻辑。

    • MobX ：基于响应式编程的状态管理库。

    • Recoil ：由 Facebook 开发的状态管理库，兼容 Hooks 的设计。

  3. Context API

    • React Context API ：用于跨组件树传递数据，不需要通过逐层传递 props。

路由管理

  1. React Router

    • React Router DOM ：用于管理浏览器环境中的路由。
    • React Router Native ：用于 React Native 应用中的路由管理。

  2. Tanstack Router

表单管理

  • Formik ：简化表单管理和验证的库。
  • React Hook Form ：基于 React Hooks 的轻量级表单管理库。
  • Redux Form ：与 Redux 集成的表单管理库。

API 请求与数据获取

  1. HTTP Clients

    • Axios ：基于 Promise 的 HTTP 客户端。
    • Fetch API ：内置于浏览器中的原生 API。

  2. GraphQL Clients

    • Apollo Client ：用于与 GraphQL 服务端通信的库。
    • Relay ：Facebook 开发的高效 GraphQL 客户端。

  3. 数据获取库

    • React Query ：用于数据获取、缓存和同步的库。
    • TanStack Query
    • swr

样式处理

  1. CSS-in-JS

    • Styled Components ：在 JavaScript 中编写 CSS。
    • Emotion ：高性能的 CSS-in-JS 库。

  2. CSS 预处理器

    • Sass/SCSS ：增强 CSS 的功能。
    • Less ：另一种 CSS 预处理器。

  3. 模块化 CSS

    • CSS Modules ：为每个组件创建唯一的 CSS 类名，避免样式冲突。

  4. Tailwind CSS

  5. UI 库

    • Bootstrap ：流行的前端框架。
    • Material-UI ：基于 Material Design 的 React 组件库。
    • Ant Design ：企业级 UI 设计语言和 React 组件库。

构建与打包工具

  1. Webpack ：模块打包工具，支持代码分割和懒加载。
  2. Vite ：bundleless 构建工具
  3. Babel ：JavaScript 编译器，支持最新语法特性，支持拓展 js 语法。

测试

  1. 单元测试

    • Jest ：Facebook 开发的测试框架。
    • React Testing Library ：用于测试 React 组件。

  2. 端到端测试

    • Cypress ：现代的前端测试工具。
    • Puppeteer ：用于控制 Chrome 或 Chromium 的 Node 库。

类型检查

  1. TypeScript ：Microsoft 开发的静态类型检查工具，增强 JavaScript 的类型系统。
  2. Flow ：Facebook 开发的静态类型检查工具。

代码质量与开发工具

  1. ESLint ：代码静态分析工具，帮助识别和修复问题。
  2. Stylelint ：样式语法检查
  3. Prettier ：代码格式化工具，确保代码风格一致。
  4. Cspell ：单词拼写检查
  5. Commitlint ：提交检查
  6. Husky ：Git hooks 工具，用于在提交代码前执行代码检查和格式化。

持续集成与部署（CI/CD）

  1. CI/CD 工具

    • Jenkins ：自动化服务器，支持持续集成和持续部署。
    • GitHub Actions ：GitHub 提供的 CI/CD 服务。
    • Travis CI ：托管的持续集成服务。

  2. 部署平台

    • Vercel ：适用于前端项目的即部署即平台。
    • Netlify ：提供静态网站托管和自动化部署服务。

Vue 技术栈

基础库

  1. Vue

开发工具

  1. Vue CLI

    • Vue CLI ：官方脚手架工具，用于快速搭建 Vue 项目，内置了配置好的 Webpack 和其他开发工具。

  2. Vite

    • Vite ：由 Vue 的作者尤雨溪开发的下一代前端构建工具，具有快速冷启动和即时热模块替换 (HMR) 特性。

路由管理

  1. Vue Router

    • Vue Router ：官方的路由管理库，支持嵌套路由、动态路由、路由守卫等特性。

状态管理

  1. Vuex

    • Vuex ：官方的状态管理库，采用单向数据流和集中式存储，适用于复杂应用。

  2. Pinia

    • Pinia ：新的状态管理库，作为 Vuex 的替代品，更加轻量和简单，适用于 Vue 3。

表单管理

  1. Vuelidate

    • Vuelidate ：用于验证 Vue 应用中表单数据的库，提供声明式验证。

  2. Vue Formulate

    • Vue Formulate ：强大的表单库，提供丰富的表单控件和验证功能。

  3. vee-validate

    • vee-validate ：灵活的表单验证库，与 Vue 深度集成。

API 请求与数据获取

  1. HTTP Clients

    • Axios ：基于 Promise 的 HTTP 客户端，常用于 Vue 项目中进行 API 请求。
    • Fetch API ：内置于浏览器的原生 API，用于发起 HTTP 请求。

  2. GraphQL Clients

    • Apollo Client ：与 GraphQL 服务端通信的库，提供 Vue 的集成插件。

  3. 数据获取库

    • vue-query ：用于数据获取、缓存和同步的库，类似于 React Query。

样式处理

  1. CSS-in-JS

    • Vue Styled Components ：在 Vue 中使用 styled-components 风格编写 CSS。

  2. CSS 预处理器

    • Sass/SCSS ：增强 CSS 功能的预处理器。
    • Less ：另一种 CSS 预处理器。

  3. 模块化 CSS

    • CSS Modules ：为每个组件创建唯一的 CSS 类名，避免样式冲突。

  4. UI 库

    • Vuetify ：基于 Material Design 规范的 Vue UI 组件库。
    • Element UI ：企业级 UI 设计语言和 Vue 组件库。
    • Bootstrap Vue ：将 Bootstrap 4 集成到 Vue.js 项目中的组件库。

构建与打包工具

  1. Webpack ：强大的模块打包工具，支持代码分割和懒加载。
  2. Vite ：快速、现代的构建工具，特别适合 Vue 3 项目。
  3. Rollup ：用于库开发的打包工具，体积小、性能好。

测试

  1. 单元测试

    • Jest ：功能强大的测试框架，支持 Vue 项目的单元测试。
    • Vue Test Utils ：官方的 Vue 组件单元测试实用工具。

  2. 端到端测试

    • Cypress ：现代的前端测试工具，支持端到端测试。
    • Nightwatch.js ：基于 Node.js 的端到端测试解决方案。
    • Playwright

类型检查

  1. TypeScript ：增强 JavaScript 类型系统的工具，Vue 3 原生支持 TypeScript。
  2. Vue 3 Composition API ：提供更好地与 TypeScript 集成的 API。

代码质量与开发工具

  1. ESLint ：代码静态分析工具，帮助识别和修复问题。
  2. Stylelint ：样式语法检查
  3. Prettier ：代码格式化工具，确保代码风格一致。
  4. Cspell ：单词拼写检查
  5. Commitlint ：提交检查
  6. Husky ：Git hooks 工具，用于在提交代码前执行代码检查和格式化。

持续集成与部署

  1. CI/CD 工具

    • Jenkins ：自动化服务器，支持持续集成和持续部署。
    • GitHub Actions ：GitHub 提供的 CI/CD 服务。
    • Travis CI ：托管的持续集成服务。

  2. 部署平台

    • Vercel ：适用于前端项目的即部署即平台。
    • Netlify ：提供静态网站托管和自动化部署服务。

字节系工具链详述

效率团队为团队整体战力负责，越大的团队对于工具链的要求越高，成熟工具链可以极大提升团队整体开发效率。

基础方案——Modernjs https://github.com/web-infra-dev/modern.js

  • Modern.js Framwork
  • Modern.js Module

Modern.js 框架是一个基于 React 的渐进式 Web 开发框架。在字节跳动内部，我们将 Modern.js 封装为上层框架，并支撑了数千个 Web 应用的研发。

Modern.js 能为开发者提供极致的开发体验（Development Experience），让应用拥有更好的用户体验（User Experience）。

在开发 React 应用过程中，开发者通常需要去为某些功能去设计实现方案，或是使用其他的库、框架来解决这些问题。Modern.js 支持 React 应用所需要的所有配置和工具，并内置额外的功能和优化。开发者可以使用 React 构建应用的 UI，然后逐步采用 Modern.js 的功能来解决常见的应用需求，如路由、数据获取、状态管理等。

它主要包含以下特性：

  • 🚀 Rust 构建：提供双构建工具支持，轻松切换到 Rspack 构建工具，编译飞快。
  • 🪜 渐进式：使用最精简的模板创建项目，通过生成器逐步开启插件功能，定制解决方案。
  • 🏠 一体化：开发与生产环境 Web Server 唯一，CSR 和 SSR 同构开发，函数即接口的 API 服务调用。
  • 📦 开箱即用：默认 TS 支持，内置构建、ESLint、调试工具，全功能可测试。
  • 🌏 周边生态：自研状态管理、微前端、模块打包、Monorepo 方案等周边需求。
  • 🕸 多种路由模式：包含自控路由、基于文件约定的路由（嵌套路由）等。

Vs Next.js

Next.js 是社区中最流行的 React 框架之一，由 Vercel 开发。

Next.js 默认使用了 React Server Components，这意味着你需要在服务端渲染你的 Web 应用，并为服务器产生的开销付费；并且 Server Components 目前不是一项稳定的技术，社区中很多流行的 React 库尚未完成对 RSC 的适配。在目前阶段，你可能需要使用 Next.js 旧版的 Pages Router 来避免 Server Components 带来的问题。

当你想构建一个单页面应用（SPA），并通过客户端渲染时，Next.js 可能不是一个好的选择，因为它的很多功能都是围绕 Server 优先来设计的。如果你需要使用客户端渲染，只能通过 Next.js 提供的 "static exports" 来使用有限的功能。

而 Modern.js 将客户端渲染（CSR）和服务端渲染（SSR）视为同样重要的场景。当你创建一个 Modern.js 应用时，它默认是在客户端渲染的，你不需要了解 Server Components 的用法和局限性。你也可以在任何有需要的时候开启 SSR，甚至可以为一部分页面开启 SSR，整个过程是完全渐进式的。请注意，Modern.js 目前不支持 Server Components，我们会持续观察它的潜力，并在合适的时候支持它。

Vs Umi

Umi 是中文社区中非常流行的 React 框架，也是蚂蚁集团的底层前端框架。Modern.js 和 Umi 有许多相似之处，比如都支持插件系统、约定式路由、微生成器等。

Modern.js 和 Umi 的主要区别在于构建优化方式不同。Umi 采用了 MFSU 技术来提升构建速度，而 Modern.js 则使用 Rspack 来提升 5 ~ 10 倍构建速度。在我们看来，类似 Rspack 这样的 Rust 工具更符合前端工具链的长期发展趋势，它可以在性能、稳定性和生态兼容性之间取得较好的平衡。

此外，Modern.js 的服务端能力更加丰富，包括完备的 SSR 能力、一体化 BFF 开发能力和自定义 Web Server 支持。这些能力经过了字节跳动大量线上应用的验证，可以直接用于生产环境。

打包——Rspack https://github.com/web-infra-dev/rspack

  • Rust 语言优势: Rspack 使用 Rust 语言编写， 得益于 Rust 的高性能编译器支持， Rust 编译生成的 Native Code 通常比 JavaScript 性能更为高效。
  • 高度并行的架构: Webpack 受限于 JavaScript 对多线程的羸弱支持，导致其很难进行高度的并行化计算，而得益于 Rust 语言的并行化的良好支持， Rspack 采用了高度并行化的架构，如模块图生成，代码生成等阶段，都是采用多线程并行执行，这使得其编译性能随着 CPU 核心数的增长而增长，充分挖掘 CPU 的多核优势。
  • 内置大部分的功能: 事实上 Webpack 本身的性能足够高效，但是因为 webpack 本身内置了较少的功能，这使得我们在使用 Webpack 做现代 Web App 开发时，通常需要配合很多的 plugin 和 loader 进行使用，而这些 loader 和 plugin 往往是性能的瓶颈，而 Rspack 虽然支持 loader 和 plugin，但是保证绝大部分常用功能都内置在 Rspack 内，从而减小 JS plugin | loader 导致的低性能和通信开销问题。
  • 增量编译: 尽管 Rspack 的全量编译足够高效，但是当项目庞大时，全量的编译仍然难以满足 HMR 的性能要求，因此在 HMR 阶段，我们采用的是更为高效的增量编译策略，从而保证，无论你的项目多大，其 HMR 的开销总是控制在合理范围内。

构建——Rsbuild https://github.com/web-infra-dev/rs build

  • 易于配置：Rsbuild 的目标之一，是为 Rspack 用户提供开箱即用的构建能力，使开发者能够在零配置的情况下开发 web 项目。同时，Rsbuild 提供一套语义化的构建配置，以降低 Rspack 配置的学习成本。
  • 性能优先：Rsbuild 集成了社区中基于 Rust 的高性能工具，包括 Rspack ， SWC 和 Lightning CSS ，以提供一流的构建速度和开发体验。
  • 插件生态：Rsbuild 内置一个轻量级的插件系统，提供一系列高质量的官方插件。此外，Rsbuild 兼容大部分的 webpack 插件和所有的 Rspack 插件，这意味着你可以在 Rsbuild 中使用社区或公司内现有的插件，而无须重写相关代码。
  • 产物稳定：Rsbuild 设计时充分考虑了构建产物的稳定性，它的开发和生产构建产物具备较强的一致性，并自动完成语法降级和 polyfill 注入。Rsbuild 也提供插件来进行类型检查和产物语法检查，以避免线上代码的质量问题和兼容性问题。
  • 框架无关：Rsbuild 不与前端 UI 框架耦合，并通过插件来支持 React、Vue 3、Vue 2、Svelte、Solid、Lit 等框架，未来也计划支持社区中更多的 UI 框架。

文档——Rspress https://github.com/web-infra-dev/rspress

  • 构建性能。保证足够快的启动速度，带来良好的开发体验。
  • MDX 支持。通过 MDX，我们可以方便地复用文档片段，以及在文档中渲染自定义的 React 组件。
  • 文档站基础能力。包括国际化、多版本支持、全文搜索、组件库文档等。
  • 可扩展性。内置插件系统，支持通过插件 API 来扩展框架功能。

微前端方案——Garfish https://github.com/web-infra-dev/garfish

Garfish 起源于 头条号 的实际场景，随着业务发展变成一个 Monolithic-Applications （ 巨石应用 ）。同时由于维护的团队人员都比较分散，工程大，导致开发调试效率低、上线困难（代码合并相互依赖），成为阻碍业务发展的一个重要因素。

于是在 2018 年衍生了 Garfish 这个微前端框架，经过大量业务方实际场景的验证和打磨，Garfish 逐渐趋于成熟。并且随着更多的业务对微前端的需求，Garfish 也在不断迭代之中，已经积累了丰富的微前端问题解决经验。

适合场景

  • 项目的团队成员来自多个团队
  • 项目内多条迭代出现需求挤兑，影响测试、发布效率
  • 跨空间、跨时间维度导致团队内技术体系无法统一
  • 多个前端应用需要达到「内聚的单个产品」特征
  • 「内聚的单个产品」中部分内容希望达到独立开发、独立发布、独立测试、独立灰度等能力

特性

🌈 丰富高效的产品特征

  • Garfish 微前端子应用支持任意多种框架、技术体系接入
  • Garfish 微前端子应用支持「独立开发」、「独立测试」、「独立部署」
  • 强大的预加载能力，自动记录用户应用加载习惯增加加载权重，应用切换时间极大缩短
  • 支持依赖共享，极大程度的降低整体的包体积，减少依赖的重复加载
  • 支持数据收集，有效的感知到应用在运行期间的状态
  • 支持多实例能力，可在页面中同时运行多个子应用提升了业务的拆分力度
  • 提供了高效可用的调试工具，协助用户在微前端模式下带来的与传统研发模式不同带来的开发体验问题

📦 高扩展性的核心模块

  • 通过 Loader 核心模块支持 HTML entry、JS entry 的支持，接入微前端应用简单易用
  • Router 模块提供了路由驱动、主子路由隔离，用户仅需要配置路由表应用即可完成自主的渲染和销毁，用户无需关心内部逻辑
  • Sandbox 模块为应用的 Runtime 提供运行时隔离能力，能有效隔离 JS、Style 对应用的副作用影响
  • Store 提供了一套简单的通信数据交换机制

🎯 高度可扩展的插件系统

  • 提供业务插件满足业务方的各种定制需求

设计思想

  • Garfish 的 沙箱设计 借鉴了 qiankun
  • Garfish 的 Bridge 设计借鉴了 single-spa
  • Garfish 的样式隔离设计借鉴了 reworkcss

UI 库——arco-design、semi-design

Arco-design https://github.com/arco-design/arco-design

字节跳动 UED-火山引擎和架构前端字节云团队联合推出的企业级设计系统

Semi-design https://github.com/DouyinFE/semi-design

抖音前端与 UED 团队维护，易于定制的现代化设计系统

字节开源项目基础架构实战

  • Monorepo 架构
  • Eslint 9
  • Commitlint
  • Husky
  • Cspell
  • Typescript 5
  • Rsbuild
  • Playwright

阿里系

  • 基础方案：ant design pro
  • 打包：father、umi（ MFSU ）
  • 文档：dumi
  • 微前端：qiankun
  • ui：antd

简历深度优化（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】