在本文中，我将讨论相关个人资料的任何程序员都应该了解的Web开发的各个方面。如果可能，我将提供指向材料的链接，这些材料将演示相应功能的使用示例以及正确使用这些功能的建议。在这里，我将重点介绍Angular，React和Vue中某些机制的实现。
用户界面
▍页面布局
构建Web应用程序首先要设计一个吸引人的整洁布局，以吸引用户并帮助他们在网站上花费大量时间。
有很多CSS框架。也许您会在其中找到最适合您的一款。其中最著名的是Bootstrap，并且由于CSS预处理器的新功能，您可以深度自定义此框架的样式。在这里可以找到各种组件和控件，对它们的一致使用将使您可以创建一致设计的站点。Bootstrap的版本5
的Alpha版本目前已经发布。
如果您希望自己为项目创建样式集（组件，填充，容器等），则可以将注意力转移到CSS Flexbox上，使这种灵活的网页元素布局成为您自己的CSS框架的基础。
CSS Grid通过将其放置在网格中而采用了另一种组织网页内容的方法。
▍响应式设计
响应能力是站点将其内容调整为在其上查看设备的能力。例如，在智能手机和笔记本电脑上，本文看起来会有所不同。
Web应用程序的响应能力有助于其在不同的屏幕上正确显示，提高内容的可读性并改善用户体验。
在MDN上，您发现需要为不同的设备（例如，打印机或显示器）应用不同的CSS样式时，以及考虑到设备的特定特征和参数（例如，针对不同的屏幕分辨率或用于浏览器视口的不同宽度）。
CSS媒体查询是支持响应式设计的强大工具。
它们可以与已经提到的CSS Flexbox或CSS Grid结合使用。如果您更喜欢使用CSS框架，那么这些框架通常已经实现了相应的功能。使用这种方法，要创建响应页面，只需将适当的类添加到元素。
当我们谈论应用于图像的响应性概念时，我们可以想到一个属性
srcset。使用此属性，可以根据设备屏幕的特性显示不同大小的图像，这有助于减少从服务器传输到浏览器的数据量。
components同质组件和控件
用户将很高兴在该站点上工作，该站点的组件和控件以相同的样式统一设计。这种设计方法使用户可以更轻松地掌握网站的新功能，并可以像公司的名片一样使用。
如果要使用Angular，React或Vue等现有框架和库来开发项目，则以下是一些样式库示例，这些示例库实现了为这些工具设计的Material Design原理：
- 有角度的。Angular Material库，您可以在其中找到功能强大的组件和完整的CDK。
- 反应 在Material UI Web组件中实现了Material Design原理。
- Vue。在这里，我们有Vuetify，这是为Vue项目设计的材料设计实现。
▍表单验证和错误处理
对于那些从用户那里得到一些东西的项目来说，数据验证是最重要的任务。此外，没有什么应阻止应用程序从用户那里接收正确的数据：网络问题，服务器错误或用户本人造成的错误。以下是针对不同框架构建的一些用户输入验证解决方案：
- 有角度的。由于Angular是一个成熟的框架，它为我们提供了一种特殊的API以进行表单验证。
- 反应 React Hook表单库可能是React项目中最常用的表单验证器。
- Vue。Vue的对应库的名称vuelidate建立在一个有趣的双关语上。
用户体验
asynchronous使用异步机制
将数据加载到应用程序或保存数据可能需要数毫秒，数秒甚至数分钟的时间。这就是为什么重要的一点是，使用适当的指示器将这种操作通知给用户，而不是阻碍用户进行项目工作。
诸如promises之类的JavaScript引擎和诸如Fetch之类的浏览器API可以帮助我们完成这些任务。
▍支持过时的浏览器（polyfill）
前端开发的世界正在迅速发展。对于浏览器也可以这样说。但是，不同的人使用不同的浏览器和不同版本的浏览器。因此，为了确保其代码在所使用的所有平台上都能正常运行，开发人员需要注意兼容性。例如，较旧版本的IE不支持最新版本的Google Chrome所具有的JS和CSS功能。Polyfill
用于确保项目在较旧的浏览器中正常运行。他们在很好描述这个文章：“一个填充工具（polyfiller）是一段代码（或插件），它提供了技术的实现，你的开发人员，会期望的标准浏览器功能中找到。”
要了解特定浏览器版本是否支持特定CSS规则或特定JS功能，请访问可以使用我的网站。
如果我们谈论解决Angular，React和Vue中的浏览器支持问题，那么情况将是这样的：
- 有角度的。Angular文档中有一个特殊的部分提供浏览器支持。
- 反应 使用Create React App支持创建的项目，例如ReactDOM，从IE 9开始的浏览器。此支持基于对polyfill的使用。
- Vue。CLI文档中在此处介绍了对旧版浏览器的支持详细信息。
▍本地化和国际化
您的站点可以有来自世界各地的用户。在创建项目时考虑到这一事实将为每个决定查看该站点的人增加该站点的可用性。根据W3C的定义，
本地化（l10n，本地化）是指使产品，程序或文档的内容适应特定目标市场的语言，文化和其他要求。 基于W3C资料的国际化（i18n，国际化）是产品内容，程序或文档的创建和开发，从而可以轻松地针对文化，地区或语言不同的目标市场进行本地化。
这两个概念是相互关联的，可以用不同的方式实现。例如，这包括以下技术：
- 使用网站上的下拉列表以及项目支持的语言列表。
- （使用Geolocation浏览器API ）访问有关用户地理位置的信息，并根据收到的数据调整网站。
- 在URL中指定语言信息。例如，它可能看起来像这样：
example.com?lang=en或这样：example.com/en甚至如此：en.example.com。
现在在Angular，React和Vue中了解这些概念。
- 有角度的。Angular还是一个成熟的框架，它为开发人员提供了现成的解决方案。
- 反应 项目的国际化任务可以使用React环境中流行的react-i18next库来解决。
- Vue. vue-i18n.
▍
可访问性（a11y，accessibility）是网站适应残障用户需求的能力。
网站的可访问性经常被忽略。为了使残障用户可以访问该项目，可能有必要修改在其上使用的用户体验形成方法，这有时可能需要对项目进行深入的设计。无论如何，重要的是要考虑所有用户的需求，尤其是考虑到即使对项目代码进行很小的更改也可以显着提高网站的可用性，以供那些难以使用常规网站的用户使用。
各种技术可用于使Web项目可访问。其中包括：
- 使用image属性
alt。 - 使用ARIA属性来设计站点页面内容的描述。
- 支持调整文本大小的功能。
- 提供高对比度模式。
- 支持使用键盘（尤其是按键
TAB和箭头键）进行站点导航。
a11yproject.com 项目正在实施标准化这些概念的想法。这个倡议值得尊重！JS的主要框架和库也在努力支持可访问站点的开发：
- 有角度的。该框架的文档中有一个特殊的部分。Angular CDK级别也支持可访问项目的开发。
- 反应 在React库的文档中也讨论了可访问性。还有一个特殊的库-react-a11y。但是不再支持此库，因此请谨慎使用并记住计划将其替换为react-ax库。
- Vue。vue-a11y插件将帮助您在Vue中开发可访问的项目。创建vuetify库时，还考虑了可访问性注意事项。
▍通知
为了与您的网站访问者保持联系，您可以使用浏览器API通知。有了它的帮助，您可以通知用户该网站上已经出现了一些新内容。
加载和处理数据
reliable可靠数据的单一来源
应用程序状态管理工具于2015年开始流行，现在已成为几乎所有Web项目的必备工具。尽管在应用程序状态管理领域中存在一些混乱，但是使用专用解决方案通常是集中应用程序数据的一种简单有效的方法。所有状态管理工具都基于Flux模式。
Flux模式的NgRx实现（source-ngrx.io）
这些工具为相同实体使用不同的名称。例如，NgRx称为选择器的东西在Vuex中称为吸气剂。Angular称为reducers的方法在Vue中称为突变。
以下是Angular，React和Vue中使用的状态管理工具：
data下载资料
有多种方法可以将数据加载到应用程序中。其中最常见的是使用指向Web API的HTTP请求。该浏览器具有旨在组织数据加载的Fetch API ，但是针对主要框架和库，他们已经开发了自己的解决方案：
- 有角度的。Angular文档建议使用rxjs和基于Observer的方法（此处使用Observable或Subjects）。
- 反应 React文档建议使用Fetch API加载数据。
- Vue。Vue社区更喜欢使用Axios库。数据加载机制的这种实现基于promise。
在谈论将数据加载到Web应用程序的机制时，值得一提的是GraphQL。这项技术已经改变了在前端应用程序中加载数据时使用的方法。应用时，“客户端使用查询语言确定他需要什么”。使用GraphQL，我们可以从远程数据源中确切地获得所需的信息。
以下是我们感兴趣的前端工具的GraphQL实现：
▍本地数据存储
本地数据存储是用户计算机上的数据存储。数据可以使用cookie以及localStorage和
sessionStorage。
▍网络工作者
Web worker是新浏览器API引入的一项技术。它允许JavaScript代码在后台运行，从而减轻了主线程的负担，并且不影响网页代码的性能。
Web worker适用于Angular，React和Vue：
- 有角度的。Angular文档中有一个专门针对此主题的部分。
- 反应 在这里可以找到一个特殊的React钩子。
- Vue。在Vue应用程序中，可以使用vue-worker库方便地使用Web worker。
网络与性能
▍应用包大小
智能手机市场的增长彻底改变了Web开发的世界。现在，在创建网站时，我们首先需要考虑移动用户的需求。使用Web项目时，移动设备必须加载的数据量越少越好。根据下图，2016年移动互联网使用量已超过台式机使用量。
全球Internet使用情况（来源-宽带搜索.net）
这无疑告诉我们当今Web项目捆绑包大小有多重要。为了节省移动用户的资源，下载文件的大小应尽可能小。对我们来说幸运的是，主要的前端工具和附加组件的开发人员在开发项目时会考虑到这一点。减小应用程序包的大小也意味着更好的性能。
- 有角度的。使用webpack-bundle-analyzer可以轻松方便地检查Angular应用程序包。此外，Angular CLI给我们提供了一个选项
stats-json，允许我们在构建捆绑包后生成报告。 - React. Create React App , .
- Vue. Vue, Angular,
report, .
▍- -
服务工作者是在Web浏览器中运行并管理应用程序数据缓存的脚本。这是用于将常规网站转换为渐进式Web应用程序（PWA）的机制之一。您可以像使用HTTPS的常规网站一样使用PWA，但是Progressive Web Apps具有一些特殊功能。这样的功能包括，例如，在移动设备上安装此类应用程序而不必将其发布在专门的应用程序商店中，以及在不访问Internet的情况下支持应用程序的操作。
您可以在Angular，React和Vue中使用服务工作者：
▍服务器渲染
服务器端渲染（SSR）是一组技术，这些技术正在彻底改变基于Angular，React和Vue的应用程序的开发。使用SSR，HTML在服务器上生成并发送到浏览器。之后，静态HTML标记将进入工作状态，并且Web应用程序已完全可以在客户端上使用。使用服务器渲染时，有几个目标：
- 改善SEO网站。
- 加速浏览器中网站的显示。
以下是我们正在研究的前端工具的SSR解决方案：
▍静态站点生成器
随着Jamstack的广泛使用，静态站点生成器（SSG）已成为备受追捧的技术。Jamstack应用程序是一种Web应用程序，其内容可用于浏览器，并且实际上不需要Web服务器（这些资料可以直接从CDN提供给客户端）。可以通过上面的链接找到有关此类网站的详细信息。我们在此仅列出SSG的主要优势：
- 速度：静态网站生成器在项目构建期间创建网站页面，而不是在客户端请求这些页面时创建。
- 安全性：SSG的使用使您可以放弃内容管理系统（CMS），后者通常是黑客攻击的目标。
- 简化缩放比例：使用SSG的Web项目是可以从任何地方传输到客户端的文件的集合。这使得将此类文件存储在CDN上变得更加容易。结果，事实证明静态站点可以很好地扩展。
- 简化的开发过程：SSG项目不需要后端和数据库。这使开发人员更容易。
有针对Angular，React和Vue的SSG解决方案：
SSG的其他项目包括：11ty，Hugo，Jekyll。
分析工具
▍用户行为监控和A / B测试
观察用户在网站上的行为是可选的，但是拥有此类数据对改进Web项目做出了重大贡献。有专门的一类工具，旨在收集有关用户与站点交互的信息。这些工具使站点开发人员可以更好地考虑用户的需求，并通过A / B测试，帮助选择最合适的替代方案。我们正在谈论站点的功能，它们支持的用户行为模式，设计。
以下是一些监视用户行为和A / B测试的解决方案：
▍ -
一次性开发高性能Web应用程序很困难。但是，例如，经过优化以加快加载速度的应用程序将比较慢的版本产生更多的积极情绪。有各种项目可以分析站点并提出改进建议。例如-Google的PageSpeed见解。
在Google Chrome开发人员工具中，您可以找到一个非常有价值的工具来分析网站性能-Lighthouse。它以100分制对五个标准（性能，可访问性，最佳实践，SEO，PWA）进行评估。分析之后，将生成一份报告，其中包含改善站点的建议。
使用Lighthouse
分析站点在Chrome开发人员工具中可以找到的另一个性能分析器是Coverage面板，该面板可让您搜索未使用的JS和CSS代码。通过从项目中排除此类代码，可以减小其捆绑包的大小。这将加快网站的加载速度，这在移动设备上尤其明显。
O搜索引擎优化
SEO，搜索引擎优化，是您需要执行的操作，以提高网站在Google，Bing，DuckDuckGo等搜索引擎中的排名。一个经过优化的站点将变得更加明显。实际上，非常重要的是，在Web开发的世界中甚至还有一个特殊的位置：“ SEO专家”。
如果我们在Angular，React和Vue中谈论SEO，那么我们将获得以下信息：
我同意前端开发是一个广泛且不断变化的专业领域。实际上，如果某人试图成为一个万事俱备的通用开发人员，那么实现这一目标将非常困难，这将花费他很长的时间。此外，每个Web项目都有其自己的需求和优先级。这就是为什么在项目工作开始时就必须决定最重要的原因。这将使您不会分散精力，仅选择和研究最必要的内容，并计划项目的体系结构，使其与目标一致。
您认为哪种新的前端开发技术最有前途？
