前端学习笔记

Backbone 与 React比较

概念上

Backbone 是一个经典的前端mvc framework ,而React 仅仅是一个构建可组合的UI Component的lib,一种全新的前端编程方式,也可以把React看作View,所以接下来的对比主要是View的对比

原理上

React和Backbone都是通过监听模型状态的变化来触发DOM更新。

数据流

React的数据流是单向的,这使得代码阅读起来非常流畅,这点非常重要尤其是当前DI的前端数据逻辑复杂,而且不同的View中会有交互数据的调用,阅读起来非常不便

Backbone没有数据流的这个概念。

数据处理

Backbone 提供了 Collection,Model 作为数据模型封装很多实用的方法,但是在实际应用中,往往也带来很多约束,尤其是在nest的Model中,Backbone无法监控nest Object的属性变化,当前DI是通过改写backbone 提供的默认方法来实现的

React 没有提供相关的数据读取方法。官方推荐Flux框架来处理单一方向的数据流。

视图Render

Backbone 中使用模板呈现View,模板通常需要嵌入大量的模板语法去维护状态,有些还需要JQuery去绑定状态,这样会导致同一个View有2套方案在维护状态,这样的重复当项目增大时非常不好维护,由于模版传入的数据没有定义类型,所以模板内语法逻辑阅读起来非常不便,DI当前就存在这样的问题。

React 采用 Virtual DOM呈现View,整个视图的框架可以从 Virtual Dom 一目了然, 通过编写独立的模块化UI组件,然后进行组装来构建,这样当某个或某些组件出现问题是,可以方便地进行隔离。

每个组件都可以进行独立的开发和测试,组件内可以约定传入的属性的类型,组件中也可以嵌入其他组件。大大的提高了代码的可维护性,和重用性。

视图状态

Backbone一般通过Jquery对特别的元素进行状态绑定,当元素比较多的时候特别麻烦,同时维护多个状态时处理起来非常麻烦。

React 的View是单向绑定的,也可以把每一个Component当成一个状态机,只需要维护State的状态

适应场景

Backbone 比较适合CRUD RESTful 相对于数据模型比较简单的应用。

React 更适应复杂数据模型,DOM结构复杂的应用

服务端渲染

React 支持服务端渲染,在用于首页,报表页首次渲染,避免首次2次http 请求,

Backbone 服务端渲染需要有客户端的数据对接。数据结构复杂的时候对接会很麻烦

发展趋势

React 一直强调Learn once, write anywhere ,并且随着 react native ,react cavans等一系列的相关开源项目,证明了react的发展潜力,有facebook强大后盾维护开源社区,相信React的在未来的应用中有更好的发挥

Backbone相对于React 在开源方面的热度要冷淡一些。

React 的缺点

React以一种全新的编程方式,需要的学习成本相对于熟悉的Backbone要多很多。

网络上React的内容还不是很多,一些实际开发中碰到的问题解决起来需要的时间可能会更多。

React现在发展的速度特别快,之后可能会带来一些升级重构的工作。

Compare Backbone with React

Conceptual

Bacbone is a classical front MVC framework,while React is just a lib of building composable UI Component, a new front-end programming, it could be regard as View as well, so the next comparison is mainly focus on View.

Principle

Both React and Backbone trigger DOM update by monitoring the changes of model status.

Data flow

The data flow of React is unidirectional,which makes reading quite smoothly.it’s very important,especially for the logic complexity of current front-end data DI and there will be call for interactive data from different View,which make reading quite inconveniently.

Backbone have no conception of data flow.

Data Processing

Backbone offers Collection, Model as a data model contain many practical methods,but it will also bring a lot of constraints in practical application,particularly in the nest of Model,Backbone could not monitor the property changes of nest Object.Currently DI is achieved by the default method with rewritten backbone.

React doesn’t provide the related data reading method. Flux official recommend framework to deal with the data flow in one direction.

View Render

Backbone use template to present View, templates always need to implant a large amount of template grammar to maintain status.Some of them also require JQuery to bind the status.It will lead to maintain status with two programs in a view.It make the project quite hard to maintain when the project increase in such kind of repeat.Owing to no type definition for the incoming data,so it’s hard to read for the grammar logic of template.while DI without this kind of problem.

React use Virtual DOM to present View, you can view the whole frame from the Virtual Dom easily by compiling the modular UI components,then build it by assembling.In this case,the component problem could be isolated easily when it occurred.

Each component can be independently developed and tested. Components can lead in property type by reserve,it could embed other components as well,greatly improve the maintainability and reusability of coding.

View State

Backbone bind the status to special element with JQuery,it will be quite complex to maintain multiple status when the element quantity is too much.

The View of React bind is unidirectional,you can regard each Component as a state machine,only maimtain the status of State

Adaptation scene

Backbone for CRUD RESTful data model with respect to relatively simple applications.

React more adapted to complex data models, DOM structure of complex applications

Server Render

React to support server-side rendering, in for the home, the first report page rendering, http request to avoid the first two times

Backbone service requires data butt side rendering client. Matchmaking complex data structures when a lot of trouble

Development Trend

React always stressed 'Learn once, write anywhere', and as 'react native', 'react cavans' and a series of related open source projects, the development potential react to prove, there is strong backing facebook maintain the open source community, believe in React future applications play better

Backbone relative to React to be slow on open source

React's Inadequate

React as a new way of programming, learning costs relative need a lot more familiar with the Backbone.

React content on the web is not a lot, some of the practical problems encountered in the development time required to solve may be more.

React speed development of particularly fast now, after some upgrades may bring remodeling work.