当前位置: 首页 > 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算法…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段,极易成为DDoS攻击的目标。一旦遭遇攻击,可能导致服务器瘫痪、玩家流失,甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案,帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

YSYX学习记录(八)

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

解决:Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

Vue 模板语句的数据来源

&#x1f9e9; Vue 模板语句的数据来源&#xff1a;全方位解析 Vue 模板&#xff08;<template> 部分&#xff09;中的表达式、指令绑定&#xff08;如 v-bind, v-on&#xff09;和插值&#xff08;{{ }}&#xff09;都在一个特定的作用域内求值。这个作用域由当前 组件…...

十九、【用户管理与权限 - 篇一】后端基础:用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础:用户列表与角色模型的初步构建 前言准备工作第一部分:回顾 Django 内置的 `User` 模型第二部分:设计并创建 `Role` 和 `UserProfile` 模型第三部分:创建 Serializers第四部分:创建 ViewSets第五部分:注册 API 路由第六部分:后端初步测…...

算术操作符与类型转换:从基础到精通

目录 前言&#xff1a;从基础到实践——探索运算符与类型转换的奥秘 算术操作符超级详解 算术操作符&#xff1a;、-、*、/、% 赋值操作符&#xff1a;和复合赋值 单⽬操作符&#xff1a;、--、、- 前言&#xff1a;从基础到实践——探索运算符与类型转换的奥秘 在先前的文…...