Using jQuery widget in Dojo - javascript

My web app mainly uses Dojo and I'm trying to implement jQuery's select2 (https://select2.github.io/). I read this and I know that it's possible to mix the two together but in my case, everything's built on top of Dojo and it's already a rather large web app. So is it still possible to implement a single jQuery widget into my Dojo based web app?
If not, would I have to go through the source code for select2 and convert into Dojo form?

I don't see why it wouldn't work. As long as there aren't any conflicts, you can use other libraries in conjunction with dojo. Now it may not be built with the AMD like everything else in dojo but it will still work fine.

Related

AngularJS and jQuery... What's wrong with using both?

I saw a few blog articles saying that AngularJS and jQuery could be used together in one app. That seems good as jQuery has some functionalities Angular doesn't have and Angular allows us to make a greatly structured logic for a web app.
The fact is, as I'm french I also take a look at french blog articles about that, and french tends to say that we should never use jQuery and Angular together. I asked why on a forum and people said that it's probably because beginners usually use jQuery and Angular for the same things : adding elements dynamically, use ajax requests, etc... But I'd like to use jQuery for some things Angular does not do and to allow bootstrap js to work on my app.
What do you think, are jQuery and Angular bad at working together in one single app? Or does it just depend on how we make them work together?
AngularJS uses JQuery itself, the major reason not to mix and match is just what you described of them stepping on each other's toes.
While I was learning Angular a lot of the time I would end up using JQuery alongside it because I didn't understand Angular or know it's full capabilities. After learning it better my code has continuously less JQuery in it, but if I can't figure it out in angular, I'll make sure it works with JQuery until I can get it.
I guess it depends on what you're aiming for. If you want to develop an Angular app, then Angular already includes a version of jQuery called jQlite, but you can still use jQuery in your Angular app if you want to.
You can actually "wrap" jQuery code into custom Angular directives, which is pretty sweet.
In an Angular app it's safe to include jQuery if you want to implement some Bootstrap functionality. Currently, I'm doing that to implement Bootstrap's collapse component. I have only just begun developing in Angular, so I am not an expert as to all the ins-and-outs of using jQuery with Angular.

Dart and third party CSS and JS frameworks

I am gearing up to create my first web application and I've been reading a lot about Google Dart. It looks like a very fun, exciting new approach to web development and I am strongly considering using it for my application.
There is one question that I've been unable to find a solid answer for, however: is it possible to use a CSS/JS framework with Dart? In this case, I'm interested in using Twitter Bootstrap. I'd like to take advantage of the fantastic layout tools, buttons, and javascript modules it provides.
Would it be possible to use Dart and Bootstrap at the same time?
Do I even need to use Bootstrap? Does Dart already provide or make it easy to create what Bootstrap provides?
Thanks for your question. Yes, you can use Bootstrap with a Dart app. Bootstrap is mostly a set of CSS presets, patterns, and styles. There are a few JavaScript powered Bootstrap plugins for more interactive behavior. Depending on what you want to do, those JavaScript plugins can operate independently of your Dart app.
Dart does not bundle anything like Bootstrap. You could use Dart to replicate the Bootstrap plugins, but there isn't much need to do that.
I created small sample. Use bootstrap into Dart.
https://github.com/ehr174/dartstrap
You might consider Bootjack -- a Bootstrap port in Dart.

Can jQuery be used with Ext.js?

After reading some of the jQuery vs ext js questions here and google search result, my understanding is that ext js is a UI building library and jQuery is a more fundamental javascript framework. I've used jQuery for a while now. It's pretty cool but in general a better (much better) javascript.
So my question is: how easy is it to use jQuery for DOM navigation/manipulation and Ext.js for UI in the same project?
There is a page on jQuery website. But the demo is too simple and the external links to Ext.js are all dead.
I'm sure it's possible, but what sort of problems and challenges would I be facing?
You might be wondering why I want to do this. Well, the Ext.js set of UI just looks much better/more polished/more feature rich then jQuery UI. I'm particularly interested in the grid.
Thanks!
Using both libraries side by side is not an issue in the technical way (just add the jquery within a script-tag, that's it!). However, you should not use jQuery for ExtJS' stuff or vice versa. Well, unless you know exactly what you do.
The actual issue can be DOM manipulations (jQuery or ExtJS Core) outside of an ExtJS component that affect an existing component.
So, in a nutshell: You can use DOM manipulations when it will not affect the ExtJS components. Otherwise use the proper way within the component itself.
Well you dont need both the libraries to live together.. Extjs has DOM manipulation api too probably not as vast as jquery but it does have the basic stuff.
Coming to Jquery, jquery has UI building APIs too if not rolled into the library there are vast no of extensions for all kinds of problems. Just try googling whatever UI you are building now with respect to jquery and you will find a library for sure.. There is jquery templates too that lets you generate HTML markup from a template defined by you and applying data objects (json) to it.. Jquery has a vast community too so most of your questios or concerns will be addressed by the community almost instantly..
So yea my suggestion would be to choose one library and stick to it and contribute to the library if there are many missing features..
Lastly I would suggest you choose Jquery.. It rocks.. period..
I think you would have no problem do this stuff... Make Ext.js your main jQuery library and jQuery as the data manipulation library for the DOM.
There would be no problem or conflicts because jQuery is compatible with other javascript libraries.

Dojo style coding

I'm new to dojo style coding. Got used to pure javascript and then jQuery style. Searched through and got some results such as
Dojo, when used with closure compiler works best.
advanced dojo is more OO than procedural type
I'm having problems with
dojo.require() - whenever I download a plugin for dojo, I get the error - 404 NOT FOUND. and half the time for developing goes in fixing this issue, getting the js file and placing it at location.
And is it possible to extend the dojo object as in jQuery we extend the root jquery object by using $.fn.somefunction that is internally defined as jQuery.fn = jQuery.prototype. Is there something similar in dojo.
And I feel documentation for dojo is not as good as jQuery's.
What are dijit and dojox ? When I import dojo.js from Google api library, and then using a plugin in dojo, these dijit and dojox were always a problem.
Need some help. I'm porting few plugins from jQuery to dojo. These plugins are not available in dojo.
I feel that you have to use the entire library when coding using dojo, and then compile it to get the optimized code, and export it to whereever needed. Am I right here? if not, what am I doing wrong?
1) dojo.require automatically downloads the needed files through XHR requests. You don't need to download anything manually. If you use the google CDN all classes should download from there, i would recommend to download the full package to your local application and use it from there. Later you probably want to create a Build. You should also read Starting with Dojo
2) Enhancing dojo like jQuery don't makes any sense. dojo is just the top namespace and under it you have a lot of classes like dojo.Animation, dojo.behavior, dojo.Deferred, dojo.NodeList and a lot of other classes. Some are functions like dojo.connect() and dojo.style().
If you want to create a new class look into dojo.declare. You can also create new classes under the dojo "namespace" or other namespaces.
If you want to add a new function to the dojo namespace, you can just type dojo.new_function = function(){} Like normal JavaScript. But i wouldn't recommend that. It can make problems if you upgrade to later Dojo versions.
jQuery and Dojo are completly different. If you type something like $('.data') in jQuery it fetches all dom-nodes with the class "data" and it returns a new object wraped in the jQuery class.
In Dojo you use dojo.query('.data') for the same effect. But it returns a new object of the type dojo.NodeList. If you want to add new functions to the chain ability you need to extend dojo.NodeList.
There already exists some extension like dojo.NodeList-fx that adds the Animation effect to the dojo.NodeList class. If you load the class with dojo.require() your dojo.Nodelist will extend automatically. Look into Extend dojo.NodeList for more information.
3) The documentation is quite good, everything you asked is already documented and i provided some ressources you completly find on the main page from Dojo. The difference is that Dojo is a completly Toolkit, including GUI, layout systems, Widgets, data abstraction and a lot of other really high-level stuff. If you never worked with something like that, it could be hard to start with it because it contains so much. jQuery doesn't provide anything like this. So sometimes it is sure easier to start with it.
For documentation look at:
Tutorials
Reference Guide
API Browser
4) Dojo is a toolkit that uses 3 namespaces in JavaScript dojo, dijit and dojox. The dojo namespace contains things that nearly everybody uses later, like a Framework for I18N, L10N, model abstraction like dojo.data or dojo.store and a lot of other stuff.
Just loading the "dojo.js" file by the way don't give you everything that dojo provides.
The dijit namespace contains a lot of widgets in Dojo. All Widgets in the dijit namespace have full I10N and L10N support. dijit contains Dialog, Layout Systems, Widgets like calendar, buttons, select fields, radio fields, a full WYSIWYG Editor under dijit.Editor.
Also see the Dijit Theme Editor to see what Dijit contains. The complete site including layout is complete based on dijit.
The dojox namespace contains a lot of extra functionality that dont fit in dijit or are experimental. But not everything is experimental. You find things like the dojox.grid.DataGrid or dojox.charting (Start Charting, Advanced Charting) or Systems like dojox.gfx to create cross-browser graphics that uses SVG, Canvas, VRML, Silverlight or Flash.
Just look into Beyond Dojo's Core to get a (small) overview what dijit and dojox contains.

Which Javascript framework/library to use to manage views/screens in an HTML application?

I am developing an rich Javascript application, using jQuery and some plugins. The application I am developing is becoming rather large and unwieldy. My main problem is managing views: I need to switch between views, some of which share the same components (like embedded views or partials). Currently my "screens" are all contained in various divs, and I am switching between them by hiding one and showing another. This makes navigation quite complex.
My question is: Is there a lightweight Javascript library that can help?
Following requirements:
No generation; I want to change the code on the deployment server, so frameworks requiring some special compilation are out of the question (like Sproutcore or GWT)
Model binding is not a necessity; I am getting the values from various forms and submitting them via Ajax requests
Want everything loaded upfront (i.e. not fetching screens with AJAX)
Must work with IE7
mootools, you can select what components you need from the framework.
http://mootools.net/core/
It turns out that what I was looking for all along was Dojo.
Dojo provides as part of its library the dijit subset library, which covers all the needed UI metaphors, including containers.
Also, as required, it does not involve any compilation as do many of the other Javascript (MVC) frameworks, and it supports IE from version 6.

Categories