📌  相关文章
📜  如何在 2021 年成为全栈 Web 开发人员？

📅  最后修改于: 2021-11-25 03:24:35             🧑  作者: Mango

经过这么多次试验和测试模板后，当您在网页上创建第一个登录表单时，您感觉如何（不要说您是从头开始创建的……）？ …当你在多次更改后给你的第一个web应用程序布局时感觉如何（是的……你根据要求参考了其他一些网站或模板……）？……当你成功处理数千个用户时，你感觉如何后端的敏感信息来构建应用程序（这很可怕……）？

2021 年如何成为全栈 Web 开发人员

大多数 Web 开发人员都经历了上述所有阶段，最初他们中的一些人可能会感到沮丧，但是当他们看到他们的网站上线并且全世界的人都在使用它时，整体感觉真的很令人兴奋和惊奇。 Web 开发人员负责许多任务，从收集需求到设计网站、处理其后端部分，以及使其成功地为用户提供服务。
每年都有新的技术和工具出现在行业中，以提高开发人员的生产力并使网站更好地为用户服务。对他们来说，保持在 Web 开发游戏的领先地位变得具有挑战性。今天我们要讨论的是2021年成为Web开发人员的完整地图。这将是所有类型开发人员（前端、后端和全栈）的实用指南。

首先确定您的目标或路径

我们将讨论很多技术、趋势和工具，但我们不想让您不知所措，因此您需要首先决定成为 Web 开发人员您想做什么，因为这将帮助您选择合适的学习的工具和技术。成为 Web 开发人员有很多不同的原因，下面给出了一些选项……

  • 您想作为 Web 开发人员在一家公司工作，这是最流行和最常见的原因。
  • 您想以自由开发人员的身份开始自己的业务或代理。
  • 您可以成为其他公司的顾问。
  • 您可以创建自己的应用程序来赚钱。
  • 您想使用此技能成为内容创建者。
  • 编码作为一种爱好。

从上述兴趣或目标领域，您可以选择适用于您的目标的正确工具和技术。如果您的目标只是成为一名前端开发人员，您可以选择前端开发的工具和技术。后端和全栈开发也是如此。

Web 开发的基本工具和软件

  • 计算机和操作系统：如果没有计算机和操作系统运行，您就无法编写代码。要学习 Web 开发，您不需要任何花哨的计算机（如果您有一台就好了……）。您可以使用任何类型的中端笔记本电脑或台式机。对于操作系统，您可以使用MacOS、Windows（最新版本）或 Linux任何适合您的方式。
  • 文本编辑器/IDE：毫无疑问， VSCode适用于大多数情况和大多数语言。它具有良好的性能、出色的扩展、内置终端和大量功能。在 2019 年的 StackOverflow 调查中，VSCode 也是开发人员的首选。您还有其他一些不错的选择，例如Sublime Text、Vim或 Atom 。如果我们谈论 IDE，那么Visual Studio （ASP.net 或 C#）、 Eclipse和Netbeans （Java）。是不错的选择。
  • 网页浏览器：大多数开发者的首选是Chrome或Firefox 。 Chrome 速度很快，它使用 V8 引擎（JavaScript 引擎）。 Firefox 也取得了长足的进步，它的一些好东西不在 Chrome 浏览器中。两种浏览器都有出色的开发工具来解决 Web 开发中的问题。其他需要熟悉的网络浏览器是Safari 、 Edge 、 和勇敢的。
  • 终端：您将使用一些系统命令在 CLI 中进行大量工作。您可以为您的 Web 开发项目使用默认或第三方终端。 Bash、Zsh、Powershell、Git Bash、iTerm、Hyper都是可供使用的选项。
  • 设计（可选）：不是每个人都需要学习这个。在公司中，有一个特定的团队来制作图像、徽标或草图，但如果您是前端开发人员，或者您是自由职业者，那么您可能需要学习Adobe XD、Photoshop、Sketch或Figma 。

从 HTML 和 CSS 开始

HTML 和 CSS 是 Web 开发的基本构建块。无论您的 Web 应用程序有多先进，或者您使用的是何种框架和后端语言，您都必须使用 HTML 和 CSS 构建您的前端应用程序。所以这是 Web 开发中要学习的第一件事。

  • HTML5 （语义标签、属性、文档类型等）
  • CSS 基础颜色、字体、定位、盒子模型等。
  • CSS Grid 和 Flexbox来对齐事物或创建列。
  • CSS 自定义属性
  • 过渡和动画对于前端开发人员来说非常重要。

响应式布局

您的应用程序应该可以在各种设备上查看和使用，例如智能手机、平板电脑、台式机、iPad 或任何其他屏幕大小的设备。因此，了解如何创建响应式设计或布局非常重要。让我们看看一些重要的主题。

  • 了解如何设置视口
  • 不同屏幕尺寸的媒体查询。
  • 流体宽度
  • rem 单位
  • 移动优先

自定义可重用 CSS 组件

与其依赖像 Bootstrap 这样的大型 CSS 框架，不如创建您自己的模块化、可重用的 CSS 组件以在您的项目中使用。如果您构建自己的自定义设计，则无需导入完整的库。您可以创建仅用于特定 UI 的组件。

最近也出现了一种新趋势 Saas，它有助于更有效地编写 CSS 代码。如果您已经了解 CSS，那么您无需花费太多精力来学习 Saas。 Saas 是一种 CSS 预处理器，可为标准 CSS 添加更多功能并使其更高效。您可以使用变量、嵌套、条件来减少 CSS 的重复并使其更高效。

Saas 提供诸如变量、mixin、函数、嵌套等内容。您还可以为每个可重用组件创建单独的 Saas 文件。 Saas确实节省了很多时间，所以你一定要在2021年学习它。

CSS 框架

学习 CSS 框架不如去年流行，但对于不擅长设计的开发人员来说仍然非常相关或有用。有很多流行的 CSS 框架可供使用，下面给出了其中的一些。

  • Bootstrap是最流行的 CSS 框架（Bootstrap 5 发布）学习。学习引导程序也有助于学习其他框架。
  • Tailwind CSS是另一个越来越受欢迎的框架，它与其他框架略有不同。它是一组实用程序类，因此您可以创建自己的按钮和其他看起来与其他东西不同的东西。它们也是高度可定制的。
  • Materialize ：基于Material Design，这个框架是 HTML、CSS 和 JavaScript 的组合。这也是一个非常有用和流行的库，用于设计您的前端应用程序。
  • 布尔玛： 模块化和轻量级的开源 CSS 框架。

界面设计

对于前端开发者来说，如果他们能够提高学习一些 UI 设计原则和实践的技能，那将会很棒。在公司中，也许其他人会为你做这件事，但关注一些基本的 UI 设计内容是很好的。

  • 颜色和对比度
  • 空白
  • 缩放（相对于其他元素的大小）
  • 视觉层次结构（按重要性排列）
  • 排版（文本字体、大小等）

JavaScript

在学习了 HTML 和 CSS 之后，接下来需要学习的是 JavaScript。对于开发人员来说，掌握 JavaScript 基础知识非常重要。您将在服务器端语言（如PHP、 Python或 ASP.net）中使用大量 JavaScript，如果您想使用 React、Angular、NodeJS、Vue 或任何其他 JavaScript 框架，则非常需要学习这种语言或图书馆。以下是您应该在 JavaScript 中涵盖的一些重要主题……

  • JavaScript 基础（变量、函数、循环、数组、条件等）
  • DOM （文档对象模型）
  • 数组方法foreach、map、filter、reduce 等。
  • JSON （JavaScript 对象表示法）
  • HTTP 请求获取 API- GET、POST、PUT、DELETE

一些重要的工具

您将在 Web 开发中使用一些工具。这些工具将帮助您进行调试、提高工作效率、管理代码、与其他开发人员协作等等。让我们讨论其中的一些工具。

  • Git （版本控制）和 GitHub是 2021 年你绝对应该学习的最受欢迎的工具。 Git 在与其他开发人员协作和管理代码方面有很大帮助。您还有一些其他选项，例如 GitLab、Bitbucket 和其他一些选项。
  • 了解如何使用浏览器开发工具。无论是 Chrome 还是 Firefox，您都应该知道如何使用不同的选项卡，例如元素选项卡、JavaScript 控制台、请求和响应的网络选项卡、应用程序选项卡以及其他用于不同目的的选项卡。
  • 大多数 IDE 或文本编辑器都能够添加扩展或插件，这对提高生产力和构建 Web 应用程序非常有帮助。例如，Visual Studio Code 中的VSCode 扩展有助于下载诸如 live-server 或 live-saas 编译器之类的扩展以与 React 一起使用。
  • 学习使用 JavaScript 包管理器，例如NPM和Yarn。如果您使用 JavaScript 框架或库（如 React），您将经常使用这些包管理器，但对于其他语言（如Python或PHP），您将使用不同的包管理器。
  • 如果你想在前端安装 NPM 包，那么你必须使用JS 模块打包器，例如Webpack、 Parcel或 Rollup 。如果你想创建你自己的模块，或者如果你想把一个 JavaScript 文件带到另一个 JavaScript 文件，默认情况下你不能只用浏览器来做，所以你需要 Webpack 或 Parcel 为你捆绑它。
  • 您可能还想查看一些有用的文本编辑器扩展和帮助程序。 Linting（查找错误）、Prettier（格式化代码）、Live Server、Emmet（编写快速的 HTML 和 CSS 代码）、片段等。

基本前端部署

此时，一旦您知道应该学习哪些工具或技术进行前端开发，您就需要知道如何在互联网上部署您的前端网站。

如果您正在为小型企业构建一些小型应用程序、登录页面或个人站点，则无需学习 AWS 或 DevOps，仅仅因为它闪亮时尚。你会让事情变得更复杂，而不是让它们变得简单。有不同的路线可供选择。其中一些在下面给出……

  • 域名注册（Namecheap、Google Domains 等）
  • 托管托管（InMotion、Hostgator、Bluehost 等）
  • 静态托管（Netlify、GitHub Pages）
  • 电子邮件托管（Namecheap、Zoho Mail、CPanel）
  • SSL 证书（Let’s Encrypt、Cloudflare、Namecheap）
  • FTP、SFTP（文件传输协议）适用于较小的应用程序。
  • 高级应用程序的 SSH（安全外壳）。
  • CLI 和 Git。

到目前为止，我们讨论过的任何工具、技术趋势或步骤都是前端开发的一部分。您还不知道该框架，但您可以为个人和小型企业构建网站，或者您可以构建适合移动设备的布局。

使用我们迄今为止讨论过的工具或技术来部署您的小型应用程序或项目。如果你想申请这些工作，那么学习一些前端框架，比如 Vue，或者 Angular，或者像 React 这样的库会很棒。

前端框架和状态管理

框架允许您进行更高级的前端开发。它为您提供了许多优势，例如可重用的组件、更有条理的 UI 或页面交互。所以使用框架可以节省大量时间。

选择一个前端框架来提高你的技能，并尝试选择一个大多数公司在当前场景中都在使用的框架。另外，了解状态管理。每个框架都有不同的方法来做到这一点。以下是 2021 年的一些流行框架和状态管理器。

  • React ： React 库是 Web 开发中最流行的学习方式，与其他框架和库相比，它相当容易。 React 开发人员也有很多工作机会。您可以将Redux和Context API 与 Hooks 一起用于状态管理。
  • Vue： Vue 也越来越受欢迎，开发人员也可以更喜欢学习 Vue。与 React 和 Angular 相比，Vue 是最容易学习的。 VueX是为视图而构建的状态管理器。
  • Angular ：这个框架一般用在大型组织中。它有一个非常陡峭的学习曲线。你必须学习 TypeScript 才能使用 Angular。它允许您使用可选的静态类型并支持 ES2015 的功能。 NgRx和服务是很好的状态管理器，可以为这个框架学习。
  • Svelte ： Svelte 基本上是一种在过去一两年中变得非常流行的编译器。它有一个非常简单的学习曲线，但是在使用一些较大的应用程序时您可能会遇到一些困难。找工作也比其他框架难一些。 Svelte 有一个内置的上下文 API 来管理状态。

可选学习：

  • 您可以学习在行业中非常流行的 TypeScript。它是 JavaScript 的超集，使您的代码更健壮且不易出错。 TypeScript 非常适合大型项目。
  • 了解服务器端渲染。 NextJS (React)、NuxtJS (Vue) 和 Angular Universal (Angular) 是允许您在服务器上运行 React、Vue 和 Angular 的框架。它们都具有出色的功能，例如更好的 SEO、文件系统路由、自动代码拆分、静态导出、JS 中的 CSS 以及许多其他功能。
  • 静态站点生成器： Gatsby（React）、Gridsome（Vue）、11ty（Jekyll 的 JS 替代品）、Jekyll（基于 Ruby）、Hugo（基于 Go）

我们已经讨论了大多数前端开发工具和技术。现在让我们谈谈成为后端开发人员或全栈开发人员的语言和技术。

服务器端语言（选择一项）

您应该至少了解一种服务器端语言。要在 2020 年选择一种语言，下面给出了一些选项……

  • NodeJS（不是一种语言，而是一种运行时环境）
  • Python （适合绝对初学者）
  • Java （适合大型组织）
  • PHP（适合自由职业者）
  • Ruby（2020 年不太流行）
  • C＃
  • 科特林
  • 高朗
  • 德诺

注意：无论您喜欢学习什么服务器端语言，请确保您了解使用该语言的数据结构和算法。数据结构和算法将帮助您为用户呈现数据，并帮助您优化 Web 应用程序中的代码。我们特别建议您专注于使用数组和字符串（最重要）。您将在这两个方面进行大量工作。

还可以了解软件设计模式。设计模式为常见问题提供了通用的可重用解决方案。学习设计模式将有助于使您的代码可重用、无错误且干净。它将加快您的开发过程。

服务器端框架（选择一项）

一旦您学习了自己选择的一种服务器端语言，请使用适合您语言的框架之一。您可以选择下面给出的选项之一……

  • Node.js – Express、Koa、Adonis、Feather.js、Nest.js、Loopback
  • Python: Django, Flask,
  • Java： Spring MVC、Grails
  • PHP: Laravel, Symfony, Codeignitor, Slim
  • Ruby： Ruby on Rails、Sinatra
  • C#： ASP.NET
  • 去：狂欢
  • Kotlin : Javalin, KTor

数据库（选择一项）

大多数网络应用程序需要一个地方来存储数据。在某些情况下，某些技术或某些语言与某些数据库配合得很好。例如：在 Mern 堆栈中，M 代表 MongoDB，在 LAMP 堆栈中，M 代表 MySQL，但这完全取决于您要为应用程序选择哪个数据库。我们将讨论 2020 年的一些流行数据库。

  • 关系数据库： RDBMS 仍然是最流行的数据库。 PostgreSQL、MySQL、MS SQL 仍然是最喜欢使用的。
  • NoSQL： MongoDB、CouchDB、Elasticsearch
  • 云数据库： Firebase、Azure Can DB、AWS
  • 轻量级和缓存： Redis、SQLite

GraphQL：（可选）您可以了解时下非常流行的 GraphQL。它是您的 API 的查询语言。它具有类似于 JSON 的简单语法，并且相当容易实现。

测试

许多开发人员跳过学习测试，他们只是认为这是浪费时间，但我们建议您学习它以节省您的时间并使您的开发人员生活更轻松。

  • 单元测试
  • 集成测试
  • 端到端测试

有适用于不同语言的测试框架，例如用于 JS 测试的 Jest 和 Mocha，以及用于Python 的PyTest 和 Robot。

内容管理

您绝对应该了解内容管理系统，特别是如果您是自由职业者。 CMS 用于向您的网站或应用程序添加内容。客户能够更新他们自己的内容非常好。

  • 传统 CMS： WordPress (PHP)、Drupal(PHP)、Keystone (JavaScript)、Enduro (JavaScript)
  • Headless CMS： （2021 年开始流行）Contentful、Prismic.io、Strapi、Sanity.io。

部署和 DevOps

托管全栈应用程序或后端应用程序比仅仅托管前端应用程序要复杂一些，尤其是当您拥有数据库时。确保您知道如何使用 CLI 进行部署。
在大多数公司中，有一个不同的团队致力于 DevOps。因此，了解 DevOps 是完全可选的。如果您正在从事自己的项目，则可以了解到这一点。

了解以下内容以在服务器上部署您的应用程序。

  • 托管平台： Heroku、Digital Ocean、AWS、Azure.、Linode
  • 网络服务器： NGINX、Apache
  • 容器： Docker/Kubernetes、Vagrant
  • 图像/视频： Cloudinary，S3
  • CI（持续集成）/CD（持续交付）；Jenkins，特拉维斯 CI，圈 CI

最后的想法

以上所有技术、工具都足以让您成为前端、后端或全栈开发人员。不要对我们在本文中提到的内容感到不知所措。你不必学习一切。根据您的最终目标选择正确的工具和技术集。按照下面给出的要点为自己设定正确的道路……

  • 根据您想做的事情创建学习路径
  • 学习基础知识和必要的技术
  • 观看教程/视频，阅读文档，但请确保您在编码中亲自动手。根据所学内容制作自己的项目。
  • 创建一个投资组合并根据您的最终目标采取行动。申请工作，为自己寻找客户等。

jQuery 是一个开源JavaScript 库，它简化了 HTML/CSS 文档之间的交互，以其“少写，多做”的理念而广为人知。您可以按照本jQuery 教程和jQuery 示例从头开始学习 jQuery 。