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

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

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

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

1. 在服务器端渲染

浏览器发送请求到服务器端,服务器端处理请求并准备好数据,然后将数据写进前端编写的模板中,从而生成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); })

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

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

2. 在浏览器端渲染

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

*** QuickLaTeX cannot compile formula:
(document).ready(function(){
      

*** Error message:
Missing } inserted.
leading text:       $

.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); }, }); }) 这段代码执行的效果如下图所示。

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

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

3. 大前端模式

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

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

以前第一种模式占主流地位,而现在第二种模式慢慢地受到了大家的关注。至于第三种模式,据我了解,目前只有淘宝一家在进行这方面的尝试(ps:美团酒店也在进行这方面的尝试,感谢“必填”网友提供的信息)。我个人比较喜欢第二种模式。第一种模式太老了。第三种模式对工程师要求太高,毕竟前端工程师和后端工程师的技能树差异比较大。但开发领域没有银弹,不同的场景需要选择不同的模型。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小文博客

百度搜索资源平台(原站长平台)网站改版使用说明

百度站长平台是每一个有梦想的SEO站长都理应熟悉和用到的工具。它主要用来给站长提供网站SEO的便利,今天的主要给大家讲讲百度搜索资源平台里的网站改版功能。博主在...

955
来自专栏云计算D1net

Dropbox为微软Office提供原生云存储服务

北京时间11月5日消息,云存储服务提供商Dropbox宣布与微软达成协议,将对后者旗下的桌面、移动及网页版Office套件提供原生的云服务支持。同时,Offic...

3406
来自专栏企鹅号快讯

Web前端开发初级阶段需要学习的知识有哪些?

今天来和大家讲讲Web前端开发需要学习什么?前端开发又需要用到哪些开发工具?下面济南IT培训优就业的老师就简单和大家介绍一下。 ? Web前端工程师其实在不同的...

17910
来自专栏ytkah

html5开发制作,漂亮html5模板欣赏,H5网站建设

html5是什么? HTML5 是下一代的 HTML(超文本标记语言,网页的组成部分),HTML5是web开发世界的一次重大的改变,能适配pc、手机等各终端,跨...

4666
来自专栏苦逼的码农

给大家推荐几个常用谷歌浏览器插件(不用翻墙也能使用谷歌搜索了)

虽然一直知道谷歌浏览器有很多插件,但并不知道还有一些这么好的插件,不知道是不是我太落后了,今天我就给大家介绍几款自己常用的插件。

13.6K9
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2 HTML5基础

答:借助HTML5解决和分析工业设计中的问题,易于实现数据可视化,而且支持所有主流操作系统。与传统C/C++/FORTRON计算机语言相比具备几个显著优势:首先...

810
来自专栏我的小碗汤

【插件】解放鼠标,让浏览器更智能

首先感谢大家参与这周的送书活动。已经给小助手微信发送好友请求的,不要着急,这两天会通过验证,并拉大家进入抽奖群参与抽奖,大家肯定都可以参与的。

752
来自专栏互联网杂技

抛弃jQuery,拥抱原生JavaScript

Why not jQuery 1. 模式变革 jQuery 代表着传统的以 DOM 为中心的开发模式,但现在复杂页面开发流行的是以 React 为代表的以数据/...

3308
来自专栏Timhbw博客

Genymotion安卓模拟器

2016-03-1613:54:08 发表评论 1,513℃热度 安卓开发的同学们用过安卓模拟器(当然我只是因为上课需要研究了下),Eclipse里面自带模拟...

29910
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2 HTML5基础

答:借助HTML5解决和分析工业设计中的问题,易于实现数据可视化,而且支持所有主流操作系统。与传统C/C++/FORTRON计算机语言相比具备几个显著优势:首先...

1690

扫码关注云+社区