前后端分离状态下的工作与交互 -

骑猪逛街666

浏览: 144669 次
性别:
来自: 北京

最近访客更多访客>>

qiaopeng1980

kakayufei

东哥来了

hanghangdede

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (216)

社区版块

存档分类

2017-08 ( 15)
2017-07 ( 51)
2017-06 ( 94)
更多存档...

前后端分离状态下的工作与交互

浏览器工作框架 html json

阅读原文请点击：[url]http://click.aliyun.com/m/23250/ [/url]
摘要：在业务逻辑复杂的系统里，我们最怕维护前后端混杂在一起的代码，因为没有约束，M-V-C每一层都可能出现别的层的代码，日积月累，完全没有维护性可言虽然前后端分离没办法完全解决这种问题，但是可以大大缓解。因为从物理层次上保证了你不可能这么做

为什么要前后端分离
前后端职责不清
在业务逻辑复杂的系统里，我们最怕维护前后端混杂在一起的代码，因为没有约束，M-V-C每一层都可能出现别的层的代码，日积月累，完全没有维护性可言

虽然前后端分离没办法完全解决这种问题，但是可以大大缓解。因为从物理层次上保证了你不可能这么做

开发效率问题
淘宝的Web基本上都是基于MVC框架webx，架构决定了前端只能依赖后端。所以开发模式:前端写好静态demo，后端翻译成VM模版，这种模式的问题就不说了，被吐槽了很久

直接基于后端环境开发也很痛苦，配置安装使用都很麻烦。为了解决这个问题，我们发明了各种工具，比如VMarket，但是前端还是要写VM，而且依赖后端数据，效率依然不高。另外，后端也没法摆脱对展现的强关注，从而专心于业务逻辑层的开发

对前端发挥的局限
性能优化如果只在前端做空间非常有限，于是我们经常需要后端合作才能碰撞出火花，但由于后端框架限制，我们很难使用Comet、Bigpipe等技术方案来优化性能

怎么做前后端分离？
前端：负责View和Controller层

后端：负责Model层，业务处理/数据等

前后端人员双方约定好接口的数据格式，比如：前端需要调用一个用户信息的接口，数据格式为{name:”,gender:”}，那么，后端人员只需要告诉他一个接口url（如：http://192.168.1.2:8080/pro/userInfo），并且将这个接口返回前端想要的数据即可，至于后端人员怎么实现这个接口，前端人员并不关心！
前端页面用ajax解析url，获取数据进行页面端的处理，然后再按照上述地址返回给后端，就想APP和后台接口对接是一个道理。
至于前端人员要用这个接口来做什么，后端人员同样不需要关心！双方都只专注于自己需要实现的业务逻辑

前后端分离的优势
前端静态化
前端有且仅有静态内容,再明确些,只有HTML/CSS/js. 其内容来自于完全静态的资源而不需要任何后台技术进行动态化组装.前端内容的运行环境和引擎完全基于浏览器本身

后端数据化
后端可以用任何语言,技术和平台实现,但它们必须遵循一个原则:只提供数据,不提供任何和界面表现有关的内容.换言之,他们提供的数据可以用于任何其他客户端(如本地化程序,移动端程序)

平台无关化
前端3大技术本身就是平台无关的,而后台连接部分的本质是实现合适的RESTful接口和交互Json数据,就这2者而言,任何技术和平台都可以实现

构架分离化
前端架构完全基于HTML/CSS的发展和JS框架的演变,与我们耳熟能详的后台语言(如C#, Java, NodeJs等)完全无关. 由于前台是纯静态内容,大型构架方面可以考虑向CDN方向发展.

后端构架几乎可以基于任何语言和平台的任何解决方案,大型构架方面, RESTful Api可以考虑负载均衡;而数据,业务实现等可以考虑数据库优化和分布式

但总而言之,前后端的分离也实现了前后端构架的分离

前后端流量大幅减少
我们知道,前后端流量的大头是HTML/JS/IMG资源,而数据仅仅是小头,资源占到100K以上的页面不算大,但数据充其量10K左右,比如一个1万条记录的数据经过压缩也仅仅在100K左右,而一个稍大的JS库或图片就不止这些.

流量的减少在于”前端静态化”这个规则,在第一次获取以后静态资源会被浏览器缓存,即使浏览器继续轮询,服务端也会返回一个非常小Not Modified响应,流量几乎可以忽略不计.

举例说明,在一个页面为100K,数据为10K的页面中,100次请求的流量是100K+10X100 = 1.1M. 显而易见,其流量是大幅低于每次获取完整HTML的情况的

表现性能的提高
有人质疑这种模式的页面性能问题,其实情况没有那么悲观: 第一次获取的确会有些许损失,但我认为,损失微乎其微,一个HTML页面的加载,同时加载10多个几十K的JS, Image的情况非常常见,再多1-2个10K的Json也并非沉重负担.

但后续使用这个页面,性能优势就完全体现了,页面的绝大部分内容都是本地缓存直接加载,远程获取的仅仅是1-2个10K的内容,其加载时间百毫秒内,这和本地页面几无区别,其前端加载和响应速度得到非常大的提高是显而易见的.

前后端平台无关和技术无关
前端是纯HTML技术,前端人员只需要记事本就可以开发并非一句”戏言”,而后端能够实现RESTful的框架和平台比比皆是, 完全可以选择更适合团队,人员和公司的技术路线而不在纠结于平台和技术的选择

安全性方面的集中优化
前端静态化以后,前端页面攻击几无可能,一些注入式攻击在分离模式下被很好的规避; 而后端安全问题集中化了,仅仅只处理一个RESEful接口的安全考虑,安全架设和集中优化变得更明确和便利

开发的分离和构架的分离
也许很多团队还是1个开发人员全包前后端的模式,但前端的要求越来越高,前后端人员的需求分化日益明显,一旦系统上级别上档次,其分离的需求必将出现.

前后端人员的完全分离可以使得他们在各自领域进一步求深求专,成为更加专业的高手;另外,前后端的构架也可以分开考虑和架设,前端构架就能集中考虑性能和优化,而业务,安全和存储等问题就能集中到后端考虑
阅读原文请点击：http://click.aliyun.com/m/23250/

分享到：