原文：Frontend VS Backend – What's the Difference，作者：Dionysia Lemonaki
在你的Web开发之旅的开始，你会经常听到关于应用程序的前端和后端部分。
但这些术语到底是什么意思？
在这篇文章中，你将通过分别学习前端和后端来了解两者之间的区别。
以下是我们将涵盖的内容：
- 前端的定义
- 什么被认为是前端？
- 为什么前端很重要？
- 常见的前端任务
- 前端工具和技术
- 前端开发适合你吗？
- 后端的定义
- 后端做什么
- 后端功能示例
- 常见的后端任务
- 后端工具和技术
- 后端开发适合你吗？
什么是前端?
前端是用户在点击一个链接或输入一个网页地址时看到的和与之互动的一切。网页地址也被称为URL，即统一资源定位器，它告诉你什么网页应该加载并出现在你的浏览器中。
它是网络应用的客户端部分。
例如，以这篇文章为例。有一个相关的封面图片，而你现在正在阅读这篇文章。
在页面的顶部，你也可以看到freeCodeCamp的标志。有一个导航栏，上面有一个链接到freeCodeCamp的论坛和一个捐赠的按钮。
还有一个搜索框。你可以输入一个关键词来搜索你感兴趣的主题的文章。
有一个链接可以点击，这将带你到课程和认证，这将帮助你免费学习代码。
上述所有内容代表你正在浏览的网页的前端。
什么被认为是前端？
前端是用户接触到的任何东西和所有的视觉。
它是所有与他们直接互动的部分。
它是所有的内容（content）和样式（styles）。
它是按钮和用户点击链接前的不同悬停效果。
它是带有各种输入字段的联系表格、搜索框和下拉菜单。
布局、文本和颜色。
是图片和视频。
然而，这不仅仅是样式（styles）问题。
它还包括网站的加载速度，浏览网站的方便程度，以及对残疾人的无障碍程度。
它在各种不同设备和浏览器上的可用性和响应性如何。
从本质上讲，前端是一个网络应用程序的所有部分，创造了它的 外观和感觉（look and feel）。
为什么前端很重要
前端代表着某人（或一个团队）的想法、愿景和梦想的实现，可供世人观看和见证。
这个想法需要以正确的方式表现出来，在视觉上具有吸引力。这将是其他人如何看待它的决定性因素。
一个公司或组织的网站如果难以使用和浏览，看起来不好看，不能很好地展示其服务，就会失去客户和顾客。
用户会因为缺乏可用性、不愉快的用户体验和缺乏好的设计而感到沮丧。他们最终会在其他地方寻找他们要找的东西，并且很可能不会再回到那个网站。
常见的前端任务
一个前端开发员每天完成的任务和工作内容会有所不同。它们将在很大程度上取决于他们工作的公司和角色。
作为一个前端开发，你可能会做很多设计工作。
这可能是创建一个风格指南（style guide），以创建一致的风格和品牌的身份和整体外观和形象。
它包括所有文本的排版（字体），色彩方案，公司的标志和布局，仅举几例。
你可以使用设计工具建立用户界面，以确保网站有所有必要的视觉元素，并能愉快地显示和组织。
另一方面，前端开发人员可能不做任何设计工作。
相反，你可以与项目经理、平面设计师和UX/UI设计师合作，解决问题。
你可以根据的用户研究的结果创建视觉效果、图形。
你已经知道了目标受众和人口统计，常见的客户问题，以及关于网站对用户的可用性的信息。
然后，作为一个前端开发员，你的工作将是把原型和静态视觉设计转化为有形的东西，转化为一个真实世界的、像素完美的、功能齐全的网站，让用户可以轻松地与之互动。
使用前端技术，你将实现已经设计好的布局，并建立所有的视觉元素。
前端开发人员的工作的很大一部分是创建响应式网站。
你需要确保网站看起来不错，显示效果最佳，并能在各种设备和屏幕宽度上使用。
如今，用户并不只使用台式电脑，而是大多从移动和平板设备上查看网站。
此外，前端开发人员在设计和开发时要考虑到许多最流行和最常用的浏览器。
网站需要看起来不错，并且需要在所有的浏览器上实现最佳功能。
这就是了解你的目标受众和人口统计学的作用，是至关重要的信息。
根据你的服务/产品和你的用户/客户，你可能需要在开发时考虑到旧的或更现代的浏览器。
前端开发人员的另一个重要工作是确保网站对所有用户都是无障碍的。这需要创建网络无障碍功能，使浏览网络成为每个人的愉快体验。
前端开发人员可以实现的重要的无障碍功能是:
- 文字转语音
- 只用键盘的导航
- 有足够对比度的无障碍颜色组合
- 大型按钮
前端开发人员还致力于改善网站的性能和加载时间。
如果一个网站加载其内容和图像的时间太长，大多数用户会变得不耐烦并点击关闭。
改善网站的加载时间，哪怕是几秒钟，都会有很大的不同，而且很可能会留住用户。
改善网站的加载时间，哪怕是几秒钟，都会有很大的不同，而且很可能会留住用户。
网络表格（web forms）是公司/组织与用户之间沟通的桥梁。它们是用户进行咨询、联系客户服务、提交数据和创建账户的一种简单方式。
前端工具和技术概述
作为一名前端开发员，你将不断学习新的技术，这取决于当时的流行趋势。技术变化很快。
然而，最基本的前端技术是HTML、CSS和JavaScript。
它们在用户的浏览器中运行，是万维网上所有网站的基础。
让我们再来谈谈这些技术吧：
- HTML 是指超文本标记语言。你用语义化的HTML创建网页的所有内容和结构。
- CSS 层叠样式表（Cascading Style Sheets）。CSS是对HTML元素的样式。它添加颜色、字体，决定文本的大小和网页的布局。
- Vanilla JavaScript 是你如何为元素添加功能和互动性的。它是你如何使网页具有动态行为的。
除了这三个，还有许多前端库和框架。
这些有助于确保网站中每个网页的一致性，并为重复性任务提供开箱即用的功能。
一些最受欢迎的是:
- React
- Redux
- Vue
- Angular
根据不同的角色和工作描述，你可能需要设计技能。
一些常用于设计工作的工具有：
- Figma
- Sketch
- Adobe XD
- and Photoshop for image processing
前端开发是否适合你？
前端开发是一项创造性和艺术性的工作。
视觉艺术和编程都有融合。
决定前端开发是否适合你的一个方法是考虑你是否喜欢看到你努力工作的视觉结果。
可以在电脑屏幕上即时看到你的创作成果。
另一件要考虑的事情是，你是否非常关心用户在浏览网页时拥有最佳的用户体验。
用户体验和创建可用的网站是工作的一个重要部分。
要想知道前端开发是否适合你，唯一的办法就是给它一个机会。
一个开始学习的好地方是freeCodeCamp的 响应式网页设计认证，你将通过建立20个项目来学习，并在最后获得一个认证。
你将学习HTML和现代CSS技术，以及最佳的可访问性实践。你还将学习如何创建适应各种屏幕尺寸的响应式网页。
在 响应式网页设计认证 之后，通过 JavaScript算法和数据结构认证 学习JavaScript编程语言，你将学习如何使网页互动。
你将从基础开始，学习语法和必要的基本构件，这将使你能够进展到更高级的主题，如面向对象的编程。
什么是后端？
后端开发涉及负责存储和安全操作用户数据的技术。
它是与所有隐藏逻辑相关的部分，为用户互动的应用程序提供支持。
后端被认为是一个应用程序的服务器端部分。
后端是网络应用中所有隐藏的内部工作和幕后流程。
它指的是在看不到的进行的一切，以及使前端正常和顺利运行的所有必要组件。
它确保一切都在最佳状态下工作。
从本质上讲，后端是用户没有直接访问或没有直接互动的东西，在使用一个应用程序时很可能没有意识到。
面向初学者的后台工作概述
后端负责接收来自客户端的请求。
它处理传入的请求，并确保获取与正确用户相关的适当数据。
然后，它向客户端发送一个响应。必要的用户数据通过前端开发人员创建的前端代码，以良好的视觉效果呈现给可以访问的正确用户。
后台由以下部分组成:
- 服务, 它是一个等待和监听来自客户端的请求的程序。它通过提交数据库查询与数据库进行通信。当数据库回复信息时，服务器会获取正确的必要数据。
它在服务器上运行的应用程序的帮助下实现这一目标，该应用程序包含必要的逻辑，为正确的用户收集所要求的信息和资源。用后台脚本编程语言编写的后台服务器端脚本，负责处理请求。
最后，服务器向客户端发送响应。
- 数据库,它就像一个应用程序的 "大脑"。数据库是用来组织和存储一个应用程序的所有资产、内容和信息的程序，其方式可以方便地访问和检索、管理和更新。
后端功能示例
让我们举一个真实的例子来说明现代网络应用的不同后端功能。
假设你是一个付费锻炼订阅平台的成员。
登录:
- 你需要在一个用户输入栏中输入你的电子邮件地址和密码。
- 有一些基本的验证检查需要通过。验证确保所需的输入字段不是空的，电子邮件地址有正确的格式。
- 然后，通过提交数据库查询，检查你是否作为一个用户存在于数据库中，以了解你的电子邮件地址和密码是否正确。
还会有检查，看你提供的电子邮件地址和密码是否与你创建账户时存储在数据库中的电子邮件和密码组合相符。 - 如果电子邮件和密码不正确，你会看到一个错误信息，说这个组合不存在。
- 如果一切都正确，你会被引导到你的主页，并有一个视觉提示表明你已经登录。这可能是一个 "欢迎 "信息，包括你的名字或用户名。
挑选一个锻炼项目:
- 数据库储存了你所有的原始数据。
已经完成的锻炼会储存在数据库中。同样，任何保存在你创建的播放列表中或标记为你想重温的收藏夹中的内容也是如此。 - 你还可以查看所有可用的锻炼，并对它们进行过滤，只显示某个特定类别。
例如，你可以在搜索框中输入一个关键词，如腹肌、手臂、下半身或上半身。
另一种方法是在网站上选择一个可用的类别，如瑜伽、拉伸、HIIT或力量。数据库将翻阅储存在那里的每一个锻炼项目，但你将只查看你在搜索中指定的特定类别的过滤结果。
支付订阅费用：
- 该应用程序将能够接受信用卡信息或其他付款方式，并将该信息安全地存储在数据库中。
- 它还会在正确的时间更新付款。根据订阅情况，每月或每年都会有重复的更新，确保每次都能从你的卡中提取足够的金额。
所有这些都由一个应用程序的后端处理。
常见的后端任务
可以说，后端开发人员的角色因公司不同而不同，因工作不同而不同。
后端开发人员的主要工作重点是创建和维护帮助前端运作的服务和程序。
一般来说，这里有一些后端开发人员会从事的工作：
- 创建、管理和维护产品/服务使用的数据库类型。
- 建立、互动和维护服务器。
- 使用服务器端技术和网络框架建立内部或外部功能和服务器端软件，以提供问题的解决方案。
- 使用API（应用程序设计接口）工作。设计、开发、实施、维护和管理支持CRUD（创建读取更新删除）操作的API。
- 执行数据验证，确保数据在存储到数据库之前具有正确的格式。
- 用户需要与他们的账户安全互动。后台开发人员创建系统，确保每个用户的数据安全 - 特别是在处理支付处理系统时。
- 处理第三方服务，如认证和外部支付服务，仅举几例。
- 组织系统逻辑。
- 开发网站架构。
后端工具和技术
后端开发人员在日常工作中使用不同的工具和技术来实现网络应用的逻辑。
后端编程的一个关键组成部分是使用服务器端的脚本编程语言。
一些最经常使用的是：
- PHP
- Ruby
- Python
- Java
- JavaScript. 是的，JavaScript被广泛用于前端开发，但近年来也被用于后端开发。Node.js（一个JavaScript运行时间）通过提供后端功能使之成为可能。
除了后端编程语言，后端框架和库被用来提供额外的功能来创建网络应用。
一些最受欢迎的是:
- Ruby on Rails
- Django
- Flask
- Express
当开发者是一个团队的一部分时，他们使用Git--一个跟踪不同项目文件变化的版本控制系统。
它是一个针对程序员的开源协作工具。
与数据库互动是后端开发人员工作的一个重要部分，所以数据库知识是最重要的。
数据库分为两类：关系型和非关系型。
一些最经常使用的数据库是：
- MySQL
- PostgreSQL
- MongoDB
- Oracle
在使用关系型数据库（如MySQL、PostgreSQL和Oracle）时，你将使用SQL。
SQL是结构化查询语言的缩写。它用于执行数据库查询。SQL与关系型数据库进行通信以操作数据。
你可以从 这个有用的资源清单 了解更多关于SQL的信息。
后台开发是否适合你？
后端开发人员负责网络应用程序背后的逻辑，并使前端的功能达到最佳。
如果你喜欢通过将问题分解成小块来解决问题，实施算法，并找到一个最佳和最有效的解决方案，也许后端开发就适合你。
如果你认为自己是一个善于分析和有条理的人，那么后台开发涉及到处理、分析和组织大量的数据。它需要对这些数据进行操作和计算。
最后，如果你不认为自己是一个特别有艺术细胞的人，而更关心事情的逻辑方面和引擎盖下发生的事情，也许你更适合做后台开发。
也就是说，人们可能会从前端开始，然后过渡到后端方面的事情。这样，他们就可以找出他们最喜欢的工作方式。
如果你想开始学习后台开发，可以通过freeCodeCamp的 关系型数据库课程 进行学习。
你将学习使用SQL和PostgreSQL的关系数据库，Git版本控制系统，等等。这些将使你在后端旅程中取得一个良好的开端。
然后，你可以进一步学习 后端开发和API认证。
在这里，你将学习Node.js并使用Express框架构建网络应用。
结语
希望你现在对前端和后端开发的内容有了更多的了解，并能区分两者之间的区别。
简而言之，前台涉及用户互动的所有部分，而后台是为前台互动提供支持的逻辑。
谢谢你阅读本文！