1&Introduction
In this article we are going to compare three popular MV* frameworks for the web: AngularJS vs. Backbone vs. Ember. Choosing the right framework for your project can have a huge impact on your ability to deliver on time, and your ability to maintain your code
in the future. You probably want a solid, stable and proven framework to build upon, but don’t want to be limited by your choice. The web is evolving fast — new technologies arise, and old methodologies quickly become irrelevant. Under this light, we are going
to go through an in-depth comparison of the three frameworks.
2&Meet The Frameworks
All the frameworks we are going to meet today have a lot in common: they are open-sourced, released under the permissive MIT license, and try to solve the problem of creating Single Page Web Applications using the MV* design pattern. They all have the concept
of views, events, data models and routing. We are going to start with some quick background and history, and then dive in to compare the three frameworks.
AngularJS was born in 2009 as a part of a larger commercial product, called GetAngular. Shortly after, Misko Hevery, one of the engineers who founded GetAngular, managed to recreate a web application that consisted of 17 thousand lines of code and took 6 months
to develop in a mere 3 weeks using just GetAngular. Reducing the size of the application to just about 1,000 lines of code convinced Google to start sponsoring the project, turning it into the open-source AngularJS we know today. Amongst Angular’s unique and
innovative features are two-way data bindings, dependency injection, easy-to-test code and extending the HTML dialect by using directives.
Backbone.js is a lightweight MVC framework. Born in 2010, it quickly grew popular as a lean alternative to heavy, full-featured MVC frameworks such as ExtJS. This resulted in many services adopting it, including Pinterest, Flixster, AirBNB and others.
Ember’s roots go way back to 2007. Starting its life as the SproutCore MVC framework, originally developed by SproutIt and later by Apple, it was forked in 2011 by Yehuda Katz, a core contributor to the popular jQuery and Ruby on Rails projects. Notable Ember
users include Yahoo!, Groupon, and ZenDesk.
3&Community
Community is one of the most important factors to consider when choosing a framework. A large community means more questions answered, more third-party modules, more YouTube tutorials…you get the point. I have put together a table with the numbers, as of August
16, 2014. Angular is definitely the winner here, being the 6th most-starred project on GitHub and having more questions on StackOverflow than Ember and Backbone combined, as you can see below:
Backbone.js
Stars on Github
Third-Party Modules
StackOverflow Questions
YouTube Results
GitHub Contributors
Chrome Extension Users
All those metrics, however, merely show the current state of each framework. It is also interesting to see which framework has a faster-growing popularity. Fortunately, using Google Trends we can get an answer for that too:
4&Framework Size
Page load times are crucial for the success of your web site. Users&&when it comes to the
speed of browsing — so in many cases it is desired to do everything possible to make your application load as fast as possible. There are two factors to look at when considering the impact of the framework on the loading time of your application: framework
size and the time it takes the framework to bootstrap.
Javascript assets are usually served minified and gzipped, so we are going to compare the size of the minified-gzipped versions. However, merely looking at the framework is not enough. Backbone.js, despite being the smallest (only 6.5kb), requires both Underscore.js
(5kb) and jQuery (32kb) or Zepto (9.1kb), and you will probably need to add some third party plug-ins to the mix.
Size with required dependencies
AngularJS 1.2.22
Backbone.js 1.1.2
43.5kb (jQuery + Underscore)
20.6kb (Zepto + Underscore)
Ember.js 1.6.1
136.2kb (jQuery + Handlebars)
5&Templating
Angular and Ember include a template engine. Backbone, on the other hand, leaves it up to you to use the template engine of your choice. The best way to get a feeling of the different templating engines is a code sample, so let’s dive in. We will show an example
of formatting a list of items as HTML.
5.1&AngularJS
Angular’s Templating engine is simply HTML with binding expressions baked-in. Binding expressions are surrounded by double curly braces:
&li ng-repeat=&framework in frameworks&
title=&{{framework.description}}&&
{{framework.name}}
Need help with this&Javascript&snippet?
Talk to an expert
5.2&Backbone.js
While Backbone can be integrated with many third-party template engines, the default choice is&. Since Underscore is a Backbone dependency and you already
have it on your page, you can easily take advantage of its templating engine without adding any additional dependencies for your application. On the downside, the templating engine of Underscore is very basic and you usually have to throw javascript into the
mix, as you can see in our example:
&% _.each(frameworks, function(framework) { %&
&li title=&&%- framework.description %&&&
&%- framework.name %&
Need help with this&Javascript&snippet?
Talk to an expert
5.3&Ember.js
Ember currently uses the Handlebars template engine, which is an extension to the&&Mustache templating engine. A new Handlebars
variant, called HTMLBars is currently in the works. Handlebars does not understand DOM – all it does is a simple string transformation. HTMLBars will understand DOM, so the variable interpolation will be context aware. As HTMLBars is still not production-ready,
we will show the Handlebars way of printing the framework list:
{{#each frameworks}}
&li {{bind-attr title=description}}&
Need help with this&Javascript&snippet?
Talk to an expert
6&AngularJS
6.1&The Good Parts
Angular has brought many innovative concepts to the world of web developers. Two-way data binding saves a lot of boilerplate code. Consider the following jQuery code snippet:
$('#greet-form input.user-name').on('value', function() {
$('#greet-form div.user-name').text('Hello ' + this.val() + '!');
Need help with this&Javascript&snippet?
Talk to an expert
Thanks to Angular’s two-way-binding, you never have to write this code yourself. Rather, you just declare the bindings in your HTML template:
&input ng-model=&user.name& type=&text& /&
Hello {{user.name}}!
Need help with this&Javascript&snippet?
Talk to an expert
Promises play a main role in the Angular cast. Javascript is a single-thread, event-loop based language, which implies that many operations (such as network communication) happen in an asynchronous manner. Asynchronous javascript code tends to grow quickly
into a spaghetti of nested callbacks, better recognized as “Pyramid Code” or “Callback Hell.”
Javascript Expert
Uri Shaked
Uri works for WatchDox, lectures at the Israel Institute of Technology and organizes the Tel Aviv Google Developers Group.
Not only does Angular have the largest community and much more online content than the two others, it is also backed and promoted by Google. As such, the core team is constantly growing, resulting in innovation and tools that improve developer productivity:
Protractor, Batarang, ngmin and Zone.js, just to name a few. In addition, the team collaborates with the community on the design decisions. For example, all the design documents for Angular 2.0 can be found&,
and everyone can make suggestions directly to the design documents.
Angular helps you categorize your application building blocks into several types: Controllers, Directives, Factories, Filters, Services and Views (templates). Those are organized in turn into modules, which can depend one upon the other. Each type of building
block has a different role. Views do the UI, Controllers work out the logic behind the UI, Services take care of communication with the backend and hold together pieces of common and related functionality, while Directives make it easy to create reusable components
and extending HTML by defining new elements, attributes and behaviors.
The automatic Dirty Checking means that you don’t have to access your model data with getters and setters — you can modify any property of an arbitrary scope object and angular will automatically detect the change and notify all the watchers for that property.
“Angular is written with testability in mind.” This quote from the&&has a lot behind it – Angular indeed puts a lot
of emphasis on separation of concerns, unit isolation and provides ready-to-use, powerful mocks for fundamental built-in services such as&&and&.
6.2&Pain Points
Angular is often criticized for the complexity of the Directives API. Transclusion, in particular, is a concept which confuses many developers and wrapping your head around all the concepts such as compiling function, pre/post linking functions, the different
scope kinds (transclusion/isolate/child scope) and all the other configuration settings for directives takes some time to master.
The scope hierarchy in Angular uses Prototypal Inheritance, which is a new concept to grasp for people coming from Object Oriented languages such as Java and C#. Failing to understand scope inheritance causes many cases of frustrated developers (examples:&,&&and&).
&are used extensively in the View layer of Angular. This expression language is very powerful, sometimes too powerful. It lets the developer
use complicated logic and even perform assignment operations and calculations, all inside the view templates. Putting logic inside the templates makes it harder to test, as it becomes impossible to test it in isolation. Consider the following code example,
which clearly shows how easily the template language can be abused:
button ng-click=&(oldPassword && checkComplexity(newPassword) && oldPassword != newPassword) ? (changePassword(oldPassword, newPassword) && (oldPassword=(newPassword=''))) : (errorMessage='Please input a new password matching the following requirements: ' + passwordRequirements)&&Click mebutton&
Need help with this code snippet?
Talk to an expert
In many cases, mistakes such as misspelling a directive name or calling an undefined scope function are silently ignored and can be challenging to find, especially when you throw into the mix the complexity of the directive API and the scope inheritance mentioned
above. I have seen developers spending hours scratching their head trying to figure out why an event binding didn’t fire the callback function on the scope, only to find out they have used the camelCase convention instead of the hyphen-separated one when spelling
attribute names (example&).
Finally, the Digest Cycle of angular, which takes care of the “Magical” dirty checking, has the tendency to surprise developers. It is easy to forget to call $digest() when running in non-Angular context ().
On the other hand, you have to be very careful not to cause slow watches or infinite digest loops (examples:&,&&and&).
In general, for pages with a lot of interactive elements, Angular becomes really slow. A good rule of thumb is not to have more than 2,000 active bindings on the same page.
7&Backbone.js
7.1&The Good Parts
Backbone is lightweight, fast and has a small memory footprint. The learning curve is very linear, and there are only a few simple concepts to grasp (Models/Collections, Views, Routes). It has great documentation, the code is simple and heavily documented,
and there is even an&&of the code which explains how it works in detail. You can actually go over the entire source code of the framework and get
familiar with it in less than an hour.
Being so small and basic, Backbone can be a good foundation to build your own framework upon. Some examples of 3rd party frameworks based on Backbone are Aura, Backbone UI, Chaplin, Geppetto, Marionette, LayoutManager, Thorax, Vertebrae. With Angular and Ember
you usually have to live with the choices made by the authors of the frameworks, which may or may not suit your project needs and personal style. Angular 2.0 promises to change it, by comprising small independent modules, so you will be able to pick and mix.
We are yet to see if they will be able to deliver this.
7.2&Pain Points
Backbone does not provide structure. It rather provides some basic tools you can use to create structure, leaving it up to the developer to decide how to structure his application, and there are also many blanks to fill. Things such as memory management have
to be carefully considered. The lack of view lifecycle management makes route/state changes prone to memory leaks unless you take care of cleaning up everything yourself.
While it is true that many of the functions not provided by Backbone itself could be filled by third-party plugins, this also means that there are many choices to be made when creating an application, as many functions have several alternative plugins. For
example, nested models can be provided by Backbone.DocumentModel, BackBone.NestedTypes, Backbone.Schema, Backbone-Nested, backbone-nestify, just to name a few. Deciding which one is the best for your project requires research, which in turn takes time — and
one of the main purposes of framework is to save you time.
Backbone lacks support for two-way data binding, meaning you will have to write a lot of boilerplate to update the view whenever your model changes, and to update your model whenever the view changes. See the example given above, showing how two-way in Angular.js
data binding reduces boilerplate.
Views in Backbone manipulate the DOM directly, making them really hard to unit-test, more fragile and less reusable. The common practice is to look up DOM elements using CSS selectors, so changing a CSS class name, adding a new element with the same class name
or even wrapping some DOM tree inside another element can break your CSS selectors and render your app usable.
8&Ember.js
8.1&The Good Parts
Ember.js favors Convention over Configuration. This means that instead of writing a lot of boilerplate code, Ember can automatically infer much of the configuration itself, such as automatically determining the name of the route and the controller when defining
a router resource. Ember even raises the bar by automatically creating the controller for your resource if you don’t define one yourself.
Ember includes both an excellent router and an optional data layer, called ember data. Unlike the two other frameworks, which have a very minimal data layer (Backbone’s Collection/Model and Angular’s&$resource),
Ember comes out of the box with a fully-fledged data module which integrates really nicely with a Ruby-on-Rails backend or any other RESTful JSON API that follows a simple set of conventions. It also provides support for&for developing against mock API and testing.
Performance has been a major goal in the design of Ember.js. Concepts such as&, which ensures that updated data only causes a single DOM
update even if the same piece of data was updated several times, along with&, and the ability to precompile the
HandleBars templates during the build time or on your server, help to keep your application load and run fast.
8.2&Pain Points
Ember’s API changed much before it stabilized. Therefore, there is a lot of outdated content and examples that no longer work, making it confusing for developers who are making their first steps in the framework. Take a look at the&, and you will see what I mean. There are so many breaking changes, and those cause many StackOverflow answers and coding tutorials to become irrelevant (example&.
Handlebars pollutes the DOM with many&&script&&tags which it uses as markers to&&with your model. This will be gone with the transition to HTMLBars, but for the time being, your DOM tree will be filled up with so many&&script&&tags
you will&&your own code. And the worst part – this can also&&or integration with other frameworks, such as&.
We have seen the strengths and weaknesses of all the three frameworks. Ember’s holistic approach which embraces MVC structure will make a lot of sense for developers who have a MVC programming background in Ruby, Python, Java, C# or any other Object Oriented
language. Ember also brings application performance to the table, and excels at saving you from writing boilerplate by favoring convention over configuration.
Backbone embraces minimalism. It is small, fast and easy to learn, and provides the minimum (or in many cases, even less than the minimum) that you need to get going.
Angular’s innovative approach for extending HTML will make a lot of sense for people who are web developers in soul. With a large community and Google behind it, it is here to stay and grow, and it works well both for quick prototyping projects and large-scale
production applications.
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：261451次
积分：3504
积分：3504
排名：第4409名
原创：33篇
转载：324篇
评论：78条
(2)(3)(5)(4)(3)(6)(11)(9)(16)(19)(27)(16)(21)(21)(11)(23)(10)(3)(4)(19)(4)(11)(19)(27)(18)(5)(7)(4)(5)(1)(2)(5)(3)(10)(9)(2)(4)(2)(1)(1)(1)(2)(2)(4)(1)比特客户端
您的位置：
详解大数据
详解大数据
详解大数据
详解大数据
Ember EM260 ZigBee网络处理方案
关键字：案例
　　Ember 公司的EM260是ZigBee/802.15.4 网络,它集成了2.4GHz, IEEE 802.15.4兼容的收发器和16位网络处理器(XAP2b内核),用以运行ZigBee兼容的网络堆栈EmberZNet.收发器的RX灵敏度为-99dBm,正常输出功率为+2.5dBm.EM260目标应用为建筑物和控制,家庭自动化和控制,家庭娱乐控制以及资产跟踪.本文介绍了EM260的主要特性,方框图,典型应用电路和的材料清单.此外还介绍了Ember EM260 SPI/UART 128kB开发板的主要特性和详细电路图,包括电源分布和各种电路, 主微控制器, 信号流程图, SPI/UART和USB/DEI 逻辑以及USB, DEI, 和TTL 外接口电路图。
　　EM260: ZigBee/802.15.4 Network Processor
　　The EM260 integrates a 2.4GHz, IEEE 802.15.4-compliant transceiver with a 16-bit network processor (XAP2b core) to run EmberZNet, the Ember ZigBee-compliant network stack. The EM260 exposes to the EmberZNet API across a standard SPI module or a UART module, allowing application development on a Host platform. This means that the EM260 can be viewed as a ZigBee peripheral connected over a serial interface. The XAP2b microprocessor is a power-optimized core integrated in the EM260. It contains integrated Flash and RAM memory along with an optimized peripheral set to enhance the operation of the network stack.
　　The transceiver utilizes an efficient architecture that exceeds the dynamic range requirements imposed by the IEEE 802.15.4-2003 standard by over 15dB. The integrated receive channel filtering allows for co-existence with other communication standards in the 2.4GHz spectrum such as IEEE 802.11g and Bluetooth. The integrated regulator, VCO, loop filter, and power amplifier keep the external component count low. An optional high-performance radio mode (boost mode) is software selectable to boost dynamic range by a further 3dB.
　　The EM260 contains embedded Flash and integrated RAM for program and data storage. By employing an effective wear-leveling algorithm, the stack optimizes the lifetime of the embedded Flash, and affords the application the ability to configure stack and application tokens within the EM260.
　　To maintain the strict timing requirements imposed by ZigBee and the IEEE 802.15.4-2003 standard, the EM260 integrates a number of functions into the hardware. The MAC hardware handles automatic ACK transmission and reception, automatic backoff delay, and clear channel assessment for transmission, as well as automatic filtering of received packets. In addition, the EM260 allows for true MAC level debugging by integrating the Packet Trace Interface.
　　An integrated voltage regulator, power-on-reset circuitry, sleep timer, and low-power sleep modes are available. The deep sleep and power down modes draw less than 1μA, allowing products to achieve long battery life.
　　Finally, the EM260 utilizes the non-intrusive SIF module for powerful software debugging and programming of the network processor.
　　EM260主要特性:
　　Integrated 2.4GHz, IEEE 802.15.4-compliant transceiver:
　　Robust RX filtering allows co-existence with IEEE 802.11g and Bluetooth devices
　　- 99dBm RX sensitivity (1% PER, 20byte packet)
　　+ 2.5dBm nominal output power
　　Increased radio performance mode (boost mode) gives C 100dBm sensitivity and + 4.5dBm transmit power
　　Integrated VCO and loop filter
　　Secondary TX-only RF port for applications requiring external PA.
　　Integrated IEEE 802.15.4 PHY and MAC
　　Ember ZigBee-compliant stack running on the dedicated network processor
　　Controlled by the Host using the EmberZNet Serial Protocol (EZSP)
　　Standard SPI or UART Interfaces allow for connection to a variety of Host microcontrollers
　　Non-intrusive debug interface (SIF)
　　Integrated hardware and software support for InSight Development Environment
　　Dedicated peripherals and integrated memory
　　Provides integrated RC oscillator for low power operation
　　Three sleep modes:
　　Processor idle (automatic)
　　Deep sleep―1.0μA
　　Power down―1.0μA
　　Watchdog timer and power-on-reset circuitry
　　Integrated AES encryption accelerator
　　Integrated 1.8V voltage regulator
　　EM260目标应用:
　　Building automation and control
　　Home automation and control
　　Home entertainment control
　　Asset tracking
　　图1.EM260 方框图
　　图2.用于SPI协议的典型应用电路图
　　材料清单(BOM):
　　Ember EM260 SPI/UART 128kB开发板
　　The Ember EM260 SPI/UART 128kB Breakout Board contains the hardware stimulus for the development and deployment of a low-data-rate, low-power ZigBee application on a host microcontroller (with 128kB of Flash) communicating with the EM260 SPI/UART radio communication module (RCM). The Breakout Board allows for either a SPI or UART interface to the EM260, selectable via a toggle switch. The four-layer (FR4) Breakout Board features an Atmel host microcontroller (ATmega128L), a temperature sensor, two application buttons, a piezo buzzer, two application LEDs, and a 2肌 x 2.6″ through-hole prototyping area. In addition, it contains a USB interface, InSight data emulation interface, regulated power planes with indicator LEDs, and direct attachment to the EM260 SPI/UART RCM. These features allow for proper development of an EM260 application.
　　The EM260 SPI/UART 128kB Breakout Board offers:
　　Host microcontroller, ATmega128L from Atmel, with 128kB Flash and 8kB RAM
　　AVR and JTAG shrouded connectors for programming and debug
　　Configurable hardware support for application development
　　Temperature sensor
　　Two buttons
　　Piezo buzzer
　　Two LEDs
　　Selectable USB connector with RS-232 transceiver
　　EM260 SPI/UART RCM reset button
　　Host microcontroller reset button
　　Host microcontroller bootload button
　　2″x 2.6″, 0.1″pitch prototyping area
　　26-pin, 0.1″pitch, single-row header for access to all host GPIO signals
　　2 6-pin, 0.1″pitch, single-row EM260 SPI/UART RCM connectors
　　2 6-pin, 0.1″pitch, single-row headers for access to EZSP signals
　　9-pin, 0.1″pitch, single-row header footprint for access to 3.3V TTL-compliant UART signals
　　26-pin, low-profile InSight data emulation interface with configuration header
　　Automatic DC power source selection (12V DC wall wart, 5V USB bus power, or AAA battery pack)
　　Power indicator LEDs for 12V DC wall wart, 5V USB bus power, and board power
　　Jumper separation of module and board power for accurate module current measurements
　　The following figures illustrate the schematic of the EM260 SPI/UART 128kB Breakout Board (0471 Version A0). Use these schematics when developing your application.
　　图3.EM260 SPI/UART 128kB开发板电路图(电源分布和各种电路)
　　图4.EM260 SPI/UART 128kB开发板电路图(主微控制器)
　　图5.EM260 SPI/UART 128kB开发板电路图(信号流程图)
　　图6.EM260 SPI/UART 128kB开发板电路图(SPI/UART和USB/DEI 逻辑)
　　图7.EM260 SPI/UART 128kB开发板电路图(USB, DEI, 和TTL 外接口)
[ 责任编辑：徐银泽 ]
据IDC预测，平板电脑行业将在…
甲骨文的云战略已经完成第一阶段…
软件信息化周刊
比特软件信息化周刊提供以数据库、操作系统和管理软件为重点的全面软件信息化产业热点、应用方案推荐、实用技巧分享等。以最新的软件资讯，最新的软件技巧，最新的软件与服务业内动态来为IT用户找到软捷径。
商务办公周刊
比特商务周刊是一个及行业资讯、深度分析、企业导购等为一体的综合性周刊。其中，与中国计量科学研究院合力打造的比特实验室可以为商业用户提供最权威的采购指南。是企业用户不可缺少的智选周刊！
比特网络周刊向企业网管员以及网络技术和产品使用者提供关于网络产业动态、技术热点、组网、建网、网络管理、网络运维等最新技术和实用技巧，帮助网管答疑解惑，成为网管好帮手。
服务器周刊
比特服务器周刊作为比特网的重点频道之一，主要关注x86服务器，RISC架构服务器以及高性能计算机行业的产品及发展动态。通过最独到的编辑观点和业界动态分析，让您第一时间了解服务器行业的趋势。
比特存储周刊长期以来，为读者提供企业存储领域高质量的原创内容，及时、全面的资讯、技术、方案以及案例文章，力求成为业界领先的存储媒体。比特存储周刊始终致力于用户的企业信息化建设、存储业务、数据保护与容灾构建以及数据管理部署等方面服务。
比特安全周刊通过专业的信息安全内容建设，为企业级用户打造最具商业价值的信息沟通平台，并为安全厂商提供多层面、多维度的媒体宣传手段。与其他同类网站信息安全内容相比，比特安全周刊运作模式更加独立，对信息安全界的动态新闻更新更快。
新闻中心热点推荐
新闻中心以独特视角精选一周内最具影响力的行业重大事件或圈内精彩故事，为企业级用户打造重点突出，可读性强，商业价值高的信息共享平台；同时为互联网、IT业界及通信厂商提供一条精准快捷，渗透力强，覆盖面广的媒体传播途径。
云计算周刊
比特云计算周刊关注云计算产业热点技术应用与趋势发展，全方位报道云计算领域最新动态。为用户与企业架设起沟通交流平台。包括IaaS、PaaS、SaaS各种不同的服务类型以及相关的安全与管理内容介绍。
CIO俱乐部周刊
比特CIO俱乐部周刊以大量高端CIO沙龙或专题研讨会以及对明星CIO的深入采访为依托，汇聚中国500强CIO的集体智慧。旨为中国杰出的CIO提供一个良好的互融互通 、促进交流的平台，并持续提供丰富的资讯和服务，探讨信息化建设，推动中国信息化发展引领CIO未来职业发展。
IT专家新闻邮件长期以来，以定向、分众、整合的商业模式，为企业IT专业人士以及IT系统采购决策者提供高质量的原创内容，包括IT新闻、评论、专家答疑、技巧和白皮书。此外，IT专家网还为读者提供包括咨询、社区、论坛、线下会议、读者沙龙等多种服务。
X周刊是一份IT人的技术娱乐周刊，给用户实时传递I最新T资讯、IT段子、技术技巧、畅销书籍，同时用户还能参与我们推荐的互动游戏，给广大的IT技术人士忙碌工作之余带来轻松休闲一刻。
微信扫一扫
关注Chinabyte