初级到高级 Web 开发人员路线图：细分

你是一名初级开发者，正在努力晋升为高级开发者吗？
你是一名全栈开发者，却感到迷茫，不知从何入手吗？🤔

嗯，你来对地方了！😎
这是一份循序渐进的路线图，帮助初级开发人员成为受人尊敬的高级开发人员👨‍💻

先决条件

• 基本的 HTML、CSS 和 JavaScript 知识。
• MERN（MongoDB、ExpressJS、ReactJS、NodeJS）或PERN（PostgreSQL、ExpressJS、ReactJS、NodeJS）堆栈知识很有帮助，但不是必需的。

以下是路线图中基本技术的细分，您可以在成为高级开发人员的旅程中逐步遵循这些技术👨‍💻

SSH

SSH 在安全远程通信中发挥着重要作用。通过熟悉 SSH 基础知识、命令、加密方法、SSH 密钥管理，并将 SSH 应用于实际应用，您将顺利晋升为高级开发人员。

• SSH 到底是什么？

  • SSH 是Secure Shell的缩写，是一种用于在两台计算机之间建立安全通信的协议。（不必担心这些花哨的术语——协议只是一堆规则，而 SSH 是一种特定类型的协议。）

• SSH 命令：SSH 的主要用途之一是在远程计算机上执行命令。这意味着您可以与服务器建立连接并使用 SSH 命令与其进行交互。

• 加密：要真正掌握 SSH，理解加密（涉及对称加密和非对称加密技术）以及哈希算法等关键概念至关重要。这些概念为深入了解 SSH 的安全机制奠定了基础。

• SSH 密钥：SSH 的一个重要组成部分是使用 SSH 密钥。这些密钥由公钥和私钥组成。学习如何生成、管理并在服务器上安全地存储这些密钥对于有效使用 SSH 至关重要。

• 练习并测试您的 SSH 技能：

  • 练习 SSH 技能的一个好方法是将本地计算机连接到GitHub等平台或DigitalOcean等云提供商。这种实践经验将有助于巩固你对 SSH 概念的理解。
  • 想象一下这样的场景：“你的 Web 应用程序一夜之间从服务器上神秘消失。你的任务是使用 SSH 将所有项目文件恢复到服务器上。” 成功完成这项任务，展现了你的 SSH 技能和解决问题的能力。总而言之，如果你能做到，那你真是太棒了！

表现：

性能优化是成为高级开发人员的一项关键技能。以下技巧将帮助您确保应用程序平稳高效地运行。掌握这些技巧，您将成为性能专家。

一）网络优化：

• 最小化文件：最小化文件至关重要，因为文件越小，加载时间就越短。这不仅可以提升用户体验，还可以降低项目的带宽成本。在如今网络速度参差不齐的移动设备访问网站的时代，这一点尤为重要。

  • 1.文件压缩：文件越小，用户下载速度越快。了解如何使用文件压缩技术（例如 GZIP）来最小化文件大小，以减少 HTML、CSS 和 JavaScript 等文本文件的大小。
  • 2.图像优化：通过调整大小、压缩和选择合适的图像格式来优化图像可以显著减小文件大小。ImageMagick 等工具或 TinyPNG 等在线服务可以帮助您完成此过程。

• 提升应用交付速度：提升交付速度可缩短页面加载时间，从而直接影响用户参与度和留存率。这对于实现全球可访问性并确保全球用户获得一致的体验也至关重要。

  • 1.内容分发网络 (CDN)：CDN 是一个由遍布全球的服务器组成的分布式网络，旨在从地理位置更靠近用户的服务器分发 Web 内容（例如图片、脚本和视频），从而缩短加载时间并降低延迟。作为初级开发人员，您可以学习如何利用 CDN 来增强分发能力。
  • 2. HTTP/2 协议：HTTP/2 是万维网使用的 HTTP 网络协议的重大修订版。它通过并发发送多个文件来增强网站性能，并通过多路复用、压缩和标头优化等功能实现更快的加载时间。实施 HTTP/2 协议可以显著改善传输质量。

• 练习并测试您的网络优化技能：

  • 性能测试：初级开发人员可以使用 Google 的 PageSpeed Insights、GTmetrix 或 WebPageTest 等工具进行性能测试，进行练习。这些工具可以评估网站的性能并提供改进建议。
  • 真实项目：初级开发者可以通过参与真实项目进行实践。从零开始构建和优化网站或 Web 应用程序，可以获得实施网络优化的实践经验。

II）前端优化：

• 关键渲染路径及其改进方法：
  • 理解并优化关键渲染路径对于网站快速加载至关重要。它涉及优化从用户请求网页到网页视觉呈现完成的整个事件序列。关键方面包括最大限度地减少 CSS 和 JavaScript 等渲染阻塞资源、利用浏览器缓存以及使用异步加载技术。
• 渐进式 Web 应用程序 (PWA) 和代码优化：
  • 开发渐进式 Web 应用需要优化代码，以获得卓越的用户体验。渐进式 Web 应用是一种 Web 应用，它提供类似原生应用的体验，并具备离线功能、推送通知和快速加载等功能。代码优化实践包括高效的缓存策略，以及在确保流畅交互的同时最大限度地减少 JavaScript 执行。
• 创建离线渐进式 Web 应用程序 (PWA)：
  • 了解如何使用 JavaScript、HTML 和 CSS 开发可离线运行的 PWA，甚至将其提交到应用商店。离线功能、缓存和响应式设计是确保 PWA 在任何用户网络连接条件下都能无缝运行的关键要素。
• 代码拆分：
  • 代码拆分是一种通过将 JavaScript 拆分成按需加载的较小包来提升网站性能的策略。这种做法可以减少初始加载时间并提升整体用户体验，尤其是在网络连接较慢的情况下。
• React 和 Redux 应用程序的智能渲染：
  • 通过智能渲染技术提升 React 和 Redux 应用的速度。这包括优化组件渲染和状态管理，减少不必要的重新渲染，并确保应用快速响应用户交互。

• 练习并测试您的知识：

  • 通过实际改进网站（例如公司落地页）来提升你的技能。将你学到的性能优化方法应用于实际项目，并测试结果。这种实践经验对于巩固你在前端优化方面的专业知识非常宝贵。

三）后端优化

后端优化，加上实践和测试，对于确保您的应用程序可以处理不断增长的用户群并提供高效、可靠的服务至关重要。

• 内容分发网络 (CDN)：
  • 内容分发网络 (CDN) 是分布式服务器网络，用于存储您网站内容的缓存副本。这些服务器在全球范围内战略性地部署，允许用户从地理位置更近的服务器访问数据。这可以减少延迟、加快内容分发速度并提升用户体验。
• 扩展数据库：
  • 扩展数据库涉及扩展数据库的容量和性能，以处理不断增长的数据和流量。扩展技术包括垂直扩展（向单个服务器添加更多资源）或水平扩展（添加更多服务器以分配负载），以确保您的应用程序在规模增长的同时保持响应速度和可靠性。
• 压缩来自后端的响应：
  • 压缩后端响应意味着减少从服务器发送到客户端的数据大小。GZIP 压缩等技术可以显著减少响应大小，从而加快加载时间并减少带宽消耗。
• 缓存：
  • 缓存是指将频繁访问的数据或内容存储在内存或磁盘中，以便更快地进行检索。实施缓存策略可以缩短响应时间，减少服务器负载，并提升应用程序的整体性能。
• 负载平衡和负载测试：
  • 实施负载均衡器对于在多台服务器之间分配传入的网络流量至关重要。负载均衡可确保任何一台服务器不堪重负，从而提高资源利用率和可靠性。
  • 负载测试模拟真实世界的条件，以识别性能瓶颈、确保可扩展性并优化基础设施。
• 练习并测试您的知识：
  • 实施负载均衡器。
  • 实际对项目进行负载测试。

前端框架和概念

前端开发是成为高级开发人员的基石。熟悉这些概念将为您在 Web 开发领域蓬勃发展铺平道路。

• React 和 Redux：React 和 Redux 是构建动态单页应用的首选库。首先，掌握 React 基础知识并构建一个项目。然后，深入研究 Redux，学习状态管理以及如何构建应用程序以实现可扩展性。

• Webpack4 + Parcel：Webpack4 和 Parcel 是用于打包项目文件和优化生产环境包的最新工具。获取使用 Webpack 设置项目的实践经验。

• 练习并测试你的技能：

  • 通过使用 React 和 Redux 构建项目来测试您的知识。
  • 了解使用 Webpack 配置项目的详细内容。

测试：

测试是一个重要的主题，但也常常被初学者和初级开发人员遗忘。

公司喜欢测试。所以，如果你知道如何编写单元测试和集成测试，你就能写出更好的软件。

• 软件测试 101：了解什么是测试、测试的类型、当前 Web 开发领域的测试前景、测试工具和库的类型、如何使用它们以及如何设置一切。

• Jest：用于测试的顶级库之一。学习编写同步和异步测试、编写模拟代码并生成覆盖率报告。

• React 测试：然后深入编写 React 应用的测试。学习使用快照测试和 Enzyme 编写智能测试，避免应用程序中出现错误。

到最后，您应该了解整个测试环境，并且可以轻松地编写遇到的任何测试。

打字稿：

TypeScript 是目前 Web 开发环境中最热门的话题之一。

• 静态类型：学习静态类型的基础知识。理解为什么 JavaScript 没有静态类型，而是动态类型。

• Typescript 101：了解什么是 TypeScript、如何使用 TypeScript、有哪些不同类型以及如何将它们添加到您的项目中。

• React 中的 Typescript：最终学习如何将 TypeScript 添加到您自己的 React 项目中。

再次确保你将掌握这些主题。

SPA + 服务器端

• 服务器端渲染 (SSR)：深入探究服务器端渲染的起源。理解 SSR 在 Web 开发中过去和现在为何如此重要。了解为什么一些公司仍然依赖 SSR 来满足特定需求。探索 React 中服务器端渲染的实现，并权衡其利弊。

• 客户端渲染 (CSR)：深入了解单页应用程序 (SPA) 中的客户端渲染。理解 CSR 的优缺点。了解何时选择客户端渲染而非服务器端渲染。探索如何实现客户端渲染，并评估两种渲染方法的优缺点。

• Next.js：探索 Next.js，一个简化服务器端动态应用程序创建的库。了解 Next.js 如何促进服务器端渲染以及交互式数据驱动 Web 应用程序的开发。

在本节结束时，您将准备好决定是否要为您的项目使用单页应用程序或服务器端渲染的应用程序。

安全：

• 前端安全优化：学习跨站脚本攻击以及​​ SQL 注入等注入攻击。通过实践了解它们的工作原理。

• 后端安全优化：了解有关后端安全的更多信息以及管理敏感数据的最佳实践。

• 道德黑客 101：学习基本的道德黑客技术，以便我们在构建应用程序时学会如何保护自己。

因此，在学习这些概念之后，您在使用最新的技巧和窍门构建安全应用程序以及实施最新的工具和技术时必须感到自信。

Docker：

Docker是一个容器化平台，它支持你将应用程序及其依赖项打包到可移植、隔离的容器中。这些容器可以在从开发到生产的各种环境中一致运行。Docker 绝对是一款会让你惊叹的工具。

• 容器：

  • 首先要深入了解容器及其对公司构建和管理应用程序方式的深远影响。
  • 容器支持轻量级、一致且易于重现的环境，彻底改变了软件开发和部署。

• Docker 101：制作容器

  • 通过了解如何创建 Docker 文件和构建自己的容器来了解 Docker 的基本知识。
  • 这些基础知识构成了使用 Docker 轻松封装和分发应用程序的基础。

• Docker-compose：编排容器

  • 探索 Docker-compose，一种用于协调多容器 Docker 应用程序的工具。
  • 了解如何将多个容器定义、配置和管理为单一服务，从而简化复杂应用程序的部署。

• 微服务与单体架构：

  • 在单片架构中，单个大型代码库处理所有应用程序功能，这使得更新和扩展变得具有挑战性。
  • 容器支持微服务方法，将应用程序拆分为更小、独立的服务，这些服务可以单独开发、部署和扩展。这种转变提供了灵活性、可扩展性，并提高了资源利用率。
  • 容器（例如 Docker）在从单体架构转向微服务架构方面发挥着重要作用。因此，请详细了解每种架构的优缺点。

• 练习并测试你的 Docker 技能：

  • 了解如何将 Redis 服务器、Postgres 数据库和 API 服务器组合到一个 docker 容器中，以便它们都通过一个命令运行。

完成本节和行动项目后，无论何时部署应用程序，我们都会非常熟悉 Docker。

Redis：

Redis 是最流行和最常用的数据库之一，它是一种键值存储。

• 数据库 101：深入研究数据库主题，了解各种类型的数据库以及它们如何适应数据存储解决方案的格局。

• 什么是 Redis？

  • Redis 是一个开源的内存键值存储数据库。
  • 它在数据存储和检索方面表现出色，使其成为需要高速数据访问的应用程序的多功能选择。

• Redis 101：学习如何使用 Redis。学习如何使用 Redis 进行缓存，提高网站速度，并进行会话管理。

• Redis CLI：了解如何使用 Redis CLI。

• 练习您的 Redis 技能：启动我们自己的 Redis 服务器。

• 键值数据库及其作用：

  • 像 Redis 这样的键值数据库提供了一种简单而有效的数据存储方式。
  • 它们将数据存储为键和相应值的对，从而实现快速数据检索。
  • 这些数据库在快速数据访问至关重要的场景中尤其有价值，例如缓存、会话管理和实时应用程序。

• 何时使用 Redis 等数据库：

  • Redis 非常适合速度和数据一致性至关重要的用例。
  • 考虑使用 Redis 来缓存经常访问的数据、管理用户会话、支持实时应用程序以及确保对关键信息的低延迟访问。

会话 + JWT

使用您的 React 项目，学习如何使用以下技术创建网站的整个动态部分：即用户管理。

• 会话身份验证：了解如何创建新的个人资料页面。了解如何使用基于会话的身份验证（其中会使用 Cookie）以及如何实现它。

• 令牌认证：了解更多关于令牌认证（例如 JWT 令牌）的信息。了解每种认证类型的优缺点。

• 安全身份验证流程：了解如何实现可在您选择的任何应用程序中实现的安全身份验证流程。

• 练习你的 Redis 技能：学习如何使用和实现 Redis 进行会话管理

  • 这样我们就有受保护的路线
  • 此外，这样，只要我们有登录功能，我们就可以使用这个系统，因为我们知道它是安全的并且遵循最佳实践。

亚马逊网络服务（“AWS”）：

亚马逊网络服务（Amazon Web Services，通常称为AWS）是一个强大的云平台，它改变了公司的运营方式，提供了无与伦比的可扩展性和效率。

AWS 101：

• 什么是 AWS（亚马逊网络服务）？

  • AWS 是一个云计算平台，提供广泛的服务，包括计算能力、存储、数据库、机器学习等。
  • 它提供可扩展的按需资源，使企业能够创新和发展，而无需承担管理物理基础设施的负担。

• 基础设施即服务 (IaaS)：

  • AWS 提供基础设施即服务，允许用户通过互联网配置和管理虚拟化计算资源。
  • 这种方法消除了对内部硬件的需求，并提供了灵活性和可扩展性。

• 平台即服务 (PaaS)：

  • AWS 将其服务扩展为平台即服务，使开发人员能够构建、部署和管理应用程序，而无需担心底层基础设施。
  • 这使得开发人员能够专注于编写代码和交付价值。

• 使用 AWS 进行扩展：

  • AWS 使公司能够高效扩展，并根据需要提供对资源的访问。
  • 它允许企业根据需求匹配其产能，类似于谷歌、亚马逊和微软等科技巨头，确保他们能够无缝地为客户提供服务。

• AWS Lambda是一项无服务器计算服务，使开发人员无需管理服务器即可运行代码来响应事件。它提供了一种经济高效、可扩展且直接的云函数执行方式。

• Serverless 101：了解如何使用 Serverless 框架。

• 练习您的 AWS 技能：了解如何将 AWS Lambda 实现到您的 React 应用程序中。

最后，您将能够自信地使用 AWS 并创建云中的功能。

持续集成/持续交付

在我们将所有内容整合在一起并创建了如何编写优秀软件和优秀应用程序的整体图景之后，学习如何实际创建良好的流程以及如何实际将应用程序部署到生产中。

• 持续集成：了解有关良好的持续集成实践以及如何实施这些良好实践和良好工具的更多信息。

• 持续交付：了解有关良好的持续交付实践以及如何实施这些良好实践和良好工具的更多信息。

• 持续部署：了解有关良好的持续部署实践以及如何实施这些良好实践和良好工具的更多信息。

• 练习你的 CI/CD 技能：了解如何在你的项目中实施 Circle CI（CI/CD）工具

  • 确保您的开发团队从一开始就拥有正确的工具和正确的流程
  • 成功编写出错误更少、代码更简洁的应用程序。

额外比特

• 代码分析：了解当你第一次启动一个拥有大量文件且代码并非你亲手编写的项目时该怎么做！学习一些技巧和窍门，真正实现代码优化。

• 构建高质量应用程序的最佳实践。

软技能

• 在这篇博客中，我主要关注了成为高级开发人员过程中的技术层面。然而，有效沟通和情商等软技能也至关重要。
• 开发人员的 7 大软技能及学习方法：如需更深入地了解各种软技能，请查看高级开发人员和编程讲师 Andrei Neagoie 撰写的博客。

笔记

• 不同的公司对高级 Web 开发人员可能有不同的期望，因此请务必做一些额外的研究来定制您的发展路径。

到最后，学完以上所有主题后，你就会明白所有这些道理。你将能够把这些道理运用到你自己的项目和公司中。你也会明白它们之间是如何联系在一起的。

最重要的是，与其他需要花费数年时间学习这些技能的初级开发人员相比，在此路线图的帮助下，您可以快速学习这些内容。

最佳资源

• 初级到高级 Web 开发人员路线图博客系列：我将在该博客系列中学习并分享有关上述每个主题的知识。

• 不要成为初级开发人员：从初级到高级的路线图：Andrei Neagoie（高级开发人员）撰写的详细路线图博客，其中包含免费资源链接。

• 从零到精通课程：完整的初级到高级 Web 开发人员路线图课程：由 Andrei Neagoie（同一位高级开发人员）编写的综合课程，涵盖上述所有主题。

我是谁？

• 我是 Aswin Barath，一名软件工程爱好者，热爱构建 Web 应用程序，现在  我在自由职业生涯的繁忙时间通过博客分享我的知识。
• 和您一样，我也是一名初级开发人员，正在学习如何成为一名高级开发人员，并在此过程中分享我的知识。
• 这是我的所有社交活动的链接，按平台分类放在一个地方：  https://linktr.ee/AswinBarath

非常感谢您 阅读我的博客🙂。