前后端分离实践(试探篇)

按照以往的开发模式,前端人员制作好静态页面交给与后端人员进行动态嵌套开发。迭代模式带来一系列问题,静态页面套成动态后,一些操作、业务、模版技术等动态页面已经跟静态页面有了一些差距。这时候前端人员改了一个BUG,或者叠加了一个功能,后端人员就必须向前端人员了解更改的范围,再叠加,由于都是人为过程,带来很多困扰,开发效率也很低。

当前后端页面以及逻辑没有合并之前,测试人员面临等待的问题,能否让测试与开发并行也是我们需要考虑的一个问题。

这时候我们想到了,能否以暴露服务的方式把java的接口暴露出来交给前端人员进行使用,后端人员关注数据接口,前端人员负责页面逻辑,调用数据使用模拟的方式。当然,这其中我们需要前后端俩者之间的数据约定。而测试在理想状态下只需要测试好接口和前端的页面即可。

在之前的业务系统中,大部分用flex进行开发。有了flex的经验,很容易让我们想到,它就是一个前后端分离的很好的实践。但是由于它过于笨重,加载速度无法满足,产品开始转型到html。这时候,我们想到了前后端分离的例子就是SPA(Single-page application),所有用到的展现数据都是后端通过异步接口(AJAX/JSONP)的方式提供的,前端只管展现。

在上述的问题中,自己开发的分布式异步调用框架eos诞生了,在它的驱使下,我们的系统到处都是ajax或jsonp。后端人员很轻松的将Service暴露为web rest接口,前端人员通过ajax进行调用渲染。紧接着我们踏进了angular的殿堂中,在eos的支持下,调用接口服务非常轻松。

但是先不说angular的笨重侵入性,可能我们需先考虑的是SPA这种方式的可行适用性:

(1)这种方式是浏览器端渲染的方式:需等待模版在浏览器端载入完成后才开始渲染,首次进入会有白屏等待渲染的时间,不利于用户体验;重要内容都在前端组装,不利于SEO。

(2)想象一下这个场景多么美好:前端来决定某个模板是服务端渲染还是客户端渲染,当首屏的时候,服务端直接生成HTML,不是首屏的时候,就AJAX过来在浏览器端渲染展示。但是SPA做不到,它需要后端会帮忙处理一些展现逻辑,这就意味着后端还是涉足了View层的工作,不是真正的前后端分离。所以,很多场景下还有同步/同步+异步混合的模式,SPA不能作为一种通用的解决方案。

还能不能愉快地码代码呢?我们只是想专注做自己的事情!

前端组组长一直在摸索公司前端如何做下去,有一天,他带着百度的FIS(不懂的fis自己问度娘吧)来找我,要我支持下后端部分。fis看起来挺不错的一套前端解决方案,是一系列的工具。基于它有几种解决方案,他选择了jello,此方案事实上就是让前端写java端的模版代码。稍微测试一番,jello确实是与fis配合起来了,也把模版和部分页面逻辑交给了前端自行处理。但是还是存在问题,java人员需要编写控制器代码,而前端人员的业务逻辑跳转一定依赖于java人员给编写的控制器。前后端还是存在着交集。

这时候,我想,如果直接把java人员写的控制器交给前端人员写呢?想起了之前看过的淘宝”中途岛“项目的文章(前后端分离的思考与实践)。前端负责View层与Controller层,后端负责Model层,业务处理/数据。其实,也就是类似把java spring mvc的vc交给前端人员,但是不可能让前端人员去学习java,再看nodejs如火如荼的发展,想想要是把node作为后端,让前端来写也是说得过去的。果断上fis看了下几个解决方案,发现其中有一个基于nodejs开发的框架yog,最后决定试水。

这也是一次大胆的试水,因为都没有接触过nodejs,我们用它需要知道几个问题:

(1)node是否足够稳定?学习成本呢?

从目前来看,node热度充足,已经有很多案例。学习上,前端人员还是一样学习js,多了解node的一些机制以及web后端的session,cache,分布式等控制,门槛不算高。

(2)如何调用java服务接口

目前,基于自己开发的eos,实现node-eos进行服务调用,调用也是方便不复杂。

(3)一些原有的java组件,如何对接

如果node已经有对应的工程模块,那直接使用,如果没有则需要自己适配。大部分可以通过eos的java服务调用方式,java开放出服务接口给予使用。

最终,借用几张效果图来表达整个结构:

其实,并没有绝对的事情,个人认为,此方式也要根据公司资源配置进行选择。当分离出来后,前端人员门槛变高了,比例人员也要多,前端压力大了。如果一直要较真再分下去,或许有以后的话,前端工程师本身又自然会分化成纯前端和nodejs工程师,那又是变成前端的前后端了。总之,还有很多事情需要解决,我们只是试探学习罢了~

时间: 2024-10-10 06:46:50

前后端分离实践(试探篇)的相关文章

基于 koajs 的前后端分离实践

一.什么是前后端分离? 前后端分离的概念和优势在这里不再赘述,有兴趣的同学可以看各个前辈们一系列总结和讨论: 系列文章:前后端分离的思考与实践(1-6) slider: 淘宝前后端分离实践 知乎提问: 如何评价淘宝 UED 的 Midway Framework 前后端分离? Web 前后端分离的意义大吗? 尤其是<前后端分离的思考与实践>系列文章非常全面的阐述了前后端分离的意义和技术实现.如果不想看上面的文章,可以在脑海里留下这样一个轮廓就好: 本文主要阐述趣店团队基于Koajs的前后端分离实

从.NET到Node.js谈前后端分离实践(by vczero)

一.最初的[无分离]实践 11年末的时候,用winForm开发程序,拖拖控件,点点按钮,连接数据库,做一些基本的管理系统:Java的JSP还能包揽一切,服务器端拼接模板,顶多使用servlet做一些业务逻辑,做到后端的MVC.那时候,带了一个学校的创新团队,做一些项目,但是基本上是一个人前端后一起搞,现在想想,真是[杂乱无章],后端MVC还好,倒是前端,基本上只能做一些简单效果,施展的空间不大,幸好,也基本能完成项目. 我称之为[无分离]实践,如果是像一个人搞,开发速度倒是挺快的. 前后端无分离

前后端分离实践:基于vue实现网站前台的权限管理

Javascript做为当下的热门语言,用途很广泛,从前端到后端处处可见其存在,该技术如今在我们项目内部也大量使用来开发诸如CMS系统以及其他其他一些数据分析系统的前端页面,为此个人非常感兴趣并将其作为帽子卡的扩展内容来进行课余学习. Javascript框架鳞次栉比,但基本原理大致相同,因此选用国内人开发的vue.js进行一个初步的尝试.学习vue.js也一周多的时间了,说起vue的主要用法,无外乎Declarative Rendering.Component System.Client-si

前后端分离实践(一)

前言 最近这一段时间由于Nodejs的逐渐成熟和日趋稳定,越来越多的公司中的前端团队开始尝试使用Nodejs来练一下手,尝一尝鲜. 一般的做法都是将原本属于后端的一部分相对于业务不是很重要的功能迁移到Nodejs上面来,也有一些公司将NodeJS作为前后端分离的一个解决方案去施行.而像淘宝网这类的大型网站也很早的完成了前后端的分离,给我们这样的后来者提供了宝贵的经验. 同样,我们的大网盘团队也早在去年早早就开始了紧锣密布的准备工作,这目前工作也做的差不多了,现在我就来总结一下在过程中遇到的坑点以

前后端分离实践

前后端分离并不是什么新鲜事,到处都是前后端分离的实践.然而一些历史项目在从一体化 Web 设计转向前后端分离的架构时,仍然不可避免的会遇到各种各样的问题.由于层出不穷的问题,甚至会有团队质疑,一体化好好的,为什么要前后端分离? 说到底,并不是前后分离不好,只是可能不适合,或者说--设计思维还没有转变过来-- 一体式 Web 架构示意 前后分离式 Web 架构示意 为什么要前后端分离 比为什么要前后端分离更现实的问题是什么时候需要前后端分离,即前后端分离的应用场景. 说起这个问题,我想到了 201

前后端分离实践【转】

前言 为了解决传统Web开发模式带来的各种问题,我们进行了许多尝试,但由于前/后端的物理鸿沟,尝试的方案都大同小异.痛定思痛,今天我们重新思考了“前后端”的定义,引入前端同学都熟悉的NodeJS,试图探索一条全新的前后端分离模式. 随着不同终端(Pad/Mobile/PC)的兴起,对开发人员的要求越来越高,纯浏览器端的响应式已经不能满足用户体验的高要求,我们往往需要针对不同的终端开发定制的版本.为了提升开发效率,前后端分离的需求越来越被重视,后端负责业务/数据接口,前端负责展现/交互逻辑,同一份

前后端分离实践一

在开始讨论这个话题之前我们先来认识一下传统的开发模式. 一.传统开发模式 相信很多做过Web开发童鞋应该都会经历这样一种开发模式,利用后端语言提供的模版引擎编写HTML/XML页面,比如: PHP 开发有 Smarty模板引擎 Java web工程有jsp页面 Python 各个Web框架都有各自的模板引擎 NodeJS 的express你懂得 都有一个共同的特点,服务器端后台语言生成解析后的HTML/XML格式返回给客户端,例如浏览器端访问直接返回解析好的HTML,浏览器直接就解释执行. 二.

浅谈前后端分离与实践(一)

一.起源 (故事纯属虚构,如有雷同,纯属巧合)传说在很久很久以前,我们有志之士有了个创业的想法,于是乎开始了自己的创业之梦,但是人手不足啊,于是乎所有角色老子一个人全包了: Roles: PM, DBA, RD, FED, Designer, ... Skills: Linux, MySQL, JAVA, JavaScript, HTML, CSS, ... Tools: phpmyadmin, photoshop, powerpoint, ... 我们用 express 应用生成器来模拟一下传

移动端开发者眼中的前端开发流程变迁与前后端分离

写在最开始 移动端与前端的区别 前端开发的混沌时代 后端 MVC MVC 方案实现 MVC 的缺点与改进 前端只写 Demo HTML 模板 后端 MVC 架构总结 AJAX 与前端 MVC 前后端分离的缺点 双端 MVC 不统一 SEO 性能不够 集中 Or 分离 Nodejs 前后端分离的哲学 Nodejs 分层 实战应用 风险控制 总结 参考资料 写在最开始 这是一篇面向移动端开发者的科普性文章,从前端开发的最初流程开始,结合示范代码,讨论开发流程的演变过程,希望能覆盖一部分前端开发技术栈