文档章节

淘宝玉伯引发Web前后端研发模式讨论

bobo_lu
 bobo_lu
发布于 2012/12/06 22:26
字数 3461
阅读 737
收藏 33
点赞 1
评论 1

淘宝玉伯是是前端基础类库 Arale 的创始人,Arale 基于 SeaJS 和 jQuery。不久前,淘宝玉伯在 Github 的 Arale 讨论页面上抛出了自己对于 Web 前后端研发模式的思考

        他首先指出了前端的产品形态:

前端涉及的产品形态在业界可分为两大类:Web Pages 和 Web Apps 。

Web Pages 是浏览类的,用户主要是来看的:以内容展现为主,辅有少量交互。前端提供基础类库,开发工具化、外包化。典型:首页、营销活动、频道等等。

Web Apps 则以交互为主,用户主要是来用的。可分为两种:

  • 体验类:包含大量交互,同时用户体验很重要。比如 GMail, 支付宝收银台、淘宝购物车等等。
  • 功能类:包含大量交互,以功能为主,体验不是第一位的。比如后台系统、认证流程等。

        接下来又指出了目前遇到的问题:

  1. Web Apps 的开发,前端投入了大量人力,但前端资源依旧存在潜在的瓶颈(比如新增加一条业务线时,很可能无前端去支持)。现有前后端配合的开发模式,沟通协作成本偏 高,可维护性不够方便。在现有的研发模式下,前端自身的价值点也很难体现出来(花了大量时间在业务上,但得到的认可不多)。
  2. 最核心的问题,依旧是前后端的解耦:如何让前后端的工作彼此更独立,如何让更合适的人做更合适的事,把事情做得更好。
  3. 对于体验类,目前业界有很多新兴的解决方案:Backbone, Ember, Knockout 等等,包括 YUI 的 App framework 等。这些解决方案,都希望后端专注于提供 REST 接口,其他的都交给前端来搞定。
  4. 对于功能类的,目前业界解决方案依旧是比较老的一套,比如 GWT 等,包括 ExtJS 也是希望能让后端搞定一切。

        他还提到了一些现有的解决方式:

要达成第 3 点,前端需要了解数据,以及深入把控住数据之外的业务逻辑,然后利用前端技术,完成开发。

要达成第 4 点,后端依旧需要有一定的前端技能,否则容易出性能、可维护性等问题而玩不下去。

        玉伯提到他期待的方式:

  • 让前端专注于 UI 层面、体验层面的开发。
  • 让后端专注于数据、业务逻辑的开发。
  • 第 1 点和第 2 点最好能并行。能有一种很便捷的方式,
  • 将第 1 点和第 2 点的工作无缝衔接起来。

核心是:解耦,让更合适的人做更合适的事。

        pigcan 在评论中指出:

特别同意关于在 web app 方向做为前端对于数据需要有非常好的了解 !正如“我们该怎么做”中提及的 backbone,其 model、以及依托 model 在对数据进行数据 change 监听的时候,都需要对数据本身需要有很好的了解。 而这就会是一个比较大的问题,当 model 数量足够多,且依赖关系足够深的时候,如何梳理数据关系以及多人协同开发就会是一个很大的问题 。有时候不得不涉及组件与组件的数据共享与通信,以及 view 层更多细节性的问题 。

        玉伯接下来贴出了自己和小凡的讨论记录,结论是:

组件和接口是个好的方向,对公司整体效率提升肯定有很大帮助。经历推广和培训之后,详细能大规模实施的,只是前期阻力可能比较大。

        itsoso 根据自己的经验提出:

后端按照 REST 方式的约定开发接口,前端开发足够多的组件给后端用,对公司研发效率的提升会有很大帮助;后端也愿意组装各个组件,跟自己的接口结合起来,完成功能的开 发。让这个流程走通,开始的阻力应该出在后端需要做一些前端积累上,在遇到脚本、样式错误的时候能够完成 debug 的工作,这个过程中仍然需要前端的帮助,需要前端投入,完成这个积累之后,前端就可以解放出来了。

        semious 的经验是:

体验类开发一般可以分为几个方面:

  • UI 表现
  • 用户界面交互逻辑
  • 数据交互
  • 前端业务逻辑

1、对于 UI 表现这个我觉得可以通过 html 模板框架将 UI 的表现方式交给 html、css 工程师负责

2、对于用户交互逻辑可以通过组件的方式,大多数的用户界面交互逻辑都可以组件加上 data-*配置的方式来完成,对于绝大多数的用户交互都是类似的,并且可分装的,对于复杂的交互逻辑,组件可以开放足够的 api 结果,以供调用。这部分开发我觉得可以交给初级前端工程师就可以轻易实现。

3、对于数据交互这块我建议使用数据和 html 结构解耦的方式,将数据结构定义和所绑定的 html 结构解耦,html、css 工程师负责指定调用模板的数据源,后端开发人员定义数据格式,两者通过数据解析框架实现,数据的调用源(本地或者远程)由数据解析框架实现

4、对于前端业务逻辑的开发,我觉得可以让后端开发来参与,因为据我了解,对于绝大后端工程师最痛苦的不是 js 编程,而是页面组件的样式调整、定位之类。现有的模式,基本实现了表现和逻辑分离,后端开发人员在 js 编程中应该碰不到样式的调整。不过我们需要一套框架,已规范后端开发工程师对 js 的编码方式,以免造成 js 代码结构性混乱。

        根据大家的讨论,玉伯总结出了解决问题的初步思路:

  1. 前端组件化,包括两部分:
    • 基础组件:通用的 Utilities + Widgets,比如 Cookie, Calendar, TabView 等等
    • 业务组件:针对具体的业务,由该业务线的前端,抽取出业务线的通用组件
  2. 后端接口化,将数据抽象化、模型化,可输出为 REST 接口
  3. 耦合框架化:
    • 将后端提供的 REST 接口封装成 Model 层(或者直接在模板层同步输出数据,将数据输出标准化)。
    • 将设计师提供的视觉产出转换成 Template 和 Style 。
    • 使用前端组件实现展现层的通用交互。可通过 data-attribute api 或 handlebars helper 在 template 配置完成。
    • 非标准化 View 层的开发,包括 Actions 等行为脚本的开发,含展现层的业务逻辑。

        他还点明了开发人员在其中的职责:

  • 前端组件化由前端开发工程师完成,输出为前端通用类库和业务线的组件库。
  • 后端接口化由后端开发工程师完成,输出为数据模型,可同步或 REST 调用。
  • 耦合框架化,早期由前端工程师负责,后端工程师参与 Model 和 Action 层的部分开发,等该模式成熟到一定阶段时,可交由后端工程师独立负责,同时前端工程师由具体项目的开发,退回到该业务线的前端技术支撑。

        接下来,他还就如何实现“耦合框架化”提出两种思路:

  1. 渐进增强派。保持现有的研发模式不变,只调整人员的职责。比如支付宝,现在前端负责模板层的开发,接下来会逐步把模板层交会给后端开发。前端将退回到 UI 组件和样式开发的工作,后端在这过程中,要逐步学会使用前端组件,独立完成开发。
  2. 引入前端框架。将后端的 VC 层前置到浏览器端,引入前端的 MVX. 代码按照前端框架的方式重新规范和组织,后端需要学会这一套,特别是 M 层和 Biz 行为层。从协同前端开发,到逐步能完全胜任,独立开发。

        玉伯所在的团队选择使用第一种方式,并指出了流程的变化:

保持现有研发模式不变 --》但调整人员职责,将更多工作交给后端独立承担 --》 在这过程中,甄别出通用问题,沉淀到前端通用类库或工具规范里 --》 进一步推进前行直到达成理想情况

        当然这对前端和后端的人员都提出了要求:

这种方式下,前端需要做到:

  • 提供简单易用的前端组件库,包括特定业务的前端组件库。后端可以基于这些组件库,快速完成页面的搭建。
  • 前端组件库里,包括 Alice 等样式库,并以类似 Bootstrap 的方式产出,需要比 Bootstrap 更易用。
  • 一套前端编码规范,需要工具化为 IDE 的插件等,保障后端的基本编码质量。
  • 一套可衡量的有效的最佳实践,可让后端比较容易遵守。以保障后续前端的性能优化和可维护性。

后端开发需要做到:

  • 熟悉 JavaScript 语言。
  • 了解基本的 DOM 和 CSS 知识。
  • 无需了解兼容性问题。

通过上面的方式,达成后端开发往全能的 Web Developer 的转变。

        sundayu 在评论中指出他们类似的工作以失败告终:

前端的难点在于通用库庞大之后的维护和升级(各个业务线都会有自己的版本),主要看功力。

最主要的是后端的问题:

  • 清晰的熟悉 js 的特性。
  • 让他们按你的逻辑干活。
  • 调试。

一直祈求后端听话、爱学、人员稳定。足够长的时间和耐性来培训培训培训。。。

        jayli 认为 sundayu 说的有道理:

互联网开发的基本特点是“变化”,如果你的架构无足够强的“应变”能力,在 web 开发领域难于持久。所以,结构和解耦不是解决问题的关键,而是基础,关键是 JS 超强的灵活性能否在框架中有更极致更放松的表现。现在我们的思路过于纠结各种“约束”,这和快速变化的 web 开发有时是相背的,约束太多,反倒增加执行难度~

        iwege 指出:

其实研发模式本身应该是切合人员配置,你的新研发模式是因为前端是瓶颈,所以让后端的救火。倘若一个公司后端为瓶颈,那前端需要切合到后端去协助。 这种相辅相成才是真正的理想状态。除非你们觉得你们公司的后端都很悠閒无聊,想让他们提高下工作效率,否则我认为最好的方式还是招聘。

对於转变方面,设置一个讨论前提,在无资源缺乏的情况下:

对於后端来说,Java 也好,PHP 也好,至少都是同步的,但是你要求后端直接掌握 js 知识(虽然很好掌握)却实际上是两种思维方式的转变了,相反前端一直都在同步异步之间锻鍊,对内存方面也很计较,转后端是相对简单的。因此我个人的看法 是,让后端知道前端知识,不如让前端熟悉后端的基本数据调用。

对於接口约定方面,当然是 REST 的最好了,最好的是前端约定好 json 格式,然后让后端尝试输出就好了。前端给测试用框架。无需后端熟悉 js。

        semious 继续提到:

个人认为,就程序的发展历程来看,前端是从后端分离出来的,因为前端变得越来越复杂,需要专门的人手去处理,本人就是一个例子。所以个人认为让后端 的开发人员写前端代码不会是一件很难的事情,现在 JavaScript 经过那么多年的发展,其编码规范、设计模式越来越有章可循,让后端开发人员学会 js 语言本身,个人认为难度不会很高,不过后端和前端有一些比较大的不同在于:

  • 代码结构的不同,从标准的 OO 变成 js 特有 OO 方式,面向对象式编程到面向混合式编程(有对象,有函数)
  • 面向请求式编程方式(主要指 web 后端开发人员,不包括纯后端业务级的开发人员)变化到面向事件和面向文档式的编程方式
  • 标记性语言方面的编程特性
  • JavaScript 脚本语言的特性
  • 运行时环境不同,从服务器环境转向浏览器环境的变化等等
如果能在培训中,重点说明这些不同的话,后端人员应该能很快上手。

        随着 Web 前端开发重要性的不断增加,前后端开发人员之间如何协调成为了大家关注的焦点。我们的读者,不知道您所了解的前后端研发模式有哪些?欢迎分享!

本文转载自:http://www.infoq.com/cn/news/2012/06/web-front-back-development

共有 人打赏支持
bobo_lu
粉丝 4
博文 5
码字总数 191
作品 0
虹口
程序员
加载中

评论(1)

不会飞的羊
不会飞的羊
学习了
前后端分离-为什么分离

What? 什么是前后端分离?一般我们所说的前后端分离都是说开发模式的前后端分离,部署一般也是分离的。 现在我所知道的常见的开发模式有: 传统的MCV模式:前端写html,后端套界面,转成jsp...

郭恩洲_OSC博客
2016/11/21
25
0
基于NodeJS的全栈式开发

随着不同终端(Pad/Mobile/PC)的兴起,对开发人员的要求越来越高,纯浏览器端的响应式已经不能满足用户体验的高要求,我们往往需要针对不同的终端开发定制的版本。为了提升开发效率,前后端分...

唐僧他大叔
2015/02/21
0
0
前后端分离的思考与实践(一)

原文出处:淘宝UED - 常胤 也谈基于NodeJS的全栈式开发(基于NodeJS的前后端分离) 前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案...

淘宝UED - 常胤
2014/04/18
0
0
前后端分离方案交流,大家发表一下看法

基于NodeJS的前后端分离(此文章来自淘宝) 前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异。痛定思痛,今天我们重新思考...

Koala_考拉
2014/05/26
9.3K
12
【开源访谈】Kissy 团队成员何一鸣访谈实录

关于开源访谈 开源访谈是开源中国推出的一系列针对国内优秀开源软件作者的访谈,以文字的方式记录并传播。我们希望开源访谈能全面的展现国内开源软件、开源软件作者的现状,着实推动国内开源...

虫虫
2012/09/25
9K
17
[淘宝玉伯]说说全栈工程师

全栈工程师(Full Stack Developer)好像突然就火了,知乎、微博上都有讨论。这个概念在 2012 年时就有提出:What is a Full Stack Developer?,主要观点是: 有这么一批人,他们对软件开发的...

邪云子
2014/01/21
1K
15
Web研发模式演变史

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

ingarfield_123
2014/06/12
0
0
Web前后分离架构研发模式de演变

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

English0523
2015/09/30
0
0
Web 研发模式演变

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

首席安全砖家
2014/05/08
331
1
Web研发模式演变史,重新理解WEB架构

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

YOTOO
2014/04/24
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

jQuery零基础入门——(六)修改DOM结构

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 在《零基础入门JavaScript》的时...

JandenMa
16分钟前
0
0
linux mint 1.9 qq 安装

转: https://www.jianshu.com/p/cdc3d03c144d 1. 下载 qq 轻聊版,可在百度搜索后下载 QQ7.9Light.exe 2. 去wine的官网(https://wiki.winehq.org/Ubuntu) 安装 wine . 提醒网页可以切换成中...

Canaan_
44分钟前
0
0
PHP后台运行命令并管理运行程序

php后台运行命令并管理后台运行程序 class ProcessModel{ private $pid; private $command; private $resultToFile = ''; public function __construct($cl=false){......

colin_86
46分钟前
1
0
数据结构与算法4

在此程序中,HighArray类中的find()方法用数据项的值作为参数传递,它的返回值决定是否找到此数据项。 insert()方法向数组下一个空位置放置一个新的数据项。一个名为nElems的字段跟踪记录着...

沉迷于编程的小菜菜
50分钟前
1
1
fiddler安装和基本使用以及代理设置

项目需求 由于开发过程中客户端和服务器数据交互非常频繁,有时候服务端需要知道客户端调用接口传了哪些参数过来,这个时候就需要一个工具可以监听这些接口请求参数,已经接口的响应的数据,这种...

银装素裹
50分钟前
0
0
Python分析《我不是药神》豆瓣评论

读取 Mongo 中的短评数据,进行中文分词 对分词结果取 Top50 生成词云 生成词云效果 看来网上关于 我不是药神 vs 达拉斯 的争论很热啊。关于词频统计就这些,代码中也会完成一些其它的分析任...

猫咪编程
58分钟前
0
0
虚拟机怎么安装vmware tools

https://blog.csdn.net/tjcwt2011/article/details/72638977

AndyZhouX
昨天
1
0
There is no session with id[xxx]

参考网页 https://blog.csdn.net/caimengyuan/article/details/52526765 报错 2018-07-19 23:04:35,330 [http-nio-1008-exec-8] DEBUG [org.apache.shiro.web.servlet.SimpleCookie] - Found......

karma123
昨天
0
0
vue-router懒加载

1. vue-router懒加载定义 当路由被访问的时候才加载对应组件 2. vue-router懒加载作用 当构建的项目比较大的时候,懒加载可以分割代码块,提高页面的初始加载效率。 ###3. vue-router懒加载实...

不负好时光
昨天
1
0
SpringBoot | 第七章:过滤器、监听器、拦截器

前言 在实际开发过程中,经常会碰见一些比如系统启动初始化信息、统计在线人数、在线用户数、过滤敏高词汇、访问权限控制(URL级别)等业务需求。这些对于业务来说一般上是无关的,业务方是无需...

oKong
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部