解码网络开发的不断发展的景观
#javascript #网络开发人员 #编程 #fullstack

Web开发,尤其是Frontend,无疑是软件开发中最具挑战性的职业之一。它的景观在不断发展。工具和技术变得过时,并以惊人的速度取代了新工具。它也已成为一个广阔的领域,超出了HTML,CSS和JavaScript。回到十年后,您能想象使用解释的语言编写代码的前端开发人员需要在日常工作中弄乱各种编译工具吗?非常疯狂,不是吗?

,但罗马没有一天建造。让我们及时回去看看我们是如何逐步进入这里的。

“历史不能为我们提供一个未来的计划,但它可以使我们对自己和我们的人类有更深入的了解,以便我们可以更好地面对未来。” - 罗伯特Penn Warren

快乐文件服务器

Static Site

Web架构始于没有体系结构。最早的网站只是公开可访问的文件服务器,这些服务器了解HTTP请求并将HTML文件扔给客户端。

令许多人感到惊讶的是,此类网站仍然在附近,做得很好。例如,Craigslist看起来像是一种活化的化石 - 完全静态的内容,纯HTML文件,没有图像,没有设计;但是,它仍然在全球所有网站中排名第78。这证明了简单的力量。

Craigslist

,但并非每个企业都可以作为活化石来维持自己。在线公司拥有的数据很快变得太复杂了,无法作为普通文件管理。同时,用户对互联网上的被动参与不满意。他们想要互动。这两个因素引起了Web体系结构的第一个飞跃。

转向动态内容

Dynamic Site

有两个重大变化。一个是数据库开始参与其中 - 比静态文件更通用。第二个服务器开始运行一个程序来生成HTML文档,允许不同的客户端查看不同的内容。

从客户的角度来看,一切几乎相同。一个网页由一个HTML文档请求填充。用户导航或提交数据时,整个页面会刷新。门户网站和新闻网站是此类架构的好例子。他们持有和生成大量内容,并可以根据用户的个人资料提供量身定制的交付。他们还允许一些互动,但与现代网络应用相比很少。

这一切都很好,直到网站进行了如此多的互动,以至于不断令人耳目一新的页面变得令人烦恼。因此,网络架构的下一个飞跃是使互动更加流利。

水疗中心的崛起

SPA Architecture

您可以看到,无论是在客户端还是服务器方面,事情突然开始疯狂。这种并发症是有道理的,原因有几个:

  1. Web已成为一个健谈的双向通信频道。用户互动总是在发生,导致页面内容随之变化。它涉及许多动态数据交换以及对页面元素的快速操纵。

  2. 许多网站获得了大量的流量和数据,并且能够“扩展”已成为关键的话题。

技术的几个进步及时及时实现了:

  • 浏览器变得更加强大,尤其是在动态数据获取和DOM操作中。
  • 网络基础架构已经变得更加强大,更快,CDN现在是商品。
  • 服务器端虚拟化技术(Docker,Linux容器等)已经成熟。
  • UI组件框架的黎明 - 角,反应,vue。

与以前的体系结构不同,SPA(单页应用程序)是真正的应用程序在浏览器内运行。他们有自己的开发框架,分别部署,具有丰富的状态,并且可能像数百万的代码线一样复杂。 Microsoft Azure的门户声称是世界上最大的水疗中心,到2016年。

Azure Portal Code Count

SPA的工作方式也与以前的网站完全不同。前端应用程序捆绑到一些大型JavaScript文件中。浏览器从CDN加载它们,运行它们以从后端API获取数据,然后渲染UI。

这是前端开发人员的思想炸毁的时候,他们的工作开始崩溃。过去的美好时光不见了。突然有很多东西要学习,可以运行的工具以及要调试的问题。结果,前端开发的复杂性已达到新的水平。

混合时代

水疗中心很酷,但它们并非没有缺陷。这两个主要问题:

  • 尽管它们提供和出色的互动经验,但最初的加载时间可能会很慢。在渲染第一个有意义的内容之前,必须下载和执行整个应用程序。由于动态数据加载的瀑布,它们还倾向于显示旋转器。

  • 它们对SEO不利,因为服务器返回的不是HTML。即使在今天,搜索引擎爬网仍然无法处理大多数水疗站点。

如有疑问,请进化体系结构ð。

Hybrid Architecture

这个想法非常简单:让我们使用旧的静态文件服务器服务初始的HTML文档,然后让水疗中心接管其余部分。这样,初始加载时间大大减少了,并解决了SEO问题。

启用这种新范式的新事物是“元框架”,例如next.js,nuxt.js等。它们围绕UI组件框架,并将其转变为应用程序框架。他们响应HTTP请求并提供预先介绍的HTML。它们还提供了一种使Prerender静态页面并将其推入CDN的方法。

在这里发生了一项惊人的副作用:前端已经开始拥有自己的“后端”。我们应该称其为“ fronckend”或“中端”ð??尽管它的主要责任是随着时间的流逝,人们变得有创造力,并让它承担更多的责任。我们逐渐滑入Web体系结构的下一阶段。

无服务器是新的黑色

Serverless Idea

现在,我们正在最新的建筑发展迭代。老实说,我认为“无服务器”是一个糟糕的术语,因为它可能意味着很多事情,并且只会部分与这里发生的事情重叠,但是我无论如何都会使用它。

这一切都从一个愚蠢的问题开始:“由于我的前端现在有自己的闪亮后端,为什么我仍然需要一个单独的后端?”答案是你不。在许多情况下,元框架可以满足您的后端所有需求。

Serverless Architecture

一些重要的更改:

  • 单独的后端消失了。
  • 我们的前端后端在很大程度上被“边缘”取代。 Edge是全球部署的新型计算节点。它们就像CDN,但可以执行自定义代码,使其非常适合处理Web计算。
  • 存储是由新的“无服务器”数据库处理的,这些数据库与边缘的连接良好合作,分别托管。

新体系结构带来了两个改进:

  • 随着单独的后端消失,活动部件较少,并且该系统在开发,部署和操作方面要简单得多。
  • 由于计算发生在边缘上,因此服务器端页面渲染和动态数据加载速度要快得多,因为

费用?现在,您不仅需要采用元框架,而且还需要将应用程序部署到兼容的无服务器平台 - vercel,netlify,fly.io等。

体系结构的发展,责任转移

现在是时候让越来越多的前端开发人员自豪地称自己为全栈开发人员。
他们没有后端团队的界限,并且可以自主交付。但是,拥有巨大的力量带来了巨大的责任。成为全堆栈开发人员所需的内容远远超出了HTML/CSS/JavaScript。作为建筑的合并,职责也是如此:

Fullstack Responsibilities

是最好的时间还是最糟糕的时间?大概是两者。十年前,今天可以使用的工具和框架是无法想象的。同时,随着用户期望的增长和业务需求变得越来越复杂,全堆栈开发需要处理增殖所需的内在复杂性。社区越来越意识到事物的发展程度,并且已经开始系统地简化而不是解决问题。这就是为什么我们正在构建ZenStack来简化Web应用程序后端部分的构建,以便开发人员可以更好地专注于重要的内容 - 用户体验和业务价值。