【转】无后端(nobackend):前端优先的Web开发【译】

2023-11-10 11:21

本文主要是介绍【转】无后端(nobackend):前端优先的Web开发【译】,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

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

一个简单的例子

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

1
2
POST /session
{ "email":"joe@example.com", "password": "secret" } 

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

1
2
3
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。

1
2
3
4
5
6 7 8 9 
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来处理一些通用的后端任务,至少应该包括用户验证、数据持久化和同步等。以下是一些可以关注的方案:

  • Backendless
  • deployd
  • Firebase
  • Hoodie
  • Kinvey
  • Parse
  • remoteStorage
  • Sockethub

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

原文:http://nobackend.org/2013/05/welcome-to-noBackend.html

转载于:https://www.cnblogs.com/terrylin/p/4694724.html

这篇关于【转】无后端(nobackend):前端优先的Web开发【译】的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/382346

相关文章

VSCode开发中有哪些好用的插件和快捷键

《VSCode开发中有哪些好用的插件和快捷键》作为全球最受欢迎的编程工具,VSCode的快捷键体系是提升开发效率的核心密码,:本文主要介绍VSCode开发中有哪些好用的插件和快捷键的相关资料,文中... 目录前言1、vscode插件1.1 Live-server1.2 Auto Rename Tag1.3

HTML5的input标签的`type`属性值详解和代码示例

《HTML5的input标签的`type`属性值详解和代码示例》HTML5的`input`标签提供了多种`type`属性值,用于创建不同类型的输入控件,满足用户输入的多样化需求,从文本输入、密码输入、... 目录一、引言二、文本类输入类型2.1 text2.2 password2.3 textarea(严格

Agent开发核心技术解析以及现代Agent架构设计

《Agent开发核心技术解析以及现代Agent架构设计》在人工智能领域,Agent并非一个全新的概念,但在大模型时代,它被赋予了全新的生命力,简单来说,Agent是一个能够自主感知环境、理解任务、制定... 目录一、回归本源:到底什么是Agent?二、核心链路拆解:Agent的"大脑"与"四肢"1. 规划模

JavaWeb项目创建、部署、连接数据库保姆级教程(tomcat)

《JavaWeb项目创建、部署、连接数据库保姆级教程(tomcat)》:本文主要介绍如何在IntelliJIDEA2020.1中创建和部署一个JavaWeb项目,包括创建项目、配置Tomcat服务... 目录简介:一、创建项目二、tomcat部署1、将tomcat解压在一个自己找得到路径2、在idea中添加

SpringBoot返回文件让前端下载的几种方式

《SpringBoot返回文件让前端下载的几种方式》文章介绍了开发中文件下载的两种常见解决方案,并详细描述了通过后端进行下载的原理和步骤,包括一次性读取到内存和分块写入响应输出流两种方法,此外,还提供... 目录01 背景02 一次性读取到内存,通过响应输出流输出到前端02 将文件流通过循环写入到响应输出流

SpringBoot+Vue3整合SSE实现实时消息推送功能

《SpringBoot+Vue3整合SSE实现实时消息推送功能》在日常开发中,我们经常需要实现实时消息推送的功能,这篇文章将基于SpringBoot和Vue3来简单实现一个入门级的例子,下面小编就和大... 目录前言先大概介绍下SSE后端实现(SpringBoot)前端实现(vue3)1. 数据类型定义2.

JavaWeb 中的 Filter组件详解

《JavaWeb中的Filter组件详解》本文详细介绍了JavaWeb中的Filter组件,包括其基本概念、工作原理、核心接口和类、配置方式以及常见应用示例,Filter可以实现请求预处理、响应后... 目录JavaWeb 中的 Filter 详解1. Filter 基本概念1.1 什么是 Filter1.

Python+wxPython开发一个文件属性比对工具

《Python+wxPython开发一个文件属性比对工具》在日常的文件管理工作中,我们经常会遇到同一个文件存在多个版本,或者需要验证备份文件与源文件是否一致,下面我们就来看看如何使用wxPython模... 目录引言项目背景与需求应用场景核心需求运行结果技术选型程序设计界面布局核心功能模块关键代码解析文件大

C++多线程开发环境配置方法

《C++多线程开发环境配置方法》文章详细介绍了如何在Windows上安装MinGW-w64和VSCode,并配置环境变量和编译任务,使用VSCode创建一个C++多线程测试项目,并通过配置tasks.... 目录下载安装 MinGW-w64下载安装VS code创建测试项目配置编译任务创建 tasks.js

前端Visual Studio Code安装配置教程之下载、汉化、常用组件及基本操作

《前端VisualStudioCode安装配置教程之下载、汉化、常用组件及基本操作》VisualStudioCode是微软推出的一个强大的代码编辑器,功能强大,操作简单便捷,还有着良好的用户界面,... 目录一、Visual Studio Code下载二、汉化三、常用组件1、Auto Rename Tag2