前端和后端分工的三种模式

转载 2015年11月17日 23:34:21

最近在捣腾前端的东西,学习了一下前端知识。因这方面的知识太浅薄了,这篇简陋的博客就当抛砖引玉。

      在Web开发中,前端攻城狮和后端攻城狮是不同的物种,一个追求任何场景下都美丽动人,一个追求巨大压力下举重若轻。但两者又必须密切分工合作,才能使得项目顺利进行。分工的核心在于在哪里渲染页面。不同的渲染位置决定了不同分工模式。

      渲染是把数据填充进模板,按模板定制的样式把数据展示出来。如下图所示知乎的例子,图左上方的模板定制了我们看到的样子,其中?表示没有数据,这时将一个用户的数据(图左下方)填充进模板,便得到了我们看到的页面(图右边)。这个过程就是渲染。一共有三种渲染的方式。

Snip20151011_15

一.在服务器端渲染

      浏览器发送请求到服务器端,服务器端处理请求并准备好数据,然后将数据写进前端编写的模板中,从而生成html文件,将生成的html发回给浏览器。这样浏览器上就显示页面了。

      <table class="table">
      <tr>
            <td>项目名称</td>
            <td>组长姓名</td>
      </tr>
      <% for(var i = 0; i < project.length; i ++){ %><% } %>
      <tr>
            <td><%= project[i]['project'] %></td>
            <td><%= project[i]['leadername'] %></td>
      </tr >
      <% } %>
      </table>

      上面是一个模板。这份模板是一个html文件,其中带有数据绑定命令"<td><%= project[i]['project'] %></td>"。当后端程序整理好数据,在服务器端将数据填充模板,渲染出页面。如下代码所示,app.render(模板,project)语句的意思是,在服务器端将projectdata填充进模板生成页面,并将其发送给浏览器。

      app.get("/show",function(req,res){
            projectdata = preparedata();
            render(模板,projectdata);
      })

      这个模式有一个问题——不能实现部分更新。即使用户点了一个按钮,产生了很细微的数据变动,也需要后端重新渲染整个页面再将页面发往浏览器端。如果页面存在大量的静态的部分,这种方式无疑不是高效的。

      同时,前端工程师们需要用模板定义展现形式,后端工程师们需要用模板输出数据。久而久之,模板就会越来越复杂,越来越不可维护。

二.在浏览器端渲染

      现在一个趋势是渲染移动到浏览器完成。浏览器端发送请求后从服务器端接受到了模板和 J S代码。浏览器执行接受到的 JS 代码,JS 代码会从服务器请求数据,并将数据填充到模板中。下面的代码在页面加载完之后从接口 /online/projectlang 获取项目语言的数据,并将其写入html页面。

      $(document).ready(function(){
      $.ajax({
         url:"/online/projectlang",
         type:'get',
         dataType:'json',
         success:function(data){
            var list = '';
            for(int i = 0 ; i < data.length; i ++){
               var item = "<li><a href=\'#\'>"
               + data[i] + "</a></li>";
               list += item;
            }
            $("#projectlang").append(list);
         },
         ;error:function(xhr, status, error){
            console.log("projecthot ajax "+ error);
         },
      });
      })

      这段代码执行的效果如下图所示。
      QQ截图20151012101302

      利用运行在浏览器端的Javascript语言,前端工程师能够从后端服务器获取数据,进而按照业务逻辑渲染页面。这时候后端工程师只需要开发稳定的 API 提供数据就可以了。这种模式虽然依然是B/S模式,但开发的场景却和C/S模式比较相近。在浏览器端渲染的好处在于前端完全控制了模板,后端只需要开发相应的 API, 分工比较明确。并且支持部分页面更新。同时同一套后端服务可以同时支持不同的展示模式,比如同一套后端服务还可以支持移动开发。

      当然啦,浏览器渲染也存在一些问题。其中最大的问题是对 SEO 不友好。搜索引擎的爬虫程序必须像浏览器一样执行 JS 代码才能获得页面的内容,从而提高了爬虫爬取页面的难度。

三.大前端模式

      借助神器Node.js,前端工程师终于把磨爪伸进服务器了。Node.js是一个来自老毛子的高性能异步服务器。如果只是一个服务器,Node.js并不出奇。一般服务器需要提供一种编程语言的runtime,方便开发者进行开发。Node.js因为异步的关系选择了异步性能很好的Javascript,就是前端工程师经常在页面上写的那个Javascript。这时前端工程师们一看,呀,这玩意我会呀。因此利用Node.js,前端工程师不再局限在浏览器,可以在服务器写Javascript代码了。这时前端工程师可以按需要,选择在浏览器端或者服务器端完成渲染。这个模式我们可以称之为大前端模式。

      大前端模式下,前端工程师有更大的灵活性进行开发,从而可以避免前面两种模式的弊端,发挥他们的长处。但是,世间无十全十美之事,大前端模式也有自己的弊端。前端工程师们被赋予了服务器写代码的能力,能力越大责任也就越大。在服务器写代码,前端工程师必须承担日志、安全和负载均衡等之前后端工程师才需要承担的责任。大前端攻城狮相当于把前端攻城狮和后端攻城狮两种物种的基因杂揉在一起,创造出来的混元体,稀有程度可想而知。这也就是现在精通Node.js程序员少的原因。

      以前第一种模式占主流地位,而现在第二种模式慢慢地受到了大家的关注。至于第三种模式,据我了解,目前只有淘宝一家在进行这方面的尝试。我个人比较喜欢第二种模式,毕竟前端工程师和后端工程师的技能树差异太大。但开发领域没有银弹,不同的场景需要选择不同的模型。

Web前端后端傻傻分不清

做C开发将近六年,基本上没有接触过web相关的东西,原来听别人说web相关的东西的时候也是分不太清楚到底哪个是前端哪个是后台,前端和后台又是怎么配合着工作的?经过各方法搜索,很多类似的疑问终于得以弄明...
  • rosetta
  • rosetta
  • 2016年12月25日 19:50
  • 12917

Web前端和后端之区分,以及面临的挑战

在我们实际的开发过程中,我们当前这样定位前端、后端开发人员。   1)前端开发人员:精通JS,能熟练应用JQuery,懂CSS,能熟练运用这些知识,进行交互效果的开发。   2)后端开发人员:会写Ja...

前端和后端的思考, 给初学者的建议

一篇博文,引发初学者对软件方向的思考...

Web前端和后端之区分

在我们实际的开发过程中,我们当前这样定位前端、后端开发人员。     1)前端开发人员:精通JS,能熟练应用JQuery,懂CSS,能熟练运用这些知识,进行交互效果的开发。     2...

前端和后端是如何交互的

1、前端请求数据URL由谁来写 在开发中,URL主要是由后台来写好给前端。 若后台在查询数据,需要借助查询条件才能查询到前端需要的数据时,这时后台会要求前端提供相关的查询参数(即URL请求的...

Web开发:什么是前端、什么是后端

从去年做空间开始,这一年来,一直在提前端和后端这样两个概念,同时,也在小组内推行着技术上的分工,并在开发模式上尝试着创新。在学习了Spring、IBatis之后,对于前端后分工的需求也越来越强烈,所以...

什么是前端、什么是后端

从去年做空间开始,这一年来,一直在提前端和后端这样两个概念,同时,也在小组内推行着技术上的分工,并在开发模式上尝试着创新。在学习了Spring、IBatis之后,对于前端后分工的需求也越来越强烈,所以...

77个数据科学家常见面试题

随着大数据概念的火热,数据科学家这一职位应时而出,那么成为数据科学家要满足什么条件?或许我们可以从国外的数据科学家面试问题中得到一些参考,下面是77个关于数据分析或者数据科学家招聘的时候会常会的几个问...

Sublime2下配置Python模块查找路径PYTHONPATH

原文地址:http://t.hengwei.me/post/Sublime2%E4%B8%8B%E9%85%8D%E7%BD%AEPython%E6%A8%A1%E5%9D%97%E6%9F%A5%E...

MVC框架(二)----前端与后端MVC、MVVM等设计模式区别与联系

上篇文章中提到了前端的框架分类,其中前端JS框架中有些是MVC设计模式,但是java和dotNET平台也有自己的MVC也有自己的设计模式,这两类有什么区别呢,好多猿们甚是不解,旁征博引后自己总结了一些...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:前端和后端分工的三种模式
举报原因:
原因补充:

(最多只允许输入30个字)