我的2020年新的Web技术堆栈

还记得Web技术栈很简单的日子吗？ 什么时候可以像LAMP，LEMP或LEPP这样的四字母减少形式指定这些堆栈的级别？ 什么时候将创建和维护站点所需的全部工作简化为完全普通的硬件，某些开源软件以及为实现目标而坚持不懈？

我的第一个成功站点（现在是1999年的一个旧项目）是使用一种可以被指责的技术创建的：HTML4，CSS2，JavaScript3和Apache 1.1。 所有这些都是在装有Linux 2.0的服务器上进行的。 该网站包括38,000页。 直到20年后的今天， 他仍然发行它们 。



从那时起，一切都变了。 这也适用于Web技术堆栈。 现在，它们与以前完全不同。

这篇文章的作者（我们今天将发表其翻译）是想谈谈他如何从完整堆栈移到2020堆栈。 在此过程中，有些技术出人意料地成为了人们的最爱，而有些则失去了以前的吸引力。

2020 Web堆栈

2020年是新十年的开始。 现在是时候讨论新的Web技术堆栈了。

2020年的堆栈是什么样的？ 我必须说，这很大程度上受网站开发人员想要达到的目标的影响。 选择合适的级别在很大程度上取决于项目所需的可伸缩性程度。

我对小型网站特别感兴趣。 在虚拟服务器上感觉良好的服务器。 这些站点不需要负载平衡器或持久性数据存储。 这是WordPress长期以来占据的CMS细分市场。 但是，所有这些的核心并不是某种简约的服务器。 取而代之的是，我们谈论的是一种可以承受恒定流量的系统，而无需在高峰时段自动增加其功率。

现在，对于我感兴趣的项目的开发和支持，我使用了一个由12个级别组成的技术堆栈。

▍1。 云提供商

我的基础是一个云提供商，该提供商考虑了习惯于微调执行Web项目的环境的人员的需求。 我一直使用自己的服务器，直到它们的支持成本变得过高为止。 服务器机架中的租用空间，专用IP地址，确保必要的带宽...所有这些都增加了物理服务器的月成本。 但是真正的勒索软件是电力成本。 云提供商比我每天给电商发送的1.25美元便宜得多。 拒绝这些开支使我每年节省了数百美元。

▍2。 带有SELinux的Fedora Linux发行版

安全真正困扰着我们所有人。 可以将SELinux与运行在Linux上的强大安全系统进行比较。 如果我们添加一个配置良好的iptables-firewall，结果将使站点所有者可以在晚上安静地入睡。 如果不确定您是否需要所有这些，请执行以下实验。 在您最喜欢的云提供商处部署新服务器，并观察即将受到的攻击。 我看到在创建新服务器后不到10分钟的时间内，通过SSH登录尝试对新服务器进行的暴力攻击是如何开始的。

▍3。 Web服务器读写服务

我将读写服务器Web服务器与LetsEncrypt的TLS证书一起使用。 我曾经是Apache的粉丝，建立和启动新网站只花了我几分钟的时间。 但是由于我从PHP切换到JavaScript，所以我不得不忘记Apache。 在我看来，Express服务器似乎是一个非常简单的工具，但是直到我尝试在其中重现Apache给我的所有功能。 我们正在谈论的内容协调机制，条件缓存，数据压缩，SEO重写URL，CORS，内容保护策略。 结果，我切换到了Read Serve Server服务器，默认情况下所有这些功能都存在。

▍4。 Node.js应用程序运行时

Node.js环境负责服务器上运行的应用程序逻辑。 感觉到NPM生态系统中有适合所有场合的软件包。 因此，从可用的软件包组装我确切需要的任务以及在Read Write Serve上启动所有这些任务的任务非常简单明了。 要组织现代Web项目所需的所有工作，您无需付出过多的努力。 这是在发送电子邮件，使用支付服务，访问数据库以及其他所有内容，这意味着使用服务器API。

5英镑 MariaDB数据库

我使用MariaDB数据库服务器。 这是由开源社区重新命名和掌握的MySQL的分支。 当我需要存储非结构化JSON数据时，我使用PostgreSQL。 事实是，这使我可以直接在特定的JSON属性上执行请求。 这有点像MongoDB，但是基于熟悉的SQL语法。

▍6。 HTTP / 2

我依靠具有持久连接和流多路复用的HTTP / 2功能来在应用程序的各个部分之间进行通信。 这是受人尊敬的HTTP / 1.1协议的两个补充。 改变了我形成文件的方式。 首先，阻塞队列开始的问题已经消失。 结果，即使我有很多小图像，对精灵列表的需求也消失了。 其次，现在无需通过将JavaScript和CSS文件组合到包中来对其进行优化。 建立客户端-服务器连接后，所有这些小文件都将通过此连接进行传输而不会中断。

▍7。 使用蓝色短语的HTML模板

Blue Phrase是一个模板系统，可让您以紧凑的形式准确描述HTML结构。 对我来说，HTML代码无法读取的哈希以及打开和关闭标签之间的差异的时代已经结束。 在模板中，我通常仅使用少量变量（标题，描述，关键字，SEO数据，加载屏幕，日期等）并将其以声明式样式放置在模板中。

8英镑 使用读写文档编写页面代码

创建新页面时，我专注于我要表达的内容，而不是设计。 为了解决这个问题，我使用了Read Write Doc。 此工具可帮助我开展业务，而不会被任何事情分散注意力。 即使计划将我正在研究的内容发布在Medium上，我也可以使用它（并且有出色的在线所见即所得编辑器）。 我认为自己是一位从事Web开发的资深人士，因此我习惯了等宽字体，并确保自己的手放在键盘上，而不用急于在键盘和鼠标之间穿梭。 无论如何，如果需要查看将CSS应用于其上的内容，则可以通过简单的组合键在查看和编辑模式之间进行切换。

▍9。 标准网页组件

在使用Web组件方面，我遵守W3C标准。 这些是影子DOM，用户元素，HTML <template>和ECMAScript模块。 这使我可以将所需的一切完全整合到我通过NPM分发的软件包中。 对我来说，所有这一切的最大优势是影子DOM提供的隔离级别。 这使我们摆脱了污染命名空间的CSS诅咒。

▍10。 客户端脚本的JavaScript

要编写客户端脚本，我使用模块化的面向对象的JavaScript代码。 仅当它们的支持出现在最新的浏览器版本中时，我才应用ECMAScript标准的新功能。 也就是说，当我在caniuse.com上看到所有主要浏览器都“变绿”时，我便将它们包含在我的军械库中。 我避免使用polyfill。

▍11。 CSS样式

CSS是字体和页面布局。 排版从正确的字体选择开始。 对我来说，最重要的是文本的可读性。 最近，我将在我自己的服务器上托管使用的字体文件作为规则。 这样可以保护我的资源，避免由于某些第三方服务的带宽有限而造成阻塞的可能性。 例如，我大致使用以下构造：

 <link href='/fonts/source-serif-pro-400-latin.woff2' rel=preload as=font crossorigin /> 

这种方法的另一个优点是，它完全使我摆脱了称为FOUT的问题-（无样式文本的闪烁，常规字体的闪烁）。

▍12。 使用GIMP和InkScape准备图形资源

最后，为了准备图形资源，我使用了一些编辑器。 我使用GIMP准备位图PNG图像，并使用InkScape准备矢量SVG材质。

失去了原有魅力的技术

我以前真正喜欢的一些工具，以及我只是短暂喜欢的一些工具，不再包含在我的Web技术堆栈中。

• Adobe Photoshop和Illustrator。 这是两年来满足我所有图形需求的两个出色应用程序。 我可悲地对他们说“再见”，并感谢他们与我在一起。 现在我需要的是他们的免费开源替代品。
• jQuery的 当跨浏览器兼容性之战结束时，该库就变得不必要了。 对我来说，最有价值的jQuery功能是选择器语法。 事实证明，它的需求如此之大，以至于在2009年将它作为querySelector添加到DOM中。
• AJAX。 Web 2.0的前身。 现在变成了过去的遗物。 XMLHttpRequest API被现代且更简单的fetch XMLHttpRequest API所取代，而JSON则取代了XML。
• SASS / SCSS。 我承认编写没有变量的CSS代码效率低下；因此，许多人喜欢SASS。 模块也是一个非常重要的功能。 但是最后，为了在JavaScript中使用所有这些功能，您必须花费过多的时间和精力。 同时，随着使用样式的辅助工具的发展，CSS标准也没有停滞不前。 结果，用于转换CSS代码的各种工具逐渐成为历史。
• BEM。 CSS类名称的形成中使用的BEM实体命名方案（块，元素，修饰符）解决了全局命名空间问题。 但是您必须使用非常长的设计来支付费用。 我切换到语义元素中的父/子选择器，而倾向于使用更简单的标识符和类名方法。
  
  例如：
  
  

   header > ul > li {   ... } nav > ul > li {   ... } footer > ul > li {   ... } 

• 字体格鲁吉亚和Verdana。 多年以来，这两种字体一直是我字体评级中的佼佼者。 我可以依靠它们的可访问性和可读性。 但是在出现@font-face规则之后，并且在开源字体开始流行之后，我开始使用类似的字体。
• Babel，Grunt，Gulp，Browserify，WebPack。 此列表中的前四个项目不太可能使任何人感到惊讶。 但是为什么我的webpack离开Webpack？ 这个捆绑软件对我失去了联系，这一事实有一些原因，我将在下面详细介绍：
  
  
  1. 在HTTP / 2支持持久连接和流多路复用之前，我们依赖于这些工具的功能来构建应用程序资源包。 但是在HTTP / 2的世界里，捆绑并不能给我们任何东西。
  2. ECMAScript 2015标准是JavaScript开发中的一个新词，每个人在看到日光的那一刻都急于使用该语言的新功能。 但是，有一个问题。 浏览器不支持使用新功能编写的代码。 因此，必须将其转换为ECMAScript 5代码。 在这项业务中，我们依赖Babel，其应用程序是准备要发布的Web项目的标准步骤。 今天，我需要的所有新语言功能几乎随处可用。 结果，我不再需要Babel。
  3. 在浏览器中动态导入模块之前，必须将代码转换为CommonJS格式。 现在，大多数主流浏览器都支持<script type='module'> （并且Edge 76+很快就会上线）。 结果，很快我们就可以向ECMAScript模块打个招呼，并与其他所有设备道别。
• JSX。 我不理解那些相信JSX很好的人。 对我来说，“但是你已经习惯了”，而不是争论。
• 功能编程。 我将代码中的函数式编程的使用限制为简单的单行构造，例如numbers.sort((a, b) => a - b); 。 对于其他所有内容，我都使用面向对象的编程。

最受欢迎的技术

这是我印象深刻的技术堆栈级别的概述：

• JavaScript模块。 模块已经在服务器端JavaScript代码中证明了自己。 我非常高兴我终于可以在客户端使用它们了。
• 面向对象的JavaScript 以下是面向对象的JavaScript开发的五个黄金法则：
  
  
  1. 用命名类替换匿名对象。
  2. 声明并初始化构造函数中对象的所有属性。
  3. 创建后立即保护对象免受更改。
  4. 声明具有不变签名的方法。
  5. this绑定到每个回调。
• 蓝色短语 该系统允许我在创建模板和准备各种材料时使用声明性方法。 它使编写高质量的HTML代码成为一种纯粹的乐趣。

总结

以前，Web技术堆栈可能只包含四个元素。 但是在现代条件下，您将不会感到惊讶，拥有十二个级别的堆栈。 我不想看起来像一个表达众所周知的事实的人，但是尽管如此，完成本材料后，我会说每个开发人员都可以拥有自己的堆栈。 对于我而言，了解别人将其称为“ 2020年理想的网络技术堆栈”的工作将非常有趣。

亲爱的读者们！ 而您-2020年的网络技术堆栈是什么？

译者的免责声明：蓝色短语，读写服务和读写文档-本文作者开发的技术。 下载和安装风险自负。