CiviCRM Community Forums (archive)

One of our GSoC students is proposing to use AngularJS to implement his project - https://civicrm.org/blogs/rajgo94/mail-blast-ui-mockups-and-plan-coming-weeks.

I think we want to make sure this is the right JS MVC for the project overall before he starts coding using it. I don't want one student's prior experience or enthusiasm for working with a popular or cool technology to drive our decision on this, as I don't think we should support more than one of these frameworks. I don't have a strong view on this but alternatives include Ember and Backbone.

Totten suggests in http://forum.civicrm.org/index.php/topic,30900.msg132631.html#msg132631 that it would be useful to have a JS MVC as part of the 5.0 technology stack and I agree.

Eileen brainstorms using AngularJS as a replacement for pages at http://forum.civicrm.org/index.php/topic,32127.msg139369.html#msg139369.

Some old brainstorming and still useful thinking about requirements and ideas for replacing profiles is found at http://wiki.civicrm.org/confluence/plugins/servlet/mobile#content/view/73924905.

D8 will use Backbone. I don't know about WordPress current or planned versions. I don't think we should put weight on what Joomla! is doing.

Here's an intro comparison of them http://readwrite.com/2014/02/06/angular-backbone-ember-best-javascript-framework-for-you#awesm=~oGaFpemHa1163A. See average tab of http://www.infoq.com/research/top-javascript-mvc-frameworks for Angular lead. See sample code in various frameworks at http://todomvc.com/. See strong lead in google trends at http://www.google.com/trends/explore#cat=0-5&q=angularjs,%20backbone.js,%20ember.js,%20knockoutjs&date=today%2012-m&cmpt=q. I couldn't find a good category at builtwith: http://trends.builtwith.com/javascript/framework.

From skimming I think the biggest differences are that backbone is slimmer and less opinionated and often ends up with coders producing repetitive boilerplate even if better programming might avoid that. Angular is very opinionated and can lead to coders fighting to work around its approach/strictures. A purported benefit is that it encourages coding styles that are more testable. Ember seems to be in between on both. Although some of the links I provided suggest angular is far ahead on market share other sources suggest the newer entrants have as good or better momentum. I haven't done enough research to come to a conclusion. But knowing would be crucial to my vote for one over another. CiviCRM previously invested in switching away from dojo to jQuery iirc partly on market share as well as DX grounds.

Thoughts and recommendations?

I don't think we've made an 'final decision' about which framework to use for core work in the future (Tim, correct me if I'm wrong at this point).... BUT it should be noted that Tim and Kurund are building the new CiviCase Configuration UI functionality using Angular. This will be part of the 4.5 release and is mostly working and viewable in the sandbox (code on GitHub in master branch).

I can't really weigh in on the selection for the JS framework, but I do want to add another +20 for completely restructuring the relationship between the forms and the business logic. I don't know if I quite agree with the webform analogy, but the point is well made. As long as the Civi business logic is doing more than providing data to the forms, we are going to be pushing uphill, regardless of the framework on the frontend or the CMS.

**Normally I would have had a lot to say about "ignoring Joomla", but on this particular point, Joomla is doing little, so not much to see. Joomla's JForm is analogous to webform, except it's part of core. A few major developers are using Backbone for upcoming releases, but JS MVC really isn't on the roadmap at this point.

I agree with Tim when it comes to AngularJS vs Backbone. I personally found it is much easier to get up to speed with angular than backbone.

We are planning to use AngularJS was mailing blast UI project.

Kurund

From a WordPress perspective, WordPress has adopted backbone.js.  In discussing this with a lead developer (Andy Nacin) who was part of the decision making process, they felt that to insert a MVC into an existing project, backbone was best -- this is not to say that WordPress felt that backbone was the best MVC, just best for the WordPress project.

I don't have any clear answers on BB/Angular compatibility/interaction, but do have some good news/bad news:

1. Bad news: Between Angular and Backbone, BB is slightly more flexible with how you embed in different contexts. If we were writing cross-domain widgets that would be embedded in other websites, BB would be more suitable. For example, BB has a noConflict() function for concurrently using multiple BB versions. There's some interest and rough-patches from the Angular community, but it doesn't seem to be a priority for Angular's core team, so ETA=>unknown.
2. Good news: It possible to do some customization of the Angular bootstrap. This should allow one to embed an Angular view inside a Backbone view.
3. Good news: The Javascript code for Angular and Backbone don't directly overlap or conflict -- they do use separate namespaces.
4. Bad news: We don't know where Drupal/WP will go with Backbone in the future -- what features/behaviors they'll produce with Backbone and how exactly they'll implement. There's no way to ensure smooth operation in the future when all parts are still evolving.
5. Bad news: Backbone and Angular both aim to support single-page applications where the URL looks like "http://example.com/#/dynamic-page", and the URL is a scarce resource: There's only one URL bar, and it only has one "#", and problems may arise if two different frameworks try to concurrently manage routes based on "#".
6. Mixed news: Managing the "#" isn't strictly necessary in either framework -- it may be possible to disable or re-engineer one or the other. Simplest case: we might have two SPA's on one domain ("http://example.com/#/dynamic-drupal-page" vs "http://example.com/civicrm/a/#/dynamic-civi-page").
7. Good news: There are some shops doing Angular as a frontend on top of Drupal's backend (and it seems likely that there are also people running Angular on WordPress). Even if Drupal/WP don't use Angular themselves, there's probably some pressure for them to not break it.

Agreed that https://github.com/angular-ui/ng-grid/commits/master is much more active than https://github.com/mleibman/SlickGrid/commits/master.

The architecture of polymer-project -- with its focus on browser-level support for "web components" -- is really, really appealing. Their website has a nice video presentation posted a few days ago. On the downside: the architecture relies on "emerging web standards", and it seems like browser-compatibility is still a bit of an issue (http://www.polymer-project.org/resources/compatibility.html -- eg even with the "polyfill" compatibility layer, they've got issues in IE+Safari). Anecdotally, the designer app had visual problems for me in FF30. That might be acceptable -- if we have a lengthy timeline for 5.0 and if we don't need it for the frontend UI.