架构 | 前后端分离与前端工程化

本文详细介绍了前后端分离的核心理念,包括前端从后端server page中抽离,独立部署到HTTP服务器,以及它对开发行为和职责的影响。同时探讨了前端工程化,重点讲解了webpack在开发模式中的作用,以及本地代理与nginx反向代理的配置。此外,还阐述了node.js的特点及其与前端工程化的关系,并提及vue、vue-cli和webpack在构建前端项目中的角色。文章强调,技术选择应根据需求、团队和场景来定,适合的才是最好的。
摘要由CSDN通过智能技术生成

前言

  1. 本文将用最言简意赅的语言阐述前后端分离与前端工程化,并解答一些认知误区。
  2. 前后端分离和前端工程化经历过一个漫长甚至畸形的发展过程,在近两年的具体实施形式又发生了急速突变。
    本文作为基础的普及,仅描述最为主流和常规的方案。
  3. 本文主要面向无前后端开发经历的读者,故有意省略细节
  4. 想要直观,快速效果本文,建议本地创建一个vue-cli项目,进行对照查看

前后端分离

核心

前后端分离会连带一套全新的前端后生态,但其核心改动就是,前端部分从后端的server page(如jsp,asp,php)中抽离出来,成为独立的web工程。而后端的末端为web service接口,末端仅专注于数据提供。
分离以后,前端项目将单独部署到HTTP服务器上,一般使用ngix。分离后的请求流程为前端请求ngix,ngix请求后端应用服务器,应用服务器响应路径原来返回。
在这里插入图片描述
吴小胖的漫画直观地反映了当前WEB项目的主流前后端框架。

对开发行为和职责的直接影响

  1. 开发过程中不再存在静态页面与server page的来回转换,前后端在开发场景上完全解耦。
  2. 由于前端项目的完全独立,前端成为独立团队,需要对前端项目的需求,开发和上线全权负责。
  3. 由于与后端controller层脱离,前端需要独立进行前端页面的跳转(路由),权限控制的处理

前端工程化

所谓前端工程化,无论使用哪种具体的框架,vue/react/angular脚手架,都是基于webpack的开发模式,webpack是基于node的前端资源打包器,它负责整个项目的编译,打包,并充当开发时的本地服务器。
所谓编译,就是把浏览器不认识的文件和资源一律转变为原子的js,html和css,打包就是对编译后的资源做去冗余,压缩,按照你设定的文件结构进行整合,形成可以部署的web项目。
webpack-dev-server则充当开发时的本地服务器,其本质是一个集成若干预配置和开发者自定义配置的node服务器。

本地代理与ngix反向代理

前后端分离以后,本地开发和项目上线后的跨域问题是不可避免的。在开发环境下,配置webpack的proxyTable,对请求进行本地代理,简而言之就是,本地请求代理地址,代理地址实际指向应用服务器实际地址;当项目部署到ngix上后,在web项目的产品配置和ngix上也要做类似的操作,使web项目的请求指向ngix,ngix做反向代理。

node是什么,有什么特点,与前后端分离,前端工程化的关系

首先,明确node是什么,node就是脱离了浏览器环境的V8引擎,更直白点说,是可以运行在服务器上的JavaScript 运行环境。
有了node,你就可以在服务器上跑JavaScript脚本了。
尽管为了更好地服务于服务器端场景,Node的V8引擎与浏览器端存在差异,但这并不影响Node环境继承了传统JavaScript的核心特点——单线程异步非阻塞与事件驱动
而作为一个服务器脚本环境,node本身与前后端分离没有任何直接关系。使用node做服务器端,可以使用jade/pug等后端模板引擎写前端页面,如此开发,结果仍是一个单体工程。
node与前后端分离,前端工程化的关系实属间接。
前端工程化基于webpack,webpack基于node,而工程化的前端项目则是前后端分离后的前端部分。

node,npm,package.json与webpack

npm是node附带的包管理工具,无论是开发服务器端工程,或是工程化前端项目,我们都使用npm进行包的下载与依赖管理,package.json是项目的包与模块管理清单,内里记录了项目的基本信息,执行脚本,开发环境依赖包,生产环境依赖包等信息,
注意,npm仅仅是包管理工具,项目的最终编译,打包仍需webpack进行处理,webpack打包时,会参考package.json的生产环境依赖包,将其打包到最终项目中,至于其他冗余依赖,非必要依赖则不会被打包到最终产品中

vue,vue-cli,webpack

vue只是一个mvvm,以数据驱动为主导思想的view层解决方案,区别于原生JS与JQuery的DOM驱动,它只是一个js库,不是框架,与jquery地位和定位相同,可以在传统开发中使用,并不只有工程化场景可以使用vue。
vue-cli是基于vue的工程化框架,本质是预配置webpack项目模板。一个常见的vue前端工程的基本技术栈组成为vue-cli+ vue+vue-router+vuex+axios+任一基于vue实现的UI框架,如element,vue-antd等。

ES6,node和vue

ES6即ECMAScript2015,是标志Javascript现代化的重要语法标准版本,但需要注意的是,我们常说的ES6,包括但不限于2015,实际指的是从2015年往后已经被现代浏览器支持的JS语法特性。
ECMAScript可与JAVA/JDK做类比,两者之间主要区别在于,js无需本地运行环境,js依托浏览器或node。这也意味着,ECMAScript的某一版本,某一特性是否可行,取决于特定版本的浏览器或Node是否支持该特性
node虽然是前端现代化开发的基石,但因为node的诞生远早于ES6的发布,故Node有自己的一套实现,如在模块导入导出上使用commonJS,区别于ES6 module。Node至今仍未完全支持ES6语法,必要时需要使用babel进行转义。
vue自2.0版本以后,就极力贴靠ES6,并推荐开发者,尤其是在使用vue-cli进行开发时,使用ES6语法。
实际上,当前主流的三大框架都有自己的一套JavaScript语法:angular+typescript,react+typescript/ES5+ES6,vue+ES6.

结语

本文讲述的是最常规的前后端分离与前端工程化架构,实际上,node中间件+PC端SSR+移动端跨平台开发正在替代常规的前后端分离+无差别SAP+hybrid模式.
但技术终归是服务于需求的,选择怎样的架构,因场景,因团队而异。适合适用就是最好的,能得到甲方认可,能有市场占有量的产品就是好产品。工作安安心心,快快乐乐就是好工作。前沿技术和好产品,好工作并没有直接关联。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值