前端工程师技能树

3 分钟阅读时间
Web开发

目录 🔗︎

  1. 成长模型
  2. HTTP 代理与隧道代理
  3. 安全：CSRF 防护
  4. 软件工程
  5. 编程能力
  6. 前端技能模型
  7. 综合技能
  8. 前端技术划分
  9. 技术亮点分析
  10. 职业发展与核心能力模型

每个人因岗位不同，学习的内容和掌握的程度也各不相同。以下是一个通用的成长模型，涵盖软技能和硬技能两方面内容。

成长模型 🔗︎

1. 软技能（综合能力） 🔗︎

软技能是个人在职场中不可或缺的核心竞争力，主要包括：

  • 沟通能力：清晰表达自己的观点，有效传递信息。
  • 说服能力：通过逻辑和数据影响他人决策。
  • 团队建设：带领团队高效协作，提升整体战斗力。
  • 影响力：在团队或组织中建立信任和权威，推动变革。

提示：软技能的成长需要长期积累，建议通过阅读相关书籍、参加培训以及实践来不断提升。

2. 硬技能 🔗︎

硬技能因岗位而异，以下是针对互联网领域程序员的硬技能分类：

一级领域：互联网技术 🔗︎

互联网领域的硬技能主要集中在开发相关的二级领域。

二级领域：开发 🔗︎

开发领域的核心内容可以分为以下几个方面：

(1) 基础知识 🔗︎
  • 底层原理：计算机体系结构、内存管理、进程与线程等。
  • 操作系统：Linux/Unix 常用命令、文件系统、权限管理等。
  • 程序语言：掌握至少一门主流编程语言（如 JavaScript、Python、Java 等）。
  • 算法与数据结构：排序、查找、动态规划、树、图等。
  • 网络：HTTP/HTTPS 协议、TCP/IP 模型、DNS、负载均衡等。
  • 安全：常见漏洞（如 XSS、CSRF）、加密算法、身份认证等。
(2) 软件工程 🔗︎
  • 设计模式：单例模式、工厂模式、观察者模式等经典设计模式。
  • 规范：代码风格、命名规则、Git 工作流等。
  • 日志与监控：日志记录、错误追踪、性能监控。
  • 单元测试：编写高质量的测试用例，确保代码稳定性。
  • 故障恢复：快速定位问题、回滚机制、容灾方案。
  • 技术选型：根据业务需求选择合适的技术栈。
  • 敏捷开发：Scrum、Kanban 等敏捷方法论。
(3) 编程能力 🔗︎
  • 性能优化：代码效率、数据库查询优化、缓存策略。
  • 扩展性：模块化设计、微服务架构。
  • 维护成本：代码可读性、文档完整性。
  • 鲁棒性：异常处理、边界条件检查。

三级领域：具体开发岗位 🔗︎

不同开发岗位的学习重点有所不同，以下是几个典型岗位的重点内容：

  • 前端开发

    • 交互体验：用户体验设计、响应式布局、动画效果。
    • 性能优化：首屏加载时间、资源懒加载、CDN 加速。
    • 框架与工具：React、Vue、Webpack 等主流框架和构建工具。

  • 服务端开发

    • 数据处理：数据库设计、大数据处理、分布式存储。
    • 架构设计：微服务架构、高可用架构、负载均衡。
    • 安全性：接口鉴权、数据加密、防刷机制。

不同级别的学习重点 🔗︎

  • 低级别（初级工程师）：注重深度，关注业务细节，打好基础。
  • 高级别（资深工程师/架构师）：注重广度，关注整体业务架构和技术趋势。

理解业务的四个维度 🔗︎

无论从事哪个岗位，理解业务都是职业发展的关键。以下是理解业务的四个核心维度：

  1. 用户分析

    • 行业总用户规模：了解行业的整体用户基数。
    • 自身用户规模：明确公司的用户群体及其特征分布。
    • 用户画像：年龄、性别、地域、消费习惯等。

  2. 竞品分析

    • 行业排名：了解主要竞争对手的市场份额。
    • 竞品数据对比：功能差异、用户体验、技术实现等。
    • 差异化优势：找到自身产品的核心竞争力。

  3. 获客方式

    • 常见手段：SEO、SEM、社交媒体营销、内容营销等。
    • 效果指标：转化率、留存率、ROI（投资回报率）。

  4. 获利来源

    • 盈利模式：广告收入、订阅服务、交易佣金等。
    • 成本控制：降低运营成本，提高利润率。

推荐阅读 🔗︎

以下是一些推荐书籍，帮助你更好地理解业务和提升综合能力：

  • 《定位》：如何打造品牌的核心竞争力。
  • 《疯传》：产品传播的心理学原理。
  • 《增长黑客》（白皮版）：低成本实现用户快速增长的方法论。
  • 《需求：缔造伟大商业传奇的根本力量》：挖掘用户需求的本质。
  • 《创新者的窘境》：技术创新与市场变化的关系。

关于深度与广度 🔗︎

在一个平台上成长，并不需要面面俱到。有些知识只需要知道它解决什么问题即可，这是广度；而深度则是你需要了解所有细节的部分，尤其是在你的核心领域内，它是你的核心竞争力。

广度和深度并非割裂，广度有时能加强你的深度。例如，了解前端和后端的基础知识可以帮助全栈工程师更好地设计系统。

关于努力工作 🔗︎

不要欺骗自己，努力的前提是热爱。找到你真正感兴趣的领域，并全力以赴地投入其中。只有做你热爱的事情，才能持续保持激情并取得突破。

HTTP 代理与隧道代理 🔗︎

HTTP 代理 🔗︎

  • 定义
    HTTP 代理是一种中间层服务，用于转发客户端与服务器之间的 HTTP 请求。

  • 特点

    • 需要安装可信证书以确保通信的安全性。
    • 常用于调试、缓存或过滤请求。

隧道代理 🔗︎

  • 定义
    隧道代理通过建立 TCP 连接来传输数据，适用于更底层的网络通信。

  • 应用场景

    • 用于穿透防火墙或加密通信。
    • 支持非 HTTP 协议的数据传输。

安全：CSRF 防护 🔗︎

定义 🔗︎

CSRF（Cross-Site Request Forgery）是一种攻击方式，攻击者通过构造一个站内 URL 或在第三方站点放置自动提交的表单，诱导用户在登录态下点击，从而执行攻击者的请求。

危害 🔗︎

  • 用户资产损失（如转账、支付等操作）。
  • 数据被篡改或删除（如删除用户数据、差评等）。

示例 🔗︎

假设某网站提供了一个删除差评的接口。如果攻击者通过 IM（即时通讯工具）发送一个伪造的链接，用户点击后可能会触发删除操作，导致数据丢失。

防护措施 🔗︎

  • 使用 CSRF Token：为每个请求生成唯一的 Token，验证请求的合法性。
  • 验证 Referer 头：检查请求来源是否合法。
  • 同源策略：限制跨域请求。

软件工程 🔗︎

设计方法 🔗︎

软件设计方法是指导软件开发的核心思想，包括但不限于以下几种：

  • 面向对象设计
    通过类和对象的方式组织代码，提升代码的复用性和可维护性。

  • 模块化设计
    将系统划分为多个独立的模块，降低耦合度，提升扩展性。

  • 分层架构
    将系统分为表现层、业务逻辑层和数据访问层，明确职责分工。

设计模式 🔗︎

设计模式是解决特定问题的经典解决方案，常见的设计模式包括：

  • 单例模式
    确保一个类只有一个实例，并提供全局访问点。

  • 工厂模式
    通过工厂类创建对象，隐藏对象的创建细节。

  • 观察者模式
    定义对象间的一对多依赖关系，当一个对象的状态发生变化时，所有依赖它的对象都会收到通知。

编程能力 🔗︎

微前端 🔗︎

微前端是一种将大型前端应用拆分为多个小型、独立部署的子应用的技术方案。其核心目标是：

  • 提升团队协作效率。
  • 支持技术栈的多样性。
  • 实现独立开发、测试和部署。

模型驱动 🔗︎

模型驱动是一种以数据模型为核心的设计理念，强调通过标准化的模型驱动业务逻辑、流程和视图的生成。

核心目标 🔗︎

  1. 交付高质量、高还原度产品
    通过模型驱动，减少人为误差，确保产品设计与实现的高度一致。

  2. 高标准化
    通过统一的模型协议，降低开发成本，提升系统的可维护性和扩展性。

模型驱动的工作流程 🔗︎

  1. 业务数据模型
    定义业务的核心数据结构，描述业务实体及其关系。

  2. 组件协议
    将业务数据模型映射到组件协议，定义组件的行为和交互方式。

  3. 插槽映射协议
    描述组件之间的嵌套关系和布局规则。

  4. 视图协议
    将组件协议和插槽映射协议进一步转化为具体的页面视图。

  5. 页面生成
    最终生成完整的页面，完成从模型到视图的完整闭环。

示例流程 🔗︎

业务数据模型 -> 组件协议 -> 插槽映射协议 -> 视图协议 -> 页面

前端技能模型 🔗︎

消化：基本知识 🔗︎

  • 工具

    • Git 操作：版本控制的基础技能。

  • HTML

    • 掌握基本标签，理解语义化 HTML。

  • CSS

    • 布局：Flexbox、Grid 等常用布局方式。
    • CSS 优先级：理解选择器权重。
    • 动画：CSS 动画和过渡效果。

  • JavaScript

    • 原型链、对象、闭包、ES6 等核心概念。

  • DOM

    • 操作 DOM 对象，处理事件绑定。

  • Node.js

    • 掌握基本 API，了解服务器端运行环境。

提炼：高阶技能 🔗︎

  • 工具

    • 包管理：pnpm、yarn。
    • 构建工具：webpack、vite。
    • 代码规范：eslint。
    • 静态检查：TypeScript。

  • HTML

    • 无障碍设计：提升用户体验和可访问性。

  • CSS

    • Sass/Less：预处理器的使用。
    • 响应式布局：适配不同设备。
    • 高阶动画：复杂动画效果的实现。
    • CSS 架构：Tailwind、CSS Module。

  • JavaScript

    • 状态管理：Redux、Zustand、MobX、Vuex 的最佳实践。
    • 框架：Vue、React。
    • 测试：Jest、Vitest。
    • 模块化：UMD、CMD。
    • 组件化：Ant Design 等 UI 库的使用。

  • DOM

    • 浏览器调试：掌握 DevTools 使用技巧。
    • HTTP：理解 HTTP 协议及浏览器网络请求。

  • Node.js

    • 事件机制、流、网络、高级 API。

分享：资深/专家级技能 🔗︎

  • 性能优化：提升页面加载速度和运行效率。
  • 响应式框架设计和开发：构建灵活的响应式系统。
  • 全响应式布局设计：适配多种屏幕尺寸。
  • 状态管理设计：设计高效的状态管理方案。
  • 插件系统设计：开发可扩展的插件架构。
  • Serverless 系统架构：基于无服务器架构的应用开发。
  • 微前端架构：实现模块化前端开发。
  • 安全生产：防范 XSS、CSRF 等安全威胁。
  • 项目管理能力：规划和管理复杂项目。
  • 任务分解能力：将大任务拆解为小任务。
  • 低代码设计：设计低代码开发平台。
  • 国际化能力设计：支持多语言和区域化需求。

综合技能 🔗︎

执行 🔗︎

  • 60分：完成任务，达到基本要求。
  • 80分：要事第一，清单和风险管理。
  • 95分：横向领导，推动团队协作。

交流 🔗︎

  • 60分：邮件沟通，清晰表达。
  • 80分：公开分享、演讲，交流回应。
  • 95分：情感账户，同理心倾听表达、交锋达到目标。

组织 🔗︎

  • 60分：会议纪要，任务跟进。
  • 80分：会议组织、项目复盘改进。
  • 95分：专题讨论，向上管理，推动改变。

前端技术划分 🔗︎

全栈方向 🔗︎

  • 主要应用场景：

    • 运营管理平台
    • BFF（Backend For Frontend）解决方案

  • 主要技术栈：

    • Node.js

大前端方向 🔗︎

  • 主要应用场景：

    • 车机应用
    • 移动应用
    • 小程序
    • H5

  • 主要技术栈：

    • Flutter
    • PWA（Progressive Web Apps）

技术亮点分析 🔗︎

在前端开发中，以下技术领域尤为重要，其中性能、框架、埋点、灰度、安全、发布、脚手架、缓存、规范、跨端是核心关注点。以下是其中的三五个亮点：

亮点 1：性能优化 🔗︎

  • 性能是用户体验的核心。
  • 关注首屏加载速度、资源加载策略、渲染效率等。
  • 使用工具如 Lighthouse 进行性能评估。

亮点 2：跨端开发 🔗︎

  • Flutter 和 PWA 是跨端开发的主流技术。
  • Flutter 提供一致的 UI 和高性能，适用于多端（移动端、Web、桌面）开发。
  • PWA 提供渐进式增强的 Web 应用体验，支持离线访问和快速加载。

亮点 3：埋点与数据监控 🔗︎

  • 埋点是数据分析的基础，用于追踪用户行为。
  • 结合可视化工具（如 Google Analytics、神策等），实时监控用户行为和产品表现。

亮点 4：灰度发布 🔗︎

  • 灰度发布是一种低风险的发布策略。
  • 通过小范围用户测试新功能，逐步扩大覆盖范围，降低全量发布的风险。

亮点 5：安全性 🔗︎

  • 安全是前端开发不可忽视的一环。
  • 防范 XSS、CSRF 等常见攻击。
  • 使用 HTTPS、CSP（Content Security Policy）等技术保障应用安全。

职业发展与核心能力模型 🔗︎

Visibility（可见性） 🔗︎

  • 重要性：
    • 涉及到表达力，是最重要的能力之一。
    • 做事要红，勇敢，敢说。
  • 如何提升 Visibility：
    • 知识、认知、判断：进阶式的归纳总结，采用金字塔结构式表达。
    • 汇报场表达：
      • 先结论和建议，再交代背景和问题、困难，最后展开论证过程和数据支持。
    • 关注组织层面：
      • 将手头的事情转移到组织关注的事情。
      • 根据业务重心定义工作内容，并确定计划和优先级。
        • 示例：首页运营问题、一致性问题。
        • 组织层面：GCP & GOP 融合。
    • 正式交付物：
      • 确保有明确的交付物。

关系 🔗︎

  • 注意事项：
    • 不要跨级汇报，避免得罪人。
    • 做人要细。
  • 撮合能力：
    • 示例：A 团队有想法和需求，但缺少资源；B 团队有能力和资源，但缺少想法。通过撮合实现双赢。

能力 🔗︎

  • 根基：
    • 专业技术能力过硬，是职业发展的基础。

2. 核心品质 🔗︎

  • 自驱：
    • 主动提出并解决问题。
  • 匠心：
    • 做的东西很好用，注重用户体验。
  • 担当：
    • 即使不是自己的问题，也能推动解决。

3. 效率与定位 🔗︎

  • 效率：
    • 有什么能力，带来什么质变，覆盖什么场景。
  • 定位：
    • 给自己的定位：国际化场景的业务架构前端。
  • OKR 总结：
    • 在总结时，要写一些业务数据，说明你的价值。

4. 项目的结果 🔗︎

  • 结果定义：
    • 事情做完了，并且有结果。
    • 结果 = TD 认为目标达成情况。
    • 目标要求：
      • 目标必须可量化、可衡量。
      • 没有目标就没有结果。

5. 成长与发展 🔗︎

  • 关键点：
    • 要性：敢于争取机会。
    • 提前占位：抢占先机。
    • 强目标/强决心/优先级：明确目标，坚定执行。
  • 行业选择：
    • 金融可以做一辈子。
  • 技术变革业务：
    • 找到新赛道/新领域，结合新技术，用技术变革业务。
  • 高赔率机会：
    • 无成本的高赔率机会：
      • 和高手聊，充分准备。

当发布很酷的东西时，请第一时间通知我

订阅电子邮件，以获得我的最新文章。我不会向您发送垃圾邮件。随时取消订阅。