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

前端和后端有各自的侧重点,因此往往也需要不同的技能,由不同的开发人员来负责完成。无后端(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来处理一些通用的后端任务,至少应该包括用户验证、数据持久化和同步等。以下是一些可以关注的方案:

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

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

【转】无后端(nobackend):前端优先的Web开发【译】的更多相关文章

  1. 前端文摘:Web 开发模式演变历史和趋势

    今天的<前端文摘>给大家分享一篇玉伯的文章.文章详细介绍了 Web 开发的四种常用模式以及未来可能成为流行趋势的 Node 全栈开发模式,相信你看了以后一定会有收获. 您可能感兴趣的相关文 ...

  2. 【前端技术】web 开发常见问题--GET POST 区别

    web 开发常见问题--GET POST 区别   首先,get和post是什么? --两种 HTTP 请求方法:GET 和 POST HTTP Request Methods GET.POST 专业 ...

  3. 前端项目优化 -Web 开发常用优化方案、Vue & React 项目优化

    github github-myBlob 从输入URL到页面加载完成的整个过程 首先做 DNS 查询,如果这一步做了智能 DNS 解析的话,会提供访问速度最快的 IP 地址回来 接下来是 TCP 握手 ...

  4. Web 开发模式演变历史和趋势

    前不久徐飞写了一篇很好的文章:Web 应用的组件化开发.本文尝试从历史发展角度,说说各种研发模式的优劣. 一.简单明快的早期时代 可称之为 Web 1.0 时代,非常适合创业型小项目,不分前后端,经常 ...

  5. [转] Web 开发模式演变历史和趋势

    文章转自梦想天空--前端文摘:Web 开发模式演变历史和趋势 一.简单明快的早期时代 可称之为 Web 1.0 时代,非常适合创业型小项目,不分前后端,经常 3-5 人搞定所有开发.页面由 JSP.P ...

  6. 在web开发中,为什么前端比后端更得到转行程序员的青睐?必看!

    1.Web开发分类与区别 人们通常将Web分为前端和后端,前端相关的职位有前端设计师(UI/UE),前端开发工程师,后端相关的有后端开发工程师. 2.技术栈区别 看各大招聘网站上,公司对前端开发工程师 ...

  7. 要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放

    要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放 大师主讲 经验难得 由逐浪CMS首席架构师发哥老师,亲自主理讲解. 历时一年精心打造, 汇聚了互联网诞生 ...

  8. 移动端 Web 开发前端知识整理

    文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...

  9. 关于web开发前端h5框架的选择

    关于web开发前端h5框架的选择 看了很多移动版框架都是基于app混合式开发的,不是单独h5网站的基于h5开发的web框架从组件丰富度,兼容性,相关教程来说bootstrap还是最好的react和vu ...

随机推荐

  1. Vue 点击波浪特效指令

  2. php使用CURL不依赖COOKIEJAR获取COOKIE的方法

    本文实例讲述了php使用CURL不依赖COOKIEJAR获取COOKIE的方法.分享给大家供大家参考.具体分析如下: PHP中CURL类是一个非常牛逼的工具类,具体怎么牛逼就不啰嗦了. 对于COOKI ...

  3. 是时候用PerconaDB替换MySQL了

    Percona数据库服务器是MySQL的增强版,替代MySQL并不复杂. 一.PerconaDB的特性 1)查询速度更快,数据的一致性更好 2)服务器运行及其稳定 3)可以延迟分片,或者避免分片 4) ...

  4. Logstash 报错 An unexpected error occurred! :error => bad URI(is not URI?,是因为路径c:\program files\logstash\logstash.bat 中有空格

    I am trying to run logstash under c:\program filesbut I get an error An unexpected error occurred! : ...

  5. Flume 相关

    在CentOS 7上安装配置Flume https://mos.meituan.com/library/41/how-to-install-flume-on-centos7/ Flume NG 学习笔 ...

  6. Nginx(七):keepalived实现Nginx负载均衡服务器的双机高可用

    前言 之前咱们通过 Nginx(六):Nginx HTTP负载均衡和反向代理的配置与优化 和 Nginx+tomcat组合实现高并发场景的动静分离和负载均衡方案 这两篇文章了解了Nginx对高并发应用 ...

  7. MySQL 5.6学习笔记(运算符)

    MySQL运算符包括四类:算术运算符.比较运算符.逻辑运算符和位运算符. 1. 算术运算符 用于种类数值运算.包括:加(+).减(-).乘(*).除(/).取余(%). 除法除数为零时,执行结果为nu ...

  8. [转]:Android 5.0的调度作业JobScheduler

    参考:http://blog.csdn.net/cuiran/article/details/42805057 增加 JobScheduler 的同时,去掉了几个广播, CONNECTIVITY_AC ...

  9. android 自己定义视频播放器之2/1

    非常久没更新博客,相信大家年后都比較忙. 今天给大家带来了一款视频播放器,首先确认的得有几点. 1.首先得有个播放视频的view. 2.加点额外功能进去左边上下滑动调节亮度,右边上下滑动调节声量: 3 ...

  10. ASP.NET Core2.0 环境下MVC模式的支付宝PC网站支付接口-沙箱环境开发测试

    1.新建.NET Core web项目 2.Controllers-Models-Views 分三个大部分 3.下载安装最新sdk 官方的SDK以及Demo都还是.NET Framework的,根据官 ...