如何在2021年成为一名全栈Web开发人员？

经过如此多的试验和测试后的模板，在网页上创建了您的第一个登录表单时，您感觉如何(不要说您从头开始创建了所有内容……)? …经过多次更改后，将布局分配给第一个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)。是不错的选择。
• Web浏览器：大多数开发人员的首选是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或任何其他屏幕尺寸的设备)上都可以查看和使用。因此，了解创建响应式设计或布局非常重要。让我们来看一些重要的主题。

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

自定义可重复使用的CSS组件

与其依赖大型的CSS框架(如Bootstrap)，不如创建自己的模块化，可重用的CSS组件以在项目中使用，这是很好的。如果您构建自己的定制设计，则无需导入完整的库。您创建只需要特定UI的组件。

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

Saas提供了诸如变量，mixin，函数，嵌套等功能。您还可以为每个可重用组件创建单独的Saas文件。 Sass确实节省了很多时间，因此您绝对应该在2021年学习它。

CSS框架

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

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

UI设计

对于前端开发人员来说，如果他们增强学习一些UI设计原则和实践的技能，那将是很棒的。在公司中，也许会有其他人为您这样做，但是最好注意一些基本的UI设计内容。

• 颜色和对比度
• 空白空间
• 缩放(相对于其他元素的缩放)
• 视觉层次结构(按重要性顺序排列)
• 字体(文字字体，大小等)

的JavaScript

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

• JavaScript基础知识(变量，函数，循环，数组，条件等)
• DOM (文档对象模型)
• 数组方法用于each，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扩展可帮助下载扩展，例如实时服务器或实时saas编译器以与React一起使用。
• 学习使用JavaScript软件包管理器，例如NPM和Yarn。如果您使用的是JavaScript框架或库(例如React)，那么您将大量使用这些包管理器，但是对于其他语言(如Python或PHP)，您将使用不同的包管理器。
• 如果要在前端安装NPM软件包，则必须使用JS模块捆绑包，例如Webpack， Parcel或Rollup 。如果要创建自己的模块，或者要将一个JavaScript文件带到另一个JavaScript文件，则默认情况下，不能仅通过浏览器来执行此操作，因此需要Webpack或Parcel对其进行捆绑。
• 您可能还想看看一些有用的文本编辑器扩展程序和帮助程序。整理(查找错误)，更漂亮(格式化代码)，Live Server，Emmet(编写快速HTML和CSS代码)，代码段等。

基本前端部署

此时，一旦您知道应该为前端开发学习什么工具或技术，就需要知道如何在Internet上部署前端网站。

如果您正在为小型企业构建一些小型应用程序，登录页面或个人站点，则无需学习AWS或DevOps，而仅是因为它们具有光泽和新潮。您将使事情变得更加复杂，而不是使它们变得简单。有不同的路线。其中一些在下面给出…

• 域注册(Namecheap，Google域等)
• 托管托管(InMotion，Hostgator，Bluehost等)
• 静态托管(Netlify，GitHub页面)
• 电子邮件托管(Namecheap，Zoho Mail，CPanel)
• SSL证书(让我们加密，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和Services是很好的状态管理者，可以学习此框架。
• Svelte ： Svelte基本上是一个在过去一两年中非常流行的编译器。它的学习曲线很容易，但是在使用一些较大的应用程序时可能会遇到一些困难。找到工作也比其他框架要难一些。 Svelte具有内置的上下文API来管理状态。

可选学习：

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

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

服务器端语言(选择一种)

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

• NodeJS(不是语言，而是运行时环境)
• Python (非常适合初学者)
• Java (适用于大型组织)
• Php(适合自由职业)
• 红宝石(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： Sinatra上的Ruby on Rails
• C＃： ASP.NET
• 去：狂欢
• Kotlin ：Javalin，KTor

数据库(选择一项)

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

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

GraphQL ：(可选)您可以了解当今非常流行的GraphQL。这是API的查询语言。它具有类似于JSON的简单语法，并且很容易实现。

测验

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

• 单元测试
• 整合测试
• 端到端测试

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

内容管理

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

• 传统CMS： WordPress(PHP)，Drupal(PHP)，Keystone(JavaScript)，Enduro(JavaScript)
• 无头CMS ：(在2021年开始流行)内容丰富，Prismic.io，Strapi，Sanity.io。

部署和DevOps

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

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

• 托管平台： Heroku，Digital Ocean，AWS，Azure。，Linode
• Web服务器： NGINIX，Apache
• 容器： Docker / Kubernetes，Vagrant
• 图片/视频： Cloudinary，S3
• CI(持续集成)/ CD(持续交付)；Jenkins)，特拉维斯(Travis)CI，社交圈(Circle CI)

最终思想

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

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