Is It Possible To Combine Dojo With Other Js Frameworks?

We are using Dojo (1.9.3) as a JS framework for building a single page application. We are however spending too much time on the quirks of Dojo, so even simple tasks take a long ti

Solution 1:

The most I can say from the Dojo end of things is that Dojo itself is a toolkit, not a framework per se, and thus generally should not interfere with other scripts or frameworks. The reverse, on the other hand, can't always be said. So while I can't speak for all of the choices in your list, I do not think that Dojo itself will get in your way.

One possible exception I can think of is if any of the frameworks in question augment native prototypes, particularly Object, since that will affect enumerable properties in all objects and can wreak havoc on any scripts that use for...in loops without hasOwnProperty.

The only other exception I can think of is whether any of the frameworks in question for some reason do not coexist well with an AMD module loader.

That being said, I would also advise you to take the "promise" of frameworks with a grain of salt - you say that right now you are finding that implementing things with Dojo takes effort, and naturally the frameworks you list are attractive because they make certain parts of application development easy by offering patterns and conventions - but the question you should ask is, how hard does your framework make your job the moment you need to do something outside or against those conventions? Dojo may have a learning curve, but it generally doesn't prevent you from doing anything.

Solution 2:

You can use them together, but it also depends on what you're trying to do. Some actions might take more time for integration than others.

Dijit

I only have experience with Ember.js and AngularJS, but a common concept in these frameworks is data binding. Data binding allows you to simply update the model and the view will reflect the changes in the model. However, these usually do not work nicely with widgets. Widgets (like the Dijit library) create their own DOM and because of it, frameworks like Ember.js or AngularJS are not "aware" of these changes and cannot update the view in that case.

To make it work, you will have to wrap your widgets into components (Ember.js) or directives (AngularJS). An example of such wrapping can be found in this answer.

Dependency loading

Dependency loading might be confusing. AngularJS comes with their own dependency injection system, and means that you will have to use the Dojo AMD loader for Dojo modules and AngularJS dependency injection for AngularJS. The two work nicely together as far as I know (I've seen examples with the RequireJS AMD loader, so it should be possible).

With Ember.js I had a bit more troubles integrating with the AMD loader. The creator of Ember.js (Tom Dale) does not believe in AMD, and I've seen several issues trying to load Ember.js components with an AMD loader.

It all depends on how you wish to use these frameworks and what extra effort you want to make. To me it looks like you're not even sure what to use these frameworks for, since React.js or Polymer has a completely different purpose than AngularJS or Ember.js for example.