为什么要进行前后台分离

从事前端开发工作也有一定的时间了,在这段时间里,由一个基本的前端开发开始,做到前端经理;基本上算是走过了所有前端开发都走过的路,今天主要分享下我这一路走来,对前端的理解。

我开始接触前端的时候,其实称不上是所谓的开发,更多的是现在多数人对前端的理解-美工,当时负责的工作就是将PSD转化为HTML页面,并做些基本的交互。所以,我们组一致都挂在设计组下面,因为大家对其理解,其实是偏设计的东西,和所谓的开发根本挂不上钩。结果导致的就是一系列的连锁问题--前端不被看重,前端的工资水平就很难提升,前端转岗;我身边就有好几个前端因此而转岗。

其实所谓的前端开发工程师,并不仅仅是将PSD转化为HTML页面并做些交互这么简单,理论上,应该还有很多的js要开发,那这部分js都转移到哪里了呢?答案就是所谓的研发人员身上,他们可能是PHP开发工程师,或者是java开发工程师,这些人同时担着PHP/java开发和js开发2项工作。那这样会带来一个什么样的问题呢?一来网站性能很差,二来页面交互效果很烂,三是前端代码没有什么组织性。为什么会出现这些问题呢,主要是因为他们的工作重点还是在PHP或是JAVA上,一来本身很难去深究js,二是对页面的交互缺乏CSS的基础,三是不会去过多的研究js的优秀框架。我自己做过网站的性能优化,重构过他们的代码,对这点的理会很深。久而久之,就出现一个很尴尬的情况,国外/国内大牛推出了很多优秀的框架,却很少能在公司中有应用。网站呈现依旧 ”一副任你外面如何分外妖娆,我自清贫的傲娇态度“。

那可能有人要问,js到底可以实现哪些东西。我就结合下我自己的工作说下吧。

1. CSS+JS,可以实现很多很炫的效果,例如旋转,放大,变形等;这些的话,其实一般的前端开发在接触到 CSS3很nb的属性后,都能够游刃有余的实现

2. 前端的性能优化,这块其实涉及的东西很多,对于非js之内,就不过多的说了,主要说下与js方面有关的。我们知道js加载到页面中主要分为2步,一是下载,二是解析;如果js同步下载的话,其实会block住其他资源的下载,这个就是为什么把js异步掉的原因,那这又有一个问题,那我把js异步处理后,为什么不能把它放在头部呢?异步的资源不是不阻碍其他资源的下载了吗?这里又涉及到一个问题,那就是js的解析问题,js下载完成之后就会进行解析,解析会block住其他资源的下载,更重要的一个问题是解析js过程中如果有操作DOM,那页面没有下载完,就会报错。所以现在网站一般都是将js放在页面的最底部。那放在底部就是最优的解决方法吗?不是,js没有实现按需加载。怎么理解按需加载,就是按照页面需要展示的内容加载对应处需要使用到的js。简单的说,就是在页面初始化的时候,我只加载和首屏相关的js,其他的js一概不加载。这样页面在打开的时候,只会加载很少的js文件,网站速度就能有很大的提升。那又怎样能实现js的按需加载呢,那就是:一将js模块化/低耦合的组织,二是通过工具实现按需加载,我们这边使用的是requirejs进行的模块化加载。除了js按需加载以外,其实还有个影响性能很大的问题,就是js本身的逻辑问题,这块对性能影响也很大,特别是对一些js引擎较弱的浏览器,影响更大。这块涉及到的东西也很多,简单的举个例子,页面中有300个li,通过jquery 的 $("li")方式去查找,你可以算了需要查找的时间,如果你的查到的结果不保存,每次都是使用$(‘li‘)查找,和我存储了一次,以后直接使用保存的,对比下运行时间。你就会发现运行时间差距很大。

3. 前端的模版引擎,包括underscorejs或者是artTemplatejs,这些虽然只是些工具,但是合理使用,对工作效率提升还是非常明显;接下来会进一步分开讲解这个部分

4. backbonejs,结合我们现在开发的项目,backbone还是非常实用的,主要表现在前后台分离上,并且对于前端架构的搭建和效率的提升,有很大的飞跃。接下来会详细讲解backbone在前端开发中的具体应用

5. requirejs,这个算是一个前端开发的工具吧,它的主要作用在于管理js,并且模块化和异步化js;对于管理文件的加载,有极大的帮助作用。这块接下来也会分章节讲解。

6. 还有一个是目前作为前端开发,基本上都要了解的,就是nodejs;这个东西有很多作用,就不去细说。今天主要讲解下使用nodejs开发的一个半自动化的测试作用-phantomjs,目前我们这边专题的测试走的基本上都是这个测试工具,但是是要基于phantomjs进行二次开发的。接下来也会分章节讲解这个部分

7. Grunt,这个目前在我们具体的项目中还没有完全使用,但是其很多功能还是值得研究和推广的。

当然,以上只是前端开发一些基础,不过结合我们自己的实践,以上的东西的引入,给我们开发带来了极大的便利,并且较低的学习成本,在具体应用中,也极易推广使用。

目前我们使用以上的框架,推行的前后台分离方式,基本上已经确定下来;并且在几个重大的项目有具体的应用,也带来的很大的优势。主要表现在以下几点

1. 前后台并行开发,目前UI设计完之后,我们就可以和研发确定接口,接口确定完成之后,就可以完全分离式开发,在前后台都开发完成之后直接连调就可以

2. 后台可以更专注后台开发和接口性能,不必要关注前端的问题。

3. 前端这边也可以完全发挥自己的优势,在页面性能/js加载/异步化/页面DOM数优化等方面都会有很大的提高

4. 也做到了专业的人做专业的事情,做到专业化分工

以上是在做前端开发具体的实践中总结的一些工作心得,也是我们这边前端会一直向前提升的道路。希望各位前端开发能够提升自己的技能,现在自己的价值,得到更高的报酬,更多的尊重。

时间: 2024-08-28 10:38:31

为什么要进行前后台分离的相关文章

CI框架3.0版本以后,前后台分离的方法。

笔者认为,CI框架官方其实并没有考虑这个前后台分离的问题,所以没有官方的分离方法.而且,2.0版本的分离,也被官方认为这是一个bug.所以在前后台分离这个问题上,其实并不如thinkphp框架. 在CI框架2.0版本时的,大多数人认为可以这样做,前后台分离是可以直接在controller下,分admin和home目录的. 这是2.0版本时 其实,今天我用的是3.0版本的CI框架.在前后台分离这个问题,我也纠结了比较久.但是为了项目结构目录的清晰,还是要做前后台分离的. 我大概是做了这样一个分离.

vue+webpack项目中使用dev-server搭建虚拟服务器,请求json文件数据,实现前后台分离开发

在项目开发中,前后台分离,做了假数据,项目使用vue2.0重构,后台也推到重来了,为了不耽误开发进程,我做了虚拟的数据请求,使用vue-cli脚手架搭建的项目文件中dev-server搭建虚拟api请求,访问自己mock的假数据虚拟请求后台的模式,具体做法如下 在build/dev-server.js文件中 在var app = express()这个实例的下面添加如下代码 // 本地json-server服务器搭建代码 // 引入数据库文件 var appData = require('../

Yii2的相关学习记录,前后台分离及migrate使用(七)

最近一直忙其它的(其实是懒!),将<深入理解Yii2>看了一遍,一些当初没明白的稍微明了了点,然后又看yii2的图片上传等处理.富文本.restful什么的,但由于没进行到这里,只看也不管用啊,所以还是按照步骤一步步来,先说说前后台分离.(其实普通的内容管理站点用不着下面所说的彻底分离什么的,看看也无妨) 个人感觉前后台的情况有这么几种,首先是前后台是否是用一个验证体系,其次是前后台是否共用一个数据表.一般来说下面三种比较常用吧: A.共用一个验证体系和一个数据表. B.两个验证体系和共用一个

Yii2前后台分离如何实现?

本文和大家分享的主要是php中的Yii2框架前后台分离相关知识,一起来看看吧,希望对大家有所帮助. Yii2前后台都需要注册的时候会产生前后台登录一个另一个同步登录和退出,这是因为登录和退出之前的sitecontroller里面公用了common/model下面的LoginForm.php和user.php需要分开写: 1.将common/models/User.php在当前目录下copy一份,命名为Admin.php,修改类的名称为Admin 2.将common/models/LoginFor

YII2.0实现前后台分离登录

要实现前后台分离登录, 那我们先建立一个admin表,用来存放管理员数据,而会员仍然用原有的user表. 首先, 我们运行 yii migrate/create admin 创建一个migration 时间戳,用来编写创建Admin表: <?php use yii\db\Migration; class m160427_133556_create_admin extends Migration { const TBL_NAME = '{{%admin}}'; public function sa

Spring boot 前后台分离项目 怎么处理spring security 抛出的异常

最近在开发一个项目 前后台分离的 使用 spring boot + spring security + jwt 实现用户登录权限控制等操作.但是 在用户登录的时候,怎么处理spring  security  抛出的异常呢?使用了@RestControllerAdvice 和@ExceptionHandler 不能处理Spring Security抛出的异常,如 UsernameNotFoundException等,我想要友好的给前端返回提示信息  如,用户名不存在之类的. 贴上我的代码: JWT

记一次网站前后台分离后公用文件处理过程

在博客园注册好几年了,但是一直也没有养成写博客的习惯,园龄2年3个月,没有博客,没有粉丝,少有关注,还基本每周都要逛几次,按说也算是个奇葩的超级大水B了吧,哈哈. 上半年换了工作,在找工作的各种面试过程中,才发现积累的重要性,很多问题在以往的经历中都或多或少经历过,但是大部分都是浅尝辄止,百度出答案,搬上项目上用,能用就用,不能用改改再用,还不行网上找别的方法用.一直这样,几年下来,问题解决不少,但是想想那些是自己会的,真的把网络断了让我封闭式编程,我还能写出多少东西呢,想想就心惊胆战. 不怕起

Yii2前后台分离

Yii2前后台都需要注册的时候会产生前后台登录一个另一个同步登录和退出,这是因为登录和退出之前的sitecontroller里面公用了common/model下面的LoginForm.php和user.php需要分开写: 1.将common/models/User.php在当前目录下copy一份,命名为Admin.php,修改类的名称为Admin 2.将common/models/LoginForm.php复制到backend/models/LoginForm.php 修改backend/mod

OAuth在WebApi中的使用,前后台分离的调用方式

前段时间由于公司架构服务层向WebApi转换,就研究了OAuth在WebApi中的使用,这中间遇到了很多坑,在此记录一下OAuth的正确使用方式. 1.  OAuth是做什么的? 在网上浏览时,大家都见过这样的功能:网站A提供了第三方登录服务,比如使用新浪微博.QQ账户登录.用户使用第三方账户登陆后,第三方返回Token给网站A,当网站A调用第三方服务请求登录用户信息时需传递该Token给第三方,第三方才允许该服务请求.之后的每次请求无需再次认证,直接使用该Token即可.这就是OAuth的典型