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

前端和后端有各自的侧重点,因此往往也需要不同的技能,由不同的开发人员来负责完成。无后端(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. SharePoint 2013 安装 Service Pack 1

    Problem 当迁移SharePoint 的时候,执行Move-SPSite 命令,将指定的Site Collection移动到目标内容数据库中时,提示以下错误:Cannot complete th ...

  2. Python 文件 readlines() 方法

    概述 Python 文件 readlines() 方法用于读取整个文件(所有行)到一个列表,可以由for... in ... 结构进行遍历.列表的每一行变成列表的每一个元素. 语法 readlines ...

  3. Android数据库安全解决方案,使用SQLCipher

    源码:http://files.cnblogs.com/android100/SQLCipherTest.rar 我们都知道,Android系统内置了SQLite数据库,并且提供了一整套的API用于对 ...

  4. 精确光源(Punctual Light Sources)

    <Physically-Based Shading Models in Film and Game Production>(SIGGRAPH 2010 Course Notes) (地址: ...

  5. kail-linux下安装pycharm

    1.下载pycharm pycharm官网下载链接:https://www.jetbrains.com/pycharm/download/#section=linux 请注意下载对应系统的profes ...

  6. 什么是内联函数(inline function)

    In C, we have used Macro function an optimized technique used by compiler to reduce the execution ti ...

  7. Atitit 项目源码的架构,框架,配置与环境说明模板 规范 标准化

    Atitit 项目源码的架构,框架,配置与环境说明模板  规范 标准化 版本1.0 作者 艾龙 attilax 1. 概述:核心业务: 1 1.1. 功能文档路径 /palmWin/src/docum ...

  8. 文档 - STOMP Over WebSocket

    http://jmesnil.net/stomp-websocket/doc/ What is STOMP? STOMP is a simple text-orientated messaging p ...

  9. Project Euler:Problem 32 Pandigital products

    We shall say that an n-digit number is pandigital if it makes use of all the digits 1 to n exactly o ...

  10. EditText: android:focusable和android:focusableInTouchMode的区别

    android:focusable之所以有这个属性主要是因为Android系统不仅仅是针对手机的,有可能在电视.手表等等的非触摸输入设备上(如Android TV),这些设备只有物理上下键不具备触摸功 ...