Angular vs Backbone

Community Health

Why Does Community Matter?

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 etc. I have put together a table with the numbers, as of August 16, 2014 – May 24, 2015 and calculated the difference, and percentage of increase.


Metric Angular 08/16/14 Backbone 08/16/14 Angular Present Backbone Present Angular Increase Backbone Increase
Stars On Github 27.2k 18.8k 38.8k 21.8k 11.6k-60% 3k-28%
Github Contributors 928 230 1,237 259 309-50% 29-22%
Third-Party Modules 800 236 1,429 254 629-88% 18-14%
YouTube Results 75k 16k 220k 24k 145k-131% 8k-66%
Stackoverflow Questions 49.5k 16k 90k 25k 40%-111% 9k-72%
Pluralsight Tutorials 35 4


What does it all mean?

There’s no support hotline for open source… The community is the support.

A projects community is much more than just its contributors. It’s the people on YouTube making a tutorial on that new feature you wanted to add but didn’t know how. It’s the people on StackOverflow who answer your direct questions when you’re completely stuck and have nowhere else to go. It’s the people who build the modules that provides the perfect animation & styles that your users love. It’s the people who take the time to create step-by-step professional tutorials when you just started and have no idea where to begin. It’s the people who take the time to seamlessly integrate it into your IDE because it helps others be more productive.

Community is everything…

GitHub Contributions

Please visit the linked sites,
https://github.com/jashkenas/backbone/graphs/contributors
https://github.com/angular/angular.js/graphs/contributors

Overall Green Graph:
Indicates the collective contributions of everyone whos ever worked on the project.

Individual Orange Graph:
Indicates the collective contributions on an individual.

Comments:
Number of comments an individual has left regarding the project.

Important: Backbones chart is set to scale at 80 where angular is set to 60 leading to Backbones chart being deflated equal to the space between 80 & 60. This only applies to the Overall Green Graph at the top.

Counsitence with Community Health

Overall Contributions:
1) As a product owner I want to see a large amount of overall contributions so I know that the software is being updated and improved regularly, leading to richer / faster applications built in less time.
2) As a developer I want to see a large amount of overall contributions so I can look forward to faster running code with less bugs, and a larger amount of features / plugins / extentions.

Distribution of Individual Contributions
1) As a product owner I want to see a wide distribution of contributers so I can rest assured that if the main contributer wins the lottery, another contributer can take his place.
2) As a developer I want to see a wide distribution of contributers because it means there’s more people bringing in unique ideas to the project, improving the overall quality. More distribution means more stability.

Number of Comments
1) Effective Communication
2) Effective Teamwork
3) High moral.
4) Better Intergration

Images Shown Below
The images shown below is just a small snippet of the information available. For more detailed information please click on the links at the bottom of the GitHub Contributors heading located at the top of the page.



Google Trends: 2004 – Present

This graph illustrates total search volume on a scale from 0 – 100. We can see a direct correlation between the number of related search terms and Angulars impressive growth stats show in the table above. We can also see that the search terms for both frameworks are very similar, leading me to believe this is an accurate representation.

PluralSight

http://www.pluralsight.com/


About PluralSight

PluralSight offers expert IT tutorials. It is used by more IT companies than any other training resource. Offering extremely well structured vides, PDF slides, and downloadable exercise files, PluralSight is hands down THE BEST online training available for software engineers. Allowing it to command a price of $500 a year for premium service.


https://www.youtube.com/watch?t=26&v=B1JeuKOm--M I cannot stress enough just how valuable this site has been for learning & implementing software.


The New PluralSight

As of September 29, 2014 PluralSight announced they would be re-designing their website. Being a company with access to the best and brightest in IT, I was curious to see how they built their new website…. I wasn’t surprised to see the sign of AngularJs in their html tag…


PluralSight Tutorial List

http://www.pluralsight.com/

Backbone Total: 4 - Backbone Courses Listed


Application Building Patterns with Backbone.js - Date: 08 Feb 2013
Backbone.JS In-Depth and Intro to Testing with Mocha and Sinon – Date: 15 Oct 2013
Backbone.js Fundamentals – 04 Sep 2012 (Out of date with current version of backbone)
Backbone.js Persistence – 22 Nov 2011 (Out of date with current version of backbone)


Angular Total: 35 - Angular Courses Listed

TOTAL 2015-Present: 12 / 24 (12 in 6 months). If trend continues we could expect 24
Angular the big picture – 12 May 2015
Building a SPA Framework Using AngularJS – 28 Apr 2015
Angular Testing with John Papa and Ward Bell – 24 Apr 2015
Angular Front to Back with Web API – 15 Apr 2015
Animating AngularJS Applications – 14 Apr 2015
AngularJS Services In-Depth – 24 Feb 2015
An AngularJS Playbook – 15 Feb 2015
HTML5 Offline Applications with Angular, IndexedDB and Bootstrap – 12 Feb 2015
Two Tier Enterprise App and API Development with Angular & Sails – 10 Feb 2015
AngularJS Security Fundamentals – 04 Feb 2015
AngularJS Directives Fundamentals – 30 Jan 2015
AngularUI Fundamentals – 29 Jan 2015


TOTAL 2014: 15
Using Typescript for Large AngularJS Applications – 31 Dec 2014
What's New in Angular 1.3 – 14 Dec 2014
Creating Apps With Angular, Node, and Token Authentication – 12 Nov 2014
AngularJS Form Using Bootstrap and MVC5 – 26 Oct 2014
Kendo UI and AngularJS from scratch – 13 Oct 2014
Learn AngularJS with Ken Cenerelli and John Papa – 08 Oct 2014
AngularJS Patterns: Clean Code – 07 Oct 2014
AngularJS Line of Business Applications – 25 Sep 2014
End-to-End Multi-Client Service Oriented Applications Angular Edition – 18 Sep 2014
Building Mobile Apps with the Ionic Framework and AngularJS – 25 Aug 2014
Continuous Integration and deployment for AngularJS and Node.js – 18 Sep 2014
Testing Angular From Scratch – 08 Jul 2014
AngularJs: Get Started – 05 Jun 2014
Building SharePoint apps as single page apps with AngularJS – 24 Apr 2014
Building AngularJS and Node.js Apps with the MEAN Stack – 31 Jan 2014


TOTAL 2013: 8
Building Apps with Angular Breeze – Part 2 – 23 Dec 2013
AngularJS for .NET Developers – 17 Dec 2013
AngularJs In-Depth - 18 Nov 2013
Build a Single Page Application (SPA) Angular, and Breeze – 22 Oct 2013
Angular Best Practices – 25 Oct 2013
Building a Site with Bootstrap, AngularJS, ASP.NET, EF and Azure – 31 Jul 2013
AngularJS Fundamentals – 16 May 2013
Application Building Patterns with AngularJS – 02 May 2013

Addressing Concerns

Angular’s HTML directives make it brittle and difficult to support

Directives actually makes our code stronger, easier to support, and reusable. It is one of the most powerful, and popular things about Angular. While Backbone uses jQuery selectors to grab an element which can break a whole app by changing a CSS class name or ID. Angular allows us to insert our own pre-built / custom data-attribute into the HTML removing it from CSS, ID, and other jQuery selectors which naturally change over an apps lifecycle.

If however we’re referring to much older versions of angular before directives, then yes it was brittle in the exact same way Backbone is currently brittle due to jQuery selectors.

Angulars directives make it easier to support because we can look at the HTML and have a great idea what the application is doing, as well as knowing all of the DOM events right in the HTML, as opposed to searching in a js file.

My guess is that this question was related to an older version or poorly designed Angular controllers…

Showing the difference between an old directive template and a proper one Reference – Angular: http://tech.zumba.com/2014/08/02/angularjs-forget-jquery/

Illustrates an example of Backbones jQuery selector event handling / binding Reference – Backbone: http://www.nathandavison.com/article/15/knowing-what-element-was-targeted-in-backbonejs-view-events


HTML is invalid, making linting, style enforcement and cross-browser support more difficult

I haven’t heard this argument anywhere. It would be helpful to get a reference to the source of the claim, or at least an example? It’s possible it was an old post.

Web Essentials 2013 for Visual Studio 2013 Update 4 has more than enough integration built in for Angular to compensate for any kind of linting. We can see that one of the most popular extensions for visual studio has added support for Angular. Web Essentials is also on the approved tech stack. They’ve also increased support for Angular in Web Essentials 2015. Unfortunately no direct integration exists for Backbone.

AngularJs is also supported by Resharper, which is possibly the most popular productivity tool in Visual Studio. Unfortunately it does not have direct support for Backbone.

Browser support: It’s hard for me to respond. As far as I can see Angular supports all popular and modern browsers, down to IE 8 and up. What exactly is difficult about it? Could I please have a reference to the article, or an example?

At the end of the day Angular works, and with such a large community behind it, and the tens of thousands of apps built on Angular, I feel extremely confident that this isn’t a problem.


2,878 3 10