前后端分离有感

4,090 阅读4分钟
原文链接: www.yaya12.com

一、前后端历史

        无前端       

        1、后台全包—静态html(table)

        2、后台模板—渲染数据,后端编译  php

         项目变大,css js html壮大—分离出了前端

        3、编写html,嵌套成php   


        问题—相爱想杀

             A、相互依赖过深,职责不清——前后端都可以改代码,出现bug推诿,修改效率低,影响合作

            B、效率慢——-前端等待接口/后端等待页面,开发效率低

            C、前端交互效果弱化

            D、依赖后端的模板环境、模板编译、路由支持

        4、编写html,数据ajax局部刷新,后端提供路由、接口

            A、前端模块化—require  sea

            B、前端模板— tpl pub 

            C、前端工程化—模板编译打包—gulp webpack grunt

       5、前后端分离

二、为什么分离—明确分工,清晰职责

        1、代码管理

               后端不需要合并前端代码,减少代码合并冲突问题

        2、加速开发进程

               一键编译,都不用嵌套模板

               数据模拟,无需等待

               接口转发,易于调试            

        3、提测灵活

              如果只是前端改动,可以只部署前端代码

        4、性能优化      

              a、代码压缩,提示效率;

              b、代码编译,增加版本号,消灭缓存

              c、随着页面增多,js文件越来越大,可以对于线上文件进行cdn部署;

三、怎么分离

        分离前提

            1、数据 —  ajax

            2、路由 —  单页面  vue react angular 

        工作模式

            3、独立开发,代码管理单页面

            4、模拟数据

            5、接口代理转发

        实现模式

            6、单页面  

    

        7、nodejs中间层前端mvc

四、例子演示——渠道系统

         A、技术支持  vue webpack

              1、单页面—自带路由

              2、首页路径分配—Nginx

              3、数据交互——-ajax

         B、优化

              1、静态资源—CDN   

         C、好处—工作模式

               1、mock模拟数据 

               2、node代理转发整数接口

               3、各自管理代码—版本管理、发布、bug修改      

         D、劣势

               1、js体积随着开发增大 

               2、首屏渲染缓慢—用户体验   

               3、SEO弱

        E、优化方法

            1、路由懒加载(可以将app.js进行划分成多个小的js,按需加载)             2、服务器渲染、浏览器渲染共存(针对有SEO要求的项目–nuxt.js)             3、node做中间层,控制接口的请求转发(劣势-)

            

参考:

juejin.cn/post/684490…

2014.jsconf.cn/slides/herm…

taobaofed.org/blog/2014/0…