现在的位置: 首页IT技术>正文
流行js框架对比分析:Backbone vs Ember vs Knockout
发表于481 天前 IT技术 暂无评论

Top Rich JavaScript Framework:


1.Angular JS: Developed by Google; used internally by them.
2.Backbone:Jeremy Ashkenas and DocumentCloud.
3.Batman:the team at Shopify (an eCommerce platform company)
4.CanJS:the team at Bitovi (a JavaScript consulting/training company)
5.Ember:Yehuda Katz (formerly of jQuery and Rails), the Ember team, and Yehuda’s company Tilde.
6.Meteor: The Meteor development group, who just raised $11.2 Million so they can do this full-time.
7.Knockout:The Knockout team and community (currently three on the core team)
8.Spine:Alex MacCaw
http://blog.stevensanderson.com/2012/08/01/rich-javascript-applications-the-seven-frameworks-throne-of-js-2012

 

Backbone.js

image

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions,views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

Size: 17kb,  5.6kb, Packed and gzipped
Extension:underscore.js 40kb,4kb Minified and Gzipped

Backbone’s feature:

Helpful methods to manipulate and query your data.
Does not force you to use a single template engine.
It's smaller.
It doesn't depend on stuffing application logic into your HTML.
Synchronous events (Underscore.js ): View update automatically.
Backbone scales well, from embedded widgets to massive apps.
Backbone is a library, not a framework, and plays well with others.
"Two way data-binding" is avoided, using json.(rivets.js,Backbone.stickit )
There's no built-in performance penalty for choosing to structure your code with Backbone.   thin models and templates with flexible granularity .

Support:
http://backbonejs.org/
http://perka.github.com/backbone-ui/

 

Ember.js

image

Ember is a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture.

Size:160kb; 40k min+gzip

 

Ember’s feature:

1.Eliminate boilerplate:

extremely rich templating system with composed views and UI bindings.
Ember.js provides tools that let you focus on your app instead of writing the same code you've written a hundred times.
Gone beyond the obvious low-level event-driven abstractions, eliminating much of the boilerplate associated with propagating changes throughout your application, and especially into the DOM itself.

Templating engine that will automatically update the DOM when the underlying objects change (Handlebars).

2. Provides Architecture:

Easy to divide your application into models, views, and controllers, which improves testability, makes code more modular, and helps new developers on the project quickly understand how everything fits together.
Ember also supplies built-in support for state management, so you'll have a way to describe how your application moves through various nested states (like signed-out, signed-in, viewing-post, and viewing-comment) out of the box.

Web application uses the same REST API as your native apps or third-party clients. Back-end developers can focus on building a fast, reliable, and secure API server, and don't have to be front-end experts, too.

 

These are the three features that make Ember a joy to use:

Bindings(Two way data-binding)
Computed properties
Auto-updating templates

Ember.js application downloads everything it needs to run in the initial page load. That means that while your user is using your app, she never has to load a new page and your UI responds quickly to their interaction.

Support:

http://emberjs.com/documentation/

http://emberjs.torriacg.org/documentation/

Knockout.js

image

Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably.

Size: 40kb, reduces to 14kb when using HTTP 

image

 

Knockout’s  feature:

image

Declarative bindings:
Easily associate DOM elements with model data using a concise, readable syntax.
Automatic UI refresh:
When your data model's state changes, your UI updates automatically.
Dependency Tracking:
Implicitly set up chains of relationships between model data, to transform and combine it.
Templating:
Quickly generate sophisticated, nested UIs as a function of your model data

Pure JavaScript — works with any web framework.
No dependencies.
Supports all mainstream browsers.
     IE 6+, Firefox 2+, Chrome, Opera, Safari (desktop/mobile)
Fully documented.
    API docs, live examples, and interactive tutorials included

 

 

KO doesn’t compete with jQuery or similar low-level DOM APIs. KO provides a complementary, high-level way to link a data model to a UI. KO itself doesn’t depend on jQuery, but you can certainly use jQuery at the same time, and indeed that’s often useful if you want things like animated transitions.

Support: http://knockout.com

Backbone vs Ember vs knockout

image

http://codebrief.com/2012/01/the-top-10-javascript-mvc-frameworks-reviewed/#backbone

Backbone.js is the web’s darling framework.

Pros: Strong community and lots of momentum. Underscore.js (which it uses heavily) is also a great framework.

Cons: Lacks strong abstractions and leaves something to be desired. The entire framework is surprisingly lightweight and results in lots of boilerplate. The larger an application becomes, the more this becomes apparent.

 

Ember.js (formerly Amber.js SproutCore 2.0) is one of the newest contenders. It is an attempt to extricate the core features from SproutCore 2.0 into a more compact modular framework suited for the web.

Pros: Extremely rich templating system with composed views and UI bindings.

Cons: Relatively new. Documentation leaves lots to be desired.

 

Knockout.js is an MVVM framework that receives lots of praise from its supporters. It stresses declarative UI bindings and automatic UI refresh.

Pros: Binding support. Great documentation and amazing tutorial system.

Cons: Awkward binding syntax and lacks a solid view component hierarchy.

 

Thank you!

给我留言

您必须 [ 登录 ] 才能发表留言!

×
腾讯微博