前后端分离时,浏览器端渲染的好处与呈现逻辑

在传统的开发模式中,浏览器端与服务器端是由不同的前后端两个团队开发,但是模版却又在这两者中间的模糊地带。摆脱业务逻辑与呈现逻辑在Java模版引擎中的耦合与混乱。重要内容都在前端组装,不利于SEO反思前后端的定义因此我们有机会做到模版与路由的共享,也是一个前后端分工中最理想的状态。在传统的开发模式中,浏览器端与服务器端是由不同的前后端两个团队开发,但是模版却又在这两者中间的模糊地带。有了,后端同学可以在JAVA层专注于业务逻辑与数据的开发。而前端同学则专注于控制逻辑与渲染的开发。

前言

在做前后端分离的时候,首先关注的是渲染,也就是View级别的工作。

在传统的开发模式下,浏览器端和服务器端由不同的前后端团队开发,而模板则处于两者之间的模糊地带。因此,模板上必然会出现越来越复杂的逻辑,最终难以维护。

我们选择它作为前端和后端之间的中间层。尝试使用 , 来简化视图级别的工作。

让前后端划分更加清晰,让项目更好的维护,达到更好的用户体验。

本文

渲染在前端开发者的日常工作中占据了非常大的比例,也是最容易和后端开发混淆的地方。

回顾这几年前端技术的发展,View层面的工作发生了很多变化,比如:

表单整页刷新 => AJAX 部分刷新服务端连续染色 + MVC => 客户端渲染 + MVC 传统页面变化跳转 => 单页应用

可以观察到,近年来,大家都倾向于将渲染从服务器端转移到浏览器端。

服务器端专注于服务,提供数据接口。

浏览器端渲染的好处

浏览器端渲染的好处,大家都知道,比如

摆脱Java模板引擎中业务逻辑和渲染逻辑的耦合和混乱。对于多终端应用,在表单中进行接口更容易。在浏览器端使用不同的模板来呈现不同的应用。页面渲染不只是html,前端渲染可以更方便的以组件的形式(html+js+css)提供功能,让前端组件不需要依赖生成的html结构服务器。摆脱对后端开发和发布流程的依赖。方便联调。浏览器端渲染的缺点

但是在享受好处的同时,我们也面临着浏览器端渲染的弊端,比如:

模板在不同的库中分开。一些模板放在服务器端(JAVA),而另一些放在浏览器端(JS)。前后端模板语言不兼容。在渲染开始之前,您需要等待所有模板和组件加载到浏览器端,并且您无法立即看到它们。*** 进入时会有白屏等待渲染时间,不利于用户体验。开发单页应用时,前端不匹配服务端,处理起来很麻烦。重要内容集中在前端,不利于SEO对前后端定义的反思

其实回过头来看,当我们把渲染工作从服务端(Java)提取到浏览器端(JS)的时候,我们的目的只是明确前后端职责,而不是浏览器渲染。

正因为在传统的开发模式下,浏览器走出了服务器,所以前端的工作内容只能局限于浏览器。

所以很多人认为后端=服务器前端=浏览器端,就像下图一样。

前后端分离seo怎么办_为什么前后端分离无法seo_前后端分离怎么做seo

在淘宝UED目前的项目中,通过在JAVA中间搭建一个中间层,尝试根据工作职责,根据硬件环境(服务器&浏览器),将前后端分界线分开设备)。

因此,我们有机会共享模板和路由,这也是前后端分工中最理想的状态。

淘宝中途

在 项目中,我们将划分前端和后端的线从浏览器端移回了服务器端。

前后端分离怎么做seo_为什么前后端分离无法seo_前后端分离seo怎么办

有了一个易于前端控制并与浏览器共享的层,可以更清晰地完成前后端分离。

前后端分离怎么做seo_前后端分离seo怎么办_为什么前后端分离无法seo

您还可以让前端开发人员针对不同的情况决定最合适的解决方案。而不是在浏览器端处理所有事情。

责任分工

不是前端试图抢占后端工作的项目。目的是为了将模板的模糊区域切得很清楚,得到更清晰的职责分工。

而不是坚持服务器端或浏览器端之间的区别。

模板共享

在传统的开发模式下,浏览器端和服务器端由不同的前后端团队开发,而模板则处于两者之间的模糊地带。因此,模板上必然会出现越来越复杂的逻辑,最终难以维护。

有了这个,后端同学可以专注于JAVA层的业务逻辑和数据的开发。前端学生专注于控制逻辑和渲染的开发。并选择这些模板是在服务器()上呈现还是在浏览器上呈现。

使用相同的模板语言,相同的渲染引擎

相同的结果在不同的渲染环境(-side, PC, , Web View等)渲染。

路线共享

也因为这一层,可以更详细地控制路由。

如果需要在前端做浏览器端路由,可以同时配置服务端路由,这样浏览器端换页或者服务端换页都能得到一致的渲染效果。

还处理SEO问题。

模板共享的实践

通常我们在浏览器端渲染模板时,流程无非就是

在浏览器端加载模板引擎(、、、等)。在浏览器端加载模板文件。方法可以是获取数据,使用模板引擎生成html,将html插入到指定位置。

从以上流程可以看出,为了实现模板的跨端共享,重点其实是一致的模块选择。

市面上流行的模块标准有很多,比如K​​MD、AMD,只要能通过一致的模块规范将模板文件输出到底,就可以做到基本的模板共享。

后续系列文章将针对并分享,以供进一步讨论。

案例分析

因为的中间层,对过去的一些问题有更好的答案,比如说

案例1 复杂交互应用(如购物车、订单页面) 案例2 单页应用案例3 纯浏览页面案例4 跨终端页面总结

过去,AJAX、-side MVC、SPA、Two-way Data等技术的出现,就是为了解决当时前端开发遇到的瓶颈。

中间层的出现,也是对解决当前前端仅限于浏览器端的局限的一次尝试。

本篇主要是前后端模板的分享,也希望能够吸引大家和大家一起讨论如何改进我们的工作流程,以及如何在中间的架构下与后端配合层做前端工作。更好的。

原文链接:

免责声明:本文来自网络用户投稿,不代表本站观点和立场。如有侵权请发送邮件至tzanseo@163.com告知本站删除,本站不负任何责任及承诺。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

发表评论

登录后才能评论