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

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

在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 条评论
登录 后参与评论

相关文章

来自专栏贺贺的前端工程师之路

Angular2、Ionic、TypeScript、es6的关系?

其实对于这3个东西来说,我根本搞不清楚他们之间的关系,突然之间意识到,自己不能再这样搞不清楚关系的就学下去。这样就像angular1似的,自己还是什么都不会,a...

843
来自专栏玄魂工作室

如何学python-第一课 入门简介

最近在论坛上闲逛的时候,我发现了一些相当不错的python脚本编程的文章。不过,这些文章也有它们的局限性,因为它们更多的是在介绍一些基础的语法,而不是关于无比热...

34610
来自专栏IMWeb前端团队

拥抱sass,抛弃compass

为什么要用sass 在选择sass之前,我们先说下为什么要使用CSS Preprocessor。 大概两年前,CSS Preprocessor其实没有这么热,而...

1918
来自专栏章鱼的慢慢技术路

Unity入门教程(下)

1953
来自专栏take time, save time

桌面山寨版2048—逻辑篇之缓缓出现的细节像枫叶

      既然最终目的是能够让博客成为我的主平台,那么必然要采用一些方式方法,所以,如果想看第三部分--优化篇,请猛戳我的博客吧。 二、桌面山寨版2048—逻...

3406
来自专栏phodal

单页面应用后台渲染的三次实践

或许这是一个好的主题,又或许这不是一个好的主题。但是至少我可以Share一下我的经验: 基于Mustache模板引擎的前后台渲染。 基于PreRender方式的...

2179
来自专栏企鹅号快讯

Python开发六大优点 让你学到真正的技术

Python是一种编程语言,完成同一个任务,C语言要写1000行代码,Java只需要写100行,而Python可能只要20行。用Python完成项目,编写的代码...

1856
来自专栏潘嘉兴的专栏

【实用】教你如何改造 zblog MIP 模板

很多人都问过我,咖啡你的 MIP 主题模板到底怎么改的。我就和 zblog 那些开发者交流了下。zblog的MIP改造非常简单。今天就免费给大家献上改造方案,希...

2530
来自专栏原创

基于AngularJS的个推前端云组件探秘

AngularJS是google设计和开发的一套前端开发框架,他能帮助开发人员更便捷地进行前端开发。AngularJS是为了克服HTML在构建应用上的不足而设计...

4288
来自专栏美团技术团队

用Vue.js开发微信小程序:开源框架mpvue解析

前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架。使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复...

6898

扫码关注云+社区