Blog

Blog

PHODAL

前端框架选型续 && 分享下使用 Backbone、Vue、Angular、React 的经验

上周,知乎上有几篇关于 Angular 和 Vue 对比的文章。本来想着的是,这些文章倒是可以指导下新手,作一些技术选型。可遗憾的是,开始的文章失去了一些偏颇,后面的文章则开始了一些攻击性行为。慢慢的,整个知乎上便是充满了一些戾气,开始了无尽的网络暴力。

于是,我想分享一下之前使用这些 MV* 框架的经验。

前端的摩尔时代

同样吧,在上周结束了《Expert Angular》的审校,这是第三本为 Packt 出版社审校的 Angular 的书。然后,先让我来讲个故事:一年前我开始审校的这本书,当时是基于 Angular 2 beta.4 写的,当时的书名叫 Mastering Angular 2。后来 Angular 2.0 正式版大改,作者们就重新改写代码,书名就改成了 Mastering Angular。完了 Angular 4 出来了,而 Angular 5 也进入了 Beta 版本,因此书名改叫成了《Expert Angular》。 ​​​​

由此可见,前端在这一个时代的变化之快。

场景一:在没有 AVR 时代的 Backbone

刚开始编写大型前端应用的时候,学习的是 Backbone。因为并没有一个好的 MVC 框架,在当时的情况下,仍然是最适合的选择。在当时来看,算是比较早的移动 SPA 应用,也具有它的一系列问题。

对于我们而言,采用 Backbone + jQuery + Spring 有几个明显的问题:

jQuery 带来的散弹性架构问题。

一个 Backbone.View 则需要“继承”(extend)从

对于一个复杂的应用,他则会出现一个 PageView,ListPageView 这样的页面,而 ListPageView 则“继承”自 PageView,PageView 则 “继承”自 Backbone.View。在一些复杂的情况下,还会有 SubListPageView 这样的情况。

如我们所知,JavaScript 并不是一门完整面向对象语言。尽管,我们在写代码的过程中,由于 Code Diff 和结对编程的存在,减少了一些潜在的问题。

在前端还没有 LifeCycle 的概念之时,我们在原始的 View 里采用了 LifeCycle的设计。而在下一层 View,PageView 中则会继承这样的设计,以此类推。

这样的设计,看上去似乎并不存在问题。可当我们需要操作 DOM,我们就会用到 jQuery/Zepto。这个时候,除了当时移动端的手机性能问题。还有一个问题是,排查哪个 View 中操作了 DOM 变成了一件极其困难的事。

全局搜索相应的 ID,再寻找其继承关系,一一调试过来。而除了每一层 View 的关系外,还有在全局中会对一些 DOM 进行处理。

当你在某一层级修改了DOM 的时候,我只能祝你好运了

而在新的 MV* 框架里,则可以使用模块化来解决问题。

前后端两次渲染的复杂度

Java 在后台渲染 Mustache,而 Mustache.js 则也使用同一个模板。我们所需要做的,便是在构建的时候,只需要用 require.js 将 Mustache 模板文件打包。

与今天的 React 后台渲染类似,API 以 JSON 的形式嵌入在 HTML 中。可与 React 的同构不一样的是,在 Mustache 和 Java 之间同步状态,并不是一件容易的事。

每当新加一个状态,便需要使用 Java 修改 ModelAndView,并启用一个新的 API,这个时候即要修改前端的框架,又要修改大量的后台测试。

除了此, 我们还需要考虑到,用户刷新页面的情况。当用户由在产品详情页,刷新页面时,我们需要将一些数据,通过 URL hash 传递到后台,然后解析 blabla。等这些完了,还要考虑将这个状态再传到前端。

这简直是一场噩梦,对于我们这种全功能团队来说还好,自己上手修改代码就完了。可一旦前后端分离,那你祈祷后端愿意帮你修改。

场景二:使用 React 重构(重写)

随后,我们开始计划使用 React 来重写应用,它能很好地解决我们上面遇到的问题。

我们是在 React 初期采用这个框架的,所以操作起来并不会像今天这么顺利。我们在实现原型系统的时候,需要自己去实现一个又一个的组件。而由于我们的系统,本身就已经是前后端分离,使用 React 对于我们而言,便像是使用新的框架来重写旧的业务。从业务价值来说,并没有太大意义。

不过,这个框架当时主要是用在桌面端版本上的,后来进行响应式设计便也用到了移动应用上。

再说说前后端渲染

React 的同构,能解决前后端渲染带来的问题。可是在当时来看,React 后台渲染所依赖的 Node.js 并没有那么“可靠”,其生态也没有现在完善。

除了直接使用 Node.js 渲染,我们还测试过的一种方案是,直接生成对应静态的页面。其数据量大概在一百万左右,一次生成这么多的数据是一种极大的挑战。测试方案时,采用 Node.js 运行服务,然后用 Scrapy 爬取对应的数据,生成对应的 HTML。完成生成代码后,编写对应的 Message Queue,其将根据后台数据库的增、删、改来生成、删除、重新生成相应的 HTML。

没等项目完,我就换到一个新的项目。在新的项目里,采用的是 Angular。

场景三:Angular 实现桌面端与移动应用代码复用

2015 年底,在移动应用领域,能满足人力成本低、跨平台、速度快的框架中,就要数 Ionic + Cordova + Angular.js 的混合应用方式。而对于传统公司来说,他们有大量稳定的后台程序员,因而采用 Angular 这样的方案也更容易上手。

代码复用

Ionic 1.x 是基于 Angular 1.x,由于在 Web 端也采用了 Angular。这样做不仅从统一了技术栈,还实现了某一部分的代码复用

一般的情形下,当两端的业务是一致的,那么必然有大量 Angular.js 的 servicesfactory 可以复用,甚至是共用模块。再针对性的,编写相应的响应式布局,就大功造成了——参考场景二的例子。

由于移动应用需要调用某些原生接口,如日志,如 Toast 等等,那么总体上的差异还是蛮大的。可由于移动端业务与桌面端存在不一致,这仍是一个 Desktop First 的项目。在这样的项目里,移动端只有简单的查询等功能。

那么,对于我来说,有一些 servicescontroller 的逻辑就是:Ctrl + C 和 Ctrl + V 就能迅速解决一大半了。剩下的就是,匹配不同尺寸设备的 UI 和使用原生组件优化。

演进

后来,桌面端从 Angular 1.x 迁移(重写一部分)到了 Angular 4.x,旧的应用还运行在旧有的 Angular 1.x 代码上,而新的应用则运行在新的系统上。

而移动端则如我之前的文章所说,React Native + WebView。React Native 编写新的业务,而旧的业务代码则以 WebView 的形式继续运行着。个中缘由,主要是人力不够。

为什么 Angular 在选型里失去优势?

在 Angular 1.x 到 Angular 2.x 这段期间里,有大量的技术人员因为奥斯本效应而选择了其他框架。

奥斯本效应,在IT业界有一个比较出名的“奥斯本效应”(Osborne Effect),源于电脑先驱亚当·奥斯本。在1980年初,颇受欢迎的个人电脑厂商奥斯本,其公司的创新式便携电脑还没有上市,就宣布他们要推出的更高档的机器,而又迟迟无法交货,消费者闻风纷纷停止下单订购现有机种,最后导致奥斯本因收入枯竭而宣布破产。

而 Angular 2.x 在 beta.5 作死的 API 大改,也导致了一部分用户离开,好在最后 Angular 2.x 活了过来。

场景四:Vue 快速上线

在上半年里, 由于某个业务需要,我需要创建一个新的移动 Web 应用:几天内上线是一个小的功能。因为只有两三天时间,我直接排队了 React,我相信没有一天的时间,我是 Setup 不好 React 全家桶的。而 Angular 也被我排除了,因为它要构建出包发布,从流程规范上比较麻烦。最后我选择了:Vue + jQuery + WeUI。

Vue 引入 vue.min.js 就可以使用了,直接拿代码库就可以发布了,不需要打包。不过直接把 Vue 的模板嵌入到 HTML 与 jQuery 的 ID 直接使用起来。虽然方便,但倒也是一场噩梦。要是变成了散弹式架构,那么可就是一堆麻烦。

Vue 大法好啊~。

场景五:Dili

https://github.com/phodal/dili To be continue....


或许您还需要下面的文章:

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《全栈应用开发:精益实践》

这不是一本深入前端、后台、运维、设计、分析等各个领域的书籍。本书以实践的方式,将这一系列的领域及理论知识结合到一起,来帮助读者构建全栈Web 开发的知识体系,并辅以精益及敏捷的思想,来一步步开发Web 应用:从创建一个UI 原型到编写出静态的前端页面;从静态的前端页面到带后台的应用,并部署应用;从Web 后台开发API 到开发移动Web 应用。在这个过程中,我们还将介绍一些相辅相成的步骤:使用构建系统来加速Web 应用的开发;为应用添加数据分析工具来改进产品;使用分析工具来改善应用的性能;通过自动化部署来加快上线流程;从而帮助读者开发出一个真正可用的全栈 Web 应用。同时,我们也将帮助读者把这些步骤应用到现有的系统上,改进现有系统的开发流程。

comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

InfoQ社区编辑,CSDN前端博客专家

毕业于西安文理学院电子信息工程专业

长期活跃于开源软件社区 GitHub,专注于物联网和前端领域。

著有《自己动手设计物联网》(电子工业出版社)、曾作为技术专家审阅英国 Packt 出版社的物联网书籍《Learning IoT》、《Smart IoT》等书。

在 GitHub 开源有《Growth:全栈增长工程师指南》等六本电子书,并译有《物联网实战指南》。

联系我: h@phodal.com

标签

最近的一些事