网易视频云:前后端分离实践

本文分享了网易视频云的前后端分离实践经验,从糅合到独立运作的演变过程,探讨了为何要进行前后端分离,以及如何通过Node.js实现前端工程化。

  现在,网易视频云与大家分享一下前后端分离实践。

  背景

  前后端分离的实践经历了糅合、分工协作、独立运作等阶段。

  糅合

  前后端混合开发,样式、脚本杂糅于HTML中,业务较为单一,难以扩展,适用于小型项目或Demo原型展示。

  分工协作

  可进一步细分为两个阶段:初期,前端实现切图、页面制作、交互实现后,交由后端套页面,异步AJAX部分根据业务制定接口,前端负责数据的模拟,实际页面和接口测试由服务端进行。后期,开始采用模块化、MVXX等方式,承接更多后端展现层业务;数据模拟方面,以Apache、Nginx等为媒介,多以PHP等方式模拟服务端响应。此时,“工程化”概念开始引入前端。

  独立运作

  随着node.js的发展、成熟,其相对于传统语言的先天性优势,加之对前端人员的友好性,使得其在前端界渐渐占有一席之地,并逐渐在其他领域攻城掠地。结合开发、测试、数据模拟、调试等等流程,逐渐形成一整套完整的解决方案,“前端工程化”开始深入人心,成为Web开发必备。

  为什么分离?

  回顾过去的开发流程,可以发现当中存在的协作、沟通、效率上存在的不少问题:

  1.后端套页面需要了解HTML,之后仍然需要前端进行确认;

  2.而前端实现view层,需要熟悉服务端语言和架构;

  3.前端依赖服务端开发环境,调试、维护成本突出;

  4.页面上的强耦合缺少灵活性,无法应对业务、需求的快速迭代;

  5.前后端职责不清晰,沟通成本高,且容易引入问题;

  6.工程化实践较为困难。

  因此,基于踩过的种种坑,需要采取一种更为合理的解耦的方式,前后端分离开始进入研究范畴。

  网易视频云采用的分离方式

图片描述

  为解决后端套页面的问题,视图层交由前端负责,并提前制定接口,确定交互方式。开发环境上,前后端隔离,后端依然Java+Tomcat,前端转由Node.js,但鉴于模板渲染同服务相关,因此,前端引入ftl的渲染机制,即可解决环境的依赖问题。至此,结合压缩、合并等常规工程化实践,便实现了完整的前后端分离解决方案。

图片描述

  方案的改进

  以上方式虽然实现了分离,分工和协作上也进行了解耦,能够顺畅地承接整个迭代开发过程,但前端人员仍需要额外了解、学习FreeMarker等内容,对于新人需要一定的时间成本。同时引入Node.js对其的解析,相应地增加一部分构建开销,对前端人员并不友好。

  因此,若能够进一步改进为淘宝等的架构方式,实现视图层的Node.js替换,不失为一种良策。其所带来的优势除去QPS的显著提升外,可大为减少前后端开发、协作的成本,实现真正的跨终端RESTful架构。

课程的战源码是我在 GitHub 上开源项目 spring-boot-projects 中的其中一个项目代码,目前已有 2300 多个 star,项目截图如下: 由于项目比较受大家欢迎,因此心中就出现了将它做成教学视频的想法,也就是你现在了解的这个课程《SpringBoot入门及前后端分离项目开发》,本课程是一个 Spring Boot 技术栈的战类课程,课程共分为 3 大部分,前面两个部分为基础环境准备和相关概念介绍,第三个部分是 Spring Boot 项目实践开发。Spring Boot 介绍、前后端分离、API 规范等内容旨在让读者更加熟悉 SpringBoot 及企业开发中需要注意的事项并具有使用 SpringBoot 技术进行基本功能开发的能力;这最后的项目战为课程的主要部分,我会带着大家际的开发一个前后端分离的 Spring Boot 实践项目,让大家际操作并从无到有开发一个线上项目,并学习到一定的开发经验以及其中的开发技巧,旨在让读者具有将 Spring Boot 真正应用于项目开发的能力; 以下为实践项目的页面和功能展示,分别为:登录页面 列表页面(分页功能) 图片上传功能 富文本编辑器整合使用 实践项目的主要功能和页面就是这些,通过项目展示大家也能够感受到,在际应用开发中的高频次功能都已经现,稍加修改就可以运用到企业开发中,整个项目的开发模式为前后端分离的模式,即 Spring Boot 提供后端接口,前端页面通过 Ajax 异步调用接口的方式与后端服务器进行交互并将数据填充至页面中,这也是目前企业开发中比较重用的开发模式,希望大家能够了解并且能够际的上手开发。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值