当前位置: 首页 > news >正文

您可能并不需要单页应用程序

前端框架的迅速崛起,如React、Angel、Vue.js、Elm等,使得单页面应用程序(Single Page Application)在网络上无处不在。对于许多开发人员来说,这些已经成为他们“默认”工具集的一部分。当他们开始一个新项目时,他们会使用他们已经知道的工具:后端的REST API和Reaction/Angel/Vue/Elm前端。
这些工具有什么问题吗?绝对不是。事实上,我喜欢使用这些工具。然而,只有当实际需求将我推向那个方向时,我才会选择这个架构。如果没有特定的理由构建单页面应用程序,我每天都会使用传统的服务器呈现的体系结构。
它更简单,让您可以更快地操作:

  • 无状态请求
    传统的web服务器是无状态的。这意味着每个端点都可以独立地进行推理和测试。相比之下,单页面应用程序必须明确定义整个会话期间前端如何加载、刷新和丢弃所有状态。这引入了新的缓存/同步问题,这些问题在服务器渲染的世界中是不存在的。

  • 浏览器知道如何处理传统架构
    如果你选择单页面应用程序路线,你总是需要额外的代码来模拟简单的浏览器功能。我花了很多时间来确保正确管理浏览器历史记录,加载动画看起来平滑,当用户浏览历史记录时恢复滚动位置等。真是一团糟。

  • 更少、更成熟的工具
    Rails、Phoenix、Lavarel等框架已经存在一段时间了,它们非常稳定。我大约在5年前学习了Rails,我的知识现在仍然很有用。与此同时,我还学习了Gulp、CoffeeScript、BackboneJS和SASS,这些都已经被新的工具取代了。避免Javascript疲劳不要过度依赖Javascript!

  • 免费搜索引擎优化
    单页面应用程序必须添加额外的基础设施和代码,以确保它们可以被爬虫程序索引。如果您的动态页面上需要SEO,则使用服务器呈现的体系结构更容易实现。

所有这些都意味着单页应用程序给开发人员带来了更多的复杂性和认知负担。以我作为开发人员的经验来看,复杂性和认知负荷是导致软件bug和开发速度减慢的最大因素。

何时使用单页应用程序?

正如我所说,大多数情况下的默认选择应该是传统的服务器渲染的应用程序。然而,有些需求可能会强制你选择单页应用架构:

  • 核心功能是实时的(例如Slack)
  • 丰富的UI交互是产品的核心(例如Trello)
  • 屏幕之间共享的大量状态(例如Spotify)

这些产品必须使用单页架构才能正常工作。这就是为什么它是这些公司的正确选择。然而,许多基于Web的产品没有这些要求,这种复杂性是可以避免的。

混合解决方案

即使你的应用程序需要一些实时功能或丰富的交互,你也不需要在整个应用程序中使用SPA范式。一个很好的方法是将小型前端应用程序嵌入到传统架构中。

Github使用这种混合方法。他们网站的主干是一个传统的Rails应用程序,但有些地方,如projects选项卡,是作为嵌入式前端应用程序构建的。这是一个完美的解决方案,结合了两者的优点。最棒的是,你可以从简单的开始使用这种方法,然后逐渐添加更复杂的UI交互。

我还决定在我当前的项目貌似有理的分析中使用混合方法。它是我一直在研究的谷歌分析的一个以隐私为重点的替代方案。大部分应用程序都是在服务器端渲染的。但是,我希望主仪表板(demo)具有非常丰富的UI,具有动画和刷新数据,而无需重新加载整个页面。当你打开页面时,前端路由会接管一切,所有内容都在React中渲染。

这一切归根结底是权衡

与编程中的所有事情一样,SPA与传统架构之间的困境没有唯一的答案。有些情况下使用SPA是有意义的,因为你需要一个时髦的实时UI。然而,我们应该认识到,这是以牺牲开发速度为代价的。如果单页应用不是必需的,我们可以通过传统的方法来避免额外的复杂性并更快地迁移。

为工作选择正确的架构会对生产力和最终的成功产生巨大的影响。我们的目标应该是在我们的工具箱中有两种架构,这样我们就可以在每种情况下使用最优解决方案。

相关文章:

您可能并不需要单页应用程序

前端框架的迅速崛起,如React、Angel、Vue.js、Elm等,使得单页面应用程序(Single Page Application)在网络上无处不在。对于许多开发人员来说,这些已经成为他们“默认”工具集的一部分。当他们开始一个新项目时&#xf…...

基于低代码和数字孪生技术的电力运维平台设计

电力能源服务商在为用能企业提供线上服务的时候,不可避免要面对用能企业的各种个性化需求。如果这些需求和想法都要靠平台厂家研发人员来实现,那在周期、成本、效果上都将是无法满足服务运营需要的,这也是目前很多线上能源云平台应用效果不理…...

【Github】SourceTree技巧汇总

sourceTree登录github账户 会跳转到浏览器端 按照Git Flow 初始化仓库分支 克隆远程仓库到本地 推送变更到远程仓库 合并分支 可以看到目前的本地分支(main、iOS_JS)和远程分支(origin/main、origin/HEAD、origin/iOS_JS)目前所处…...

人工智能轨道交通行业周刊-第55期(2023.8.7-8.13)

本期关键词:北京智慧交通规划、成都数智化规划、关门车、集装箱标志、大模型隐私、视觉大模型 1 整理涉及公众号名单 1.1 行业类 RT轨道交通人民铁道世界轨道交通资讯网铁路信号技术交流北京铁路轨道交通网上榜铁路视点ITS World轨道交通联盟VSTR铁路与城市轨道交…...

向量数据库 Milvus Cloud Partition Key:租户数量多,单个租户数据少的三种解决方案

三种解决方案 这个问题提出的时候,Milvus 的最新版本是 2.2.8,我们做个角色互换,在当时站在这个用户的角度,留在我们面前的选择有这么几个: 为每个租户创建一个 collection 为每个租户创建一个 partition 创建一个租户名称的标量字段 接下来,我们依次分析下这三种方案的可…...

文本三剑客之grep命令和awk命令 1.0 版本

grep awk 1.grep命令1.1 基本格式1.2 常用选项 2.awk命令2.1 awk工作原理2.2 awk命令格式2.3 awk常用内置变量 1.grep命令 1.1 基本格式 grep [选项]… 查找条件 目标文件1.2 常用选项 选项功能 -m [ x ]匹配x次 后停止,x为具体数字-v取反 -i忽略字符大小写 -n显示匹配的 …...

【软件测试】Linux环境Ant调用Jmeter脚本并且生成测试报告(详细)

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 准备工作 需要在…...

MySQL的YEAR函数

MySQL的YEAR函数用于提取日期或日期时间值的年份部分。 语法: YEAR(date)参数: date:要提取年份的日期或日期时间值。 示例: SELECT YEAR(2023-08-09); -- 返回 2023SELECT YEAR(2023-08-09 14:16:20); -- 返回 2023注意事项…...

208、仿真-51单片机脉搏心率与心电报警Proteus仿真设计(程序+Proteus仿真+配套资料等)

毕设帮助、开题指导、技术解答(有偿)见文未 目录 一、硬件设计 二、设计功能 三、Proteus仿真图 四、程序源码 资料包括: 需要完整的资料可以点击下面的名片加下我,找我要资源压缩包的百度网盘下载地址及提取码。 方案选择 单片机的选择 方案一&a…...

787. 归并排序

文章目录 QuestionIdeasCode Question 给定你一个长度为 n 的整数数列。 请你使用归并排序对这个数列按照从小到大进行排序。 并将排好序的数列按顺序输出。 输入格式 输入共两行,第一行包含整数 n 。 第二行包含 n 个整数(所有整数均在 1∼109 范围…...

【马蹄集】第二十二周——进位制与字符串专题

进位制与字符串专题 目录 MT2179 01操作MT2182 新十六进制MT2172 萨卡兹人MT2173 回文串等级MT2175 五彩斑斓的串 MT2179 01操作 难度:黄金    时间限制:1秒    占用内存:128M 题目描述 刚学二进制的小码哥对加减乘除还不熟,他…...

【Spring Cloud +Vue+UniApp】智慧建筑工地平台源码

智慧工地源码 、智慧工地云平台源码、 智慧建筑源码支持私有化部署,提供SaaS硬件设备运维全套服务。 前言:互联网建筑工地,是将互联网的理念和技术引入建筑工地,从施工现场源头抓起,最大程度的收集人员、安全、环境、材…...

使用一个python脚本抓取大量网站【2/3】

一、说明 我如何使用一个 Python 脚本抓取大量网站,在第 2 部分使用 Docker ,“我如何使用一个python脚本抓取大量网站”统计数据。在本文中,我将与您分享: Github存储库,您可以从中克隆它;链接到 docker 容器&#xf…...

黑马项目一完结后阶段面试45题 JavaSE基础部分20题(二)

十一、集合体系结构和特点 Collection └ List 有索引,存取一致,有序,元素允许重复 ┃ └ ArrayLIst ┃ └ LinkedList ┃ └ Vector └ Set 无索引,无序,元素不允许重复 └ HashSet └ TreeSet └ Linke…...

防御第九次作业

一、根据以下问题总结当天内容 1. SSL工作过程是什么? 当客户端向一个 https 网站发起请求时,服务器会将 SSL 证书发送给客户端进行校验,SSL 证书中包含一个公钥。校验成功后,客户端会生成一个随机串,并使用受访网站的…...

Java刷题——代码随想录Day1

代码随想录Day1 数组 二分查找 力扣704.二分查找 二分查找有几个最重要的特点: 对于需要用到”二分查找“的数组来说(即用二分查找来找到确切的某一个元素),这个数组中的元素不能重复; 被操作的数组一定要是有序的…...

android,Compose,消息列表和动画(点击item的时候,就会删除)

Compose,消息列表和动画(点击item的时候,就会删除) package com.example.mycompose08import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.foundat…...

go-admin 使用开发

在项目中使用redis 作为数据缓存:首先引入该包 “github.com/go-redis/redis/v8” client : redis.NewClient(&redis.Options{Addr: config.QueueConfig.Redis.Addr, // Redis 服务器地址Password: config.QueueConfig.Redis.Password, // Redis 密码&…...

力扣的板子

板子 线性筛法求质因子的板子快速幂 线性筛法求质因子的板子 int limit 100000; //修改为题目中的数字的上限 bool isprime[100005] {0}; //保存所有1~limit中的数字是不是质数 int myprime[100005] {0}; //保存2~limit中所有数字的最小质因子 int primes[100000] {0}; …...

基于Matlab实现路径规划算法(附上15个完整仿真源码)

路径规划是机器人技术中非常重要的一项任务,它涉及到机器人在复杂环境中的自主移动和避障能力。在本文中,我们将介绍利用多种算法实现路径规划的Matlab程序,包括模拟退火算法、RRT算法、PRM算法、聚类算法、potential算法、GA算法、fuzzy算法…...

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向: 逆向设计 通过神经网络快速预测微纳结构的光学响应,替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

golang循环变量捕获问题​​

在 Go 语言中,当在循环中启动协程(goroutine)时,如果在协程闭包中直接引用循环变量,可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下: 问题背景 看这个代码片段: fo…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了,要么要会员、要么写的乱七八糟。这里我整理一下,把问题说清楚并且给出代码,拿去用就行,照着葫芦画瓢。 问题 在继承QWebEngineView后,重写mousePressEvent或event函数无法捕获鼠标按下事…...

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体(对象或容器)QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质(定义颜色、反光等)QFirstPersonC…...

高防服务器价格高原因分析

高防服务器的价格较高,主要是由于其特殊的防御机制、硬件配置、运营维护等多方面的综合成本。以下从技术、资源和服务三个维度详细解析高防服务器昂贵的原因: 一、硬件与技术投入 大带宽需求 DDoS攻击通过占用大量带宽资源瘫痪目标服务器,因此…...

CVE-2023-25194源码分析与漏洞复现(Kafka JNDI注入)

漏洞概述 漏洞名称:Apache Kafka Connect JNDI注入导致的远程代码执行漏洞 CVE编号:CVE-2023-25194 CVSS评分:8.8 影响版本:Apache Kafka 2.3.0 - 3.3.2 修复版本:≥ 3.4.0 漏洞类型:反序列化导致的远程代…...

使用python进行图像处理—图像滤波(5)

图像滤波是图像处理中最基本和最重要的操作之一。它的目的是在空间域上修改图像的像素值,以达到平滑(去噪)、锐化、边缘检测等效果。滤波通常通过卷积操作实现。 5.1卷积(Convolution)原理 卷积是滤波的核心。它是一种数学运算,…...

Linux 内存管理调试分析:ftrace、perf、crash 的系统化使用

Linux 内存管理调试分析:ftrace、perf、crash 的系统化使用 Linux 内核内存管理是构成整个内核性能和系统稳定性的基础,但这一子系统结构复杂,常常有设置失败、性能展示不良、OOM 杀进程等问题。要分析这些问题,需要一套工具化、…...

PLC入门【4】基本指令2(SET RST)

04 基本指令2 PLC编程第四课基本指令(2) 1、运用上接课所学的基本指令完成个简单的实例编程。 2、学习SET--置位指令 3、RST--复位指令 打开软件(FX-TRN-BEG-C),从 文件 - 主画面,“B: 让我们学习基本的”- “B-3.控制优先程序”。 点击“梯形图编辑”…...

Web APIS Day01

1.声明变量const优先 那为什么一开始前面就不能用const呢,接下来看几个例子: 下面这张为什么可以用const呢?因为复杂数据的引用地址没变,数组还是数组,只是添加了个元素,本质没变,所以可以用con…...