前端框架思路探讨

作者: 不鲲 | 来源:发表于2019-07-18 15:26 被阅读11次

前后端的技术已经发展了很多年了,但是我们有很多问题或者很多思考的高度依旧是在围绕工程打转,比如实现某个效果的页面。我尝试站在时间的长河边,去思考一下前端和后端技术发展的方向问题,并给出一些未来前端的发展方向。

一、网站发展简史及语言职责
让我们回顾一下网站开发的一些历史:

  1. 静态网页 (html)
  2. 动态网页(php, jsp)
  3. 前端技术产生(applet, javascript)

从上面这段历史,我们能看整个网站的开发核心是html,后端和前端技术均是为了丰富html而逐步发展起来的。下面我们来看看各种web相关的语言所负责的职责:

名称 职责 备注
html 负责web页面的结构 因为该原因,<font>,<color>等标签逐步退出历史舞台
css 负责web页面的样式
js 负责web页面的交互
后端(java,php,node等) 负责页面的数据

从这个职责表中,我们可以看出每种语言各司其职,整个系统运转很完美。但是细究内容,我们会发现有一件事件是在前后端发展史上一直争斗不休的问题,是一个绕不过去的问题: data -> html,一般我们也称之为渲染。渲染问题是一个较复杂的问题,而且涉及到整个web中的各种语言,是矛盾的集中产生地,针对渲染的问题,目前有三种解决方案:

方案 代表技术 描述 优点 缺点
后端负责渲染 php, jsp等 由后端将数据等生成html,js仅负责页面交互 1.技术成熟2.逻辑简单,数据直接通过内存传递3.利于爬虫 1.前端需要了解后端语言,对前端极不友好2.代码耦合紧密,不易维护3.消耗服务器资源
第三方负责渲染 smarty, twig等 在后端与前端之间引入第三方模板系统,来解决渲染问题 1. 前后端解耦 2.对爬虫友好3.逻辑简单 1.前后端都需要再学习一门模板语言2.消耗服务器资源
前端负责渲染 vue, react,angular等 后端所有的数据都通过接口来传递,js拿到数据后负责渲染,将数据生成为html 1.前后端开发简单 2.服务器压力降低3.代码拆分,解耦 1.对爬虫不友好 2.数据传递很复杂3.技术不成熟4.渲染成为前端开发的主要矛盾

此处,我无意讨论哪种方式好或者哪种不好。各种模式均有其适用的场景和环境,因此,我们可以根据实际情况来选择。但本质上我还是想说的事情是:渲染是前后端模式中的一个核心问题:既然html代表页面的结构,那么页面结构到底是由data决定还是由样式和交互来决定?

二、vue等框架的核心问题

2.1 前端框架发展历程
下面,我们来看看前端框架的发展历程

  • javascript 原生js
  • 工具集:jquery
  • mvc框架: BackboneJs, EmberJs等
  • mvvm框架:vue等

2.2 框架设计的思路
正常框架设计时应该是针对某一类问题,找到这类问题的主线,通过各种设计模式和代码复用,解决主线;当我们解决了主线时,之前的支线会成为主要矛盾,然后重复上述过程。
那么,我们来看一下,早期前端开发的主要矛盾:

1、jquery时代。
页面由后端渲染生成,js的主要的开发问题为: 给dom/页面加上侦听事件,等待事件发生,处理事件(主要有ajax, dom操作等)。

2、 vue。

  • 整个页面在第一次请求后,被vue接管。
  • vue根据url或用户操作,获取数据,渲染为html。
  • vue加上侦听事件,等待事件发生,处理事件。

所以,我们从vue可以看出,vue极大地解决了之前jquery时代中所遇见的dom操作,事件绑定的问题,使得vue比jquery在处理此类事件时,要便利很多。但是与此同时,也给前端带来了新的工作——渲染。

渲染这项工作是极为复杂的,后端曾经花了极大的精力来解决该问题。但是,当渲染被前端接手后,前端并没有认真去考虑如何来解决该问题,它逐步变成一个大麻烦,在不断侵蚀前端工程师的美好年华。

三、渲染的解决之道
3.1 后端框架的一般过程

后端框架一般过程
  • 用户通过浏览器发送请求给服务器
  • 服务器会将请求通过路由分发到某一个controller/Action。
  • Controller/Atcion通过Model从数据库中获取数据。
  • 通过View来渲染数据。
  • 最后Controller/Action将渲染后的数据返回给用户

3.2 前端渲染时的逻辑结构
有vue之后,我们来看一下整体的逻辑结构图:


vue逻辑结构
  • 用户先获取带有vuejs的基本页面,整个页面被vue接管.
  • 用户的操作被controller接管
  • controller通过http等获取数据
  • 通过view来渲染数据,最终呈现给用户。
  • controller保持侦听事件,等待特定事件发生。

我们可以看见,与后端渲染时,基本是同一个图形,唯一的不同就是把数据库连接换成http连接,而vue是没有Model的。

vue框架是有controller, viewModel(data),view的,但是vue框架少了最重要的一层Model层,而Model层正是整个系统中的业务逻辑聚集地,导致我们不得不把业务逻辑散乱地放置于Controller中。虽然vuex能部分地解决问题,但是并没有从根源上来解决。因此,要解决渲染的问题,Model层或者说数据层是极为重要的一层。

具体的解决方法和实现下一次再讨论。

相关文章

  • 前端框架思路探讨

    前后端的技术已经发展了很多年了,但是我们有很多问题或者很多思考的高度依旧是在围绕工程打转,比如实现某个效果的页面。...

  • php自定义字段导出表格

    主要说一下前端插件和后台思路 前端框架layui所用组件 formSelects-v3/formSelects-v...

  • 【前端】使用Flask框架探讨HttpOnly

    前言 在学习Web安全中发现一些感觉比较常见又重要的知识,这里就做下笔记。这一片是讲解关于HttpOnly的知识。...

  • Backbone设计思路和关键源码分析

    一. Backbone的江湖地位: backbone作为一个老牌js框架为大规模前端开发提供了新的开发思路:前端M...

  • 浏览收藏文章列表

    前端 frameset frame前端框架支持ie8选择前端框架选择2前端框架选择weexframeset,fra...

  • 一个知乎Live报告的总结

    这个报告是Vue作者尤雨溪在知乎Live的报告,梳理目前前端趋势及前端框架的看法,整个Live思路清晰、酣畅淋漓。...

  • 0331| 前端技术杂感

    这篇是跟大梦君的探讨。大梦觉得目前流行的前端框架技术含量不够,并且很快大部分框架都会被淘汰掉,所以没必要去学它们,...

  • 微信小程序学习回顾-1.2.1-【零基础】

    前端开发工具准备(微信开发者工具)基础知识:代码框架前端实现思路梳理各功能页面开发实操 基础知识 * 项目新建 下...

  • 微信小程序学习回顾-1.1-【零基础】

    前端开发工具准备(微信开发者工具)基础知识:代码框架基础知识:API前端实现思路梳理各功能页面开发实操 工具准备 ...

  • 前端框架有哪些?

    自 6 月份 前端结构 の 里程碑(v3) 过去了半年,在实际应用中,还有不少问题暴露;自两周前开始探讨前端框架以...

网友评论

    本文标题:前端框架思路探讨

    本文链接:https://www.haomeiwen.com/subject/dthrkctx.html