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

前端和后端有各自的侧重点,因此往往也需要不同的技能,由不同的开发人员来负责完成。无后端(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. HMM条件下的 前向算法 和 维特比解码

    一.隐马尔科夫HMM如果: 有且仅仅有3种天气:0晴天.1阴天.2雨天 各种天气间的隔天转化概率mp: mp[3][3] 晴天 阴天 雨天 晴天 0.33333 0.33333 0.33333 阴天 ...

  2. 【蓝桥杯】PREV-21 回文数字

    题目链接:http://lx.lanqiao.org/problem.page? gpid=T113   历届试题 回文数字   时间限制:1.0s   内存限制:256.0MB      问题描写叙 ...

  3. Linux查看文件夹占用空间

    du -sh *   查看当前目录所有文件的各个大小/home/econf>du -sh *427M apache-tomcat-6.0.2016K bin44M boot6.7M filese ...

  4. Python 爬虫实例(14) 爬取 百度音乐

    #-*-coding:utf-8-*- from common.contest import * import urllib def spider(): song_types = ['新歌','热歌' ...

  5. Python 爬虫编码格式问题 gb2312转换utf8

    遇到的问题是:爬取网页得到的结果如下(部分)  里面的中文出现乱码. <!DOCTYPE html> <html lang='zh-CN'> <head> < ...

  6. update关联其他表批量更新数据-跨数据库-跨服务器Update时关联表条件更新

    1.有时在做项目时会有些期初数据更新,从老系统更新到新系统.如果用程序循环从老系统付给新系统. 2.有时在项目中需要同步程序,或者自动同步程序时会有大量数据更新就可能用到如下方法了. 3.为了做分析, ...

  7. js关闭当前页面和给子页面的对象赋值

    代码如下: function saveData(){ //给父页面的对象赋值 frameElement.api.opener.document.getElementById("userNam ...

  8. Android USB配件模式

    原文:http://android.eoe.cn/topic/android_sdk USB配件模式允许用户连接那些专门搭载Android设备的USB主机硬件.这些配件必须遵守Android配件开发工 ...

  9. java二维数组遍历

    数组名加上length(arr.length),表示该数组的行数(Row): 指定索引加上length(arr[x].length),表示该行的元素个数,即该行的列数(Column). public  ...

  10. [AWS vs Azure] 云计算里AWS和Azure的探究(1)

    转自:http://www.cnblogs.com/hotcan/archive/2013/01/31/2886794.html 云计算里AWS和Azure的探究(1) 全球领先的云的计算平台主要有两 ...