无后端(noBackend):前端优先的Web开发

简介: 每个应用都由两样东西构成:该应用独有的功能和所有应用共有的功能,比方说用户注册、登录、忘记密码等。而从用户的角度出发,那些独有的功能归结起来就是用户界面以及系统的行为模式。而在视觉表象之后的功能,用户并不关心,他们只期望系统能按预期运行就可以了。

每个应用都由两样东西构成:该应用独有的功能和所有应用共有的功能,比方说用户注册、登录、忘记密码等。而从用户的角度出发,那些独有的功能归结起来就是用户界面以及系统的行为模式。而在视觉表象之后的功能,用户并不关心,他们只期望系统能按预期运行就可以了。


前端和后端有各自的侧重点,因此往往也需要不同的技能,由不同的开发人员来负责完成。无后端(noBackend)的开发原则能够进一步解偶这些不同的侧重点,这样两边的开发人员可以更加专注于各自真正热衷的工作。

image.png


一个简单的例子

后端经常需要提供API给前端,以下是一个简单的例子,使用API进行用户登录。

POST /session

{"email":"joe@example.com", "password": "secret"  }

前端的开发人员需要负责发送上述请求并对结果进行响应,还要考虑到一些极端的情况,如失去连接或不可预知的服务器错误等。与此相反的是,无后端的设计原则则建议由前端开发人员来定义API,用前端的代码来描述后端的功能,举例如下:

signIn( 'joe@example.com', 'secret'  )

.then( showDashboard  )

.fail( showError  )

我们称此为梦幻代码(Dreamcode),因为这些代码经常是在真正的代码可运行以前就已经写好了。初一看,这样并没有多大意义,只不过是改成了发送AJAX请求并调用相应的回调函数而已,但是以这样的方式定义的API在许多方面都会更加强大:


1. 灵活

用户如果想要登录,那么他们也就只关心登录这个行为本身,而绝不会去关心:

  • 请求是否是送到应用的服务器还是一个中央的验证服务器
  • 是一个HTTP的POST请求还是PUT请求。
  • 是否是通过websocket发送的
  • 验证使用的cookies还是使用session ID或者是自定义的header
  • 应用是否会在前一个请求时后再次发送请求

signIn这个方法的实现可以进行调整以反映后端的变化,但是就这个API本身,前端开发人员并不需要去修改了。


2. 简洁

从前端开发人员的角度来看,实现signIn方法要简单的多,代码量也可以少很多;而从后端开发人员的角度来看,尽管刚开始要投入更多的精力,但是和 RESTful API相比,前面的API要更容易定义,文档化和测试。


3. 前端驱动

前端开发人员可以引领构建应用的整个设计流程。以Dreadcode的方式来描述后端的功能,可以让开发人员更加专注于用户体验,从而避免了由于讨论具体的实现细节而有所分心,也不会由于要等待后端API的实现而拖延项目的进度。


一个更加复杂的例子

当你研究一个更复杂的例子以后,前优势会显得更加明显。假设你想要发送一封邮件,要附上当前页的PDF。

sendEmail({

 subject:"Hello, World!",

 text:"This mail has been sent from the frontend",

 html:"This mail has been sent from the frontend",

 to:"joe@example.com",

 attachments: [

     convert( document.body  ).to("report.pdf"),

 ]

})

要让这段代码跑起来,并且要让它不受垃圾邮件的影响,可能会相当困难。但是至少可以马上写一些quick和dirty的实现,然后再一点一点地改进,而在这个过程中无需改变API。这里的关键点在于,前端开发人员可以把这看成是一个已有的功能,从而可以专注于用户体验,而不需要去关心后台开发人员到目前为止究竟有多么复杂地实现了这个功能。


现有的一些 noBackend 的解决方案

一个nobackend的解决方案应该提供一个前端的API来处理一些通用的后端任务,至少应该包括用户验证、数据持久化和同步等。以下是一些可以关注的方案:

也可以参考下:unhosted。以上这个列表中,绝大多数都是托管服务,对于想要用自己的服务器来托管的同学,可以选择开源的deployd。


相关文章
|
3月前
|
并行计算 前端开发 JavaScript
Web Worker:让前端飞起来的隐形引擎
在现代 Web 开发中,前端性能优化是一个至关重要的课题,尤其是对于计算密集型的应用,如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈,导致应用变得迟缓。Web Worker,作为一种强大的技术,使得前端能够在后台进行并行计算,从而实现高效的任务处理,不影响主线程的运行和用户的交互体验。
373 108
|
28天前
|
算法 Java Go
【GoGin】(1)上手Go Gin 基于Go语言开发的Web框架,本文介绍了各种路由的配置信息;包含各场景下请求参数的基本传入接收
gin 框架中采用的路优酷是基于httprouter做的是一个高性能的 HTTP 请求路由器,适用于 Go 语言。它的设计目标是提供高效的路由匹配和低内存占用,特别适合需要高性能和简单路由的应用场景。
143 4
|
3月前
|
JavaScript 前端开发 Java
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
413 72
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
|
5月前
|
缓存 JavaScript 前端开发
鸿蒙5开发宝藏案例分享---Web开发优化案例分享
本文深入解读鸿蒙官方文档中的 `ArkWeb` 性能优化技巧,从预启动进程到预渲染,涵盖预下载、预连接、预取POST等八大优化策略。通过代码示例详解如何提升Web页面加载速度,助你打造流畅的HarmonyOS应用体验。内容实用,按需选用,让H5页面快到飞起!
|
5月前
|
JavaScript 前端开发 API
鸿蒙5开发宝藏案例分享---Web加载时延优化解析
本文深入解析了鸿蒙开发中Web加载完成时延的优化技巧,结合官方案例与实际代码,助你提升性能。核心内容包括:使用DevEco Profiler和DevTools定位瓶颈、四大优化方向(资源合并、接口预取、图片懒加载、任务拆解)及高频手段总结。同时提供性能优化黄金准则,如首屏资源控制在300KB内、关键接口响应≤200ms等,帮助开发者实现丝般流畅体验。
|
前端开发 JavaScript Shell
鸿蒙5开发宝藏案例分享---Web页面内点击响应时延分析
本文为鸿蒙开发者整理了Web性能优化的实战案例解析,结合官方文档深度扩展。内容涵盖点击响应时延核心指标(≤100ms)、性能分析工具链(如DevTools时间线、ArkUI Trace抓取)以及高频优化场景,包括递归函数优化、网络请求阻塞解决方案和setTimeout滥用问题等。同时提供进阶技巧,如首帧加速、透明动画陷阱规避及Web组件初始化加速,并通过优化前后Trace对比展示成果。最后总结了快速定位问题的方法与开发建议,助力开发者提升Web应用性能。
|
2月前
|
存储 前端开发 安全
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
158 5
|
5月前
|
JSON 开发框架 自然语言处理
【HarmonyOS Next之旅】基于ArkTS开发(三) -> 兼容JS的类Web开发(三)
本文主要介绍了应用开发中的三大核心内容:生命周期管理、资源限定与访问以及多语言支持。在生命周期部分,详细说明了应用和页面的生命周期函数及其触发时机,帮助开发者更好地掌控应用状态变化。资源限定与访问章节,则聚焦于资源限定词的定义、命名规则及匹配逻辑,并阐述了如何通过 `$r` 引用 JS 模块内的资源。最后,多语言支持部分讲解了如何通过 JSON 文件定义多语言资源,使用 `$t` 和 `$tc` 方法实现简单格式化与单复数格式化,为全球化应用提供便利。
233 104
|
5月前
|
JavaScript 前端开发 API
【HarmonyOS Next之旅】基于ArkTS开发(三) -> 兼容JS的类Web开发(二)
本文介绍了HarmonyOS应用开发中的HML、CSS和JS语法。HML作为标记语言,支持数据绑定、事件处理、列表渲染等功能;CSS用于样式定义,涵盖尺寸单位、样式导入、选择器及伪类等特性;JS实现业务逻辑,包括ES6语法支持、对象属性、数据方法及事件处理。通过具体代码示例,详细解析了页面构建与交互的实现方式,为开发者提供全面的技术指导。
248 104
|
4月前
|
人工智能 Java API
后端开发必看:零代码实现存量服务改造成MCP服务
本文介绍如何通过 **Nacos** 和 **Higress** 实现存量 Spring Boot 服务的零代码改造,使其支持 MCP 协议,供 AI Agent 调用。全程无需修改业务代码,仅通过配置完成服务注册、协议转换与工具映射,显著降低改造成本,提升服务的可集成性与智能化能力。
1066 1

热门文章

最新文章

  • 1
    前端如何禁止用户打开 F12 开发者工具
    223
  • 2
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    280
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    76
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    122
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    105
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    198
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    200
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    102
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    57
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    98