I am currently developing an application where I need some richer elements. Some of these are searches live updating, adding checkboxes to arrays and the like.
I have successfully implemented this using AngularJS, but I am not really sure if it's good practice to use AngularJS on just a few pages.
Would it be better practice to use JQuery for this purpose, and does it go against the goal of AngularJS?
Yea the transition from AngularJS can be a difficult one. Of course, they can both be used side-by-side but it kinda defeats the purpose of Angular. I use to be big jQuery user but I've tried to stay as far away from it as I can when using Angular.
Sometimes I'll come across a problem and I'll think to myself "Wow this would be so simple to do in jQuery". But if I stick to Angular and use their philosophy, I find that the "Angular" solution is often the one that uses better coding practices.
TL;DR: AngularJS and jQuery work fine side-by-side but I recommend getting into the habit of using just Angular, as it will result in more organized, maintainable and understandable code.
They can be used together. The two libraries have different purposes. jQuery provides an alternate interface to the DOM that is more consistent across all the browsers, so you don't have to worry about various browser eccentricities. AngularJS is a framework that provides for such things like binding MVC-style objects on the client side.
Related
I'm new to angular. Some forums and tutorials show how to integrate jquery plugins in angular. Actually there are plenty of jquery plugins. I used a lot of jquery plugin in my previous projects which were implemented only in jquery. So I would like to get that feel (colors,UI, animation...) into my angular 7 project. But in the middle, I'm worrying that some forums say "Don't mix jquery plugins with angular"
So may I import jquery plugins inside angular? Will it be a problem? For Eg : Datatable has a lot of function where I need most. Jquery Confirm Master gives a better UI. And there are a lot of API calls also. If I need to use these kind of jquery plugins, what can I do?
There are some core reasons you shouldn't access the DOM directly in Angular (as you do with Jquery). I answered a similar question here
Angular is a fully blown framework where you shouldn't differ from the 'Angular way'. There are several reasons for this. For one your code will become very complicated in the way it works. Some things you do in Jquery is very hideous compared to how simple you can implement the same thing with Angular. Another reason is that Angular applications are not always meant to be ran in a browser. For example you can run Angular in a web worker, which doesn't have direct access to the DOM. Your components will become dependent on Jquery when there is no need to, which might hurt you if you want to reuse those components in other Angular applications.
Your value point for sticking to Jquery is that you can reuse that code. To that I will say that you should rewrite those components for your Angular application so you can later reuse those components in other Angular applications. Modernize / rewrite your components now, so you have optimized clean Angular components. You will quickly find that your Jquery code is overly complicated compared to how you do similar things in the Angular framework.
I read on the FAQs of Angular that "Angular can use jQuery if it's present in your app when the application is being bootstrapped".
My question is, is it a good practice or would there be any conflict or performance issue if a site contains jquery and angularjs scripts?
I plan to build a site that would contain both jquery and angularjs.
The reason for this is that I plan to use jquery mostly for plugins like carousel, slideshow, lightbox, calendar, form validation, etc. and angularjs will be mostly used for data binding. (mostly ajax request then bind it a table using ng-repeat, etc)
Do you think this is a good approach or should I just stick with only one (jquery or angular) to do all the process?
This is because I'm not sure how much plugins like carousel, slideshow, lightbox, etc. are available in angular and if I would be able to find such plugins that may be present in jquery but not in angular.
Thanks a lot!
From a technical point of view it is no problem to use AngularJS along with jQuery. In fact Angular itself contains a light version of jQuery: jqLite. So you never really use it completely without jQuery. For example basic selectors are always available. However, this is not sufficient for running your jQuery plugins.
From an architectural point of view, mixing jQuery and Angular can be confusing. Certain things can be done the "jQuery way" or the "Angular way" -- such as attaching a click handler to an element. If you include jQuery, you should be consistent with regard to these issues. I suggest you do it the Angular way (e.g. use ng-click in your templates instead of $(selector).on('click',...) in your directive's link function -- or even worse in services or elsewhere).
In your case it is justified to use both together. There are tons of great jQuery plugins and there isn't an Angular version for all of them yet. I would include jQuery only for those plugins and discipline myself not to use jQuery features apart from that.
So obviously, you'll get a hit from initial loading of your site, because not only will you be getting Angular scripts you'll also be calling for jQuery scripts.
There is no problem with you doing this, it is something you'll have to weigh up, pros and cons.
As for this:
The reason for this is that I plan to use jquery mostly for plugins
like carousel, slideshow, lightbox, calendar, form validation, etc.
and angularjs will be mostly used for data binding. (mostly ajax
request then bind it a table using ng-repeat, etc)
So with a bit of searching (ui bootstrap) you'll find that stuff like carousel, slideshow, lightbox, calendar can all be done with Angular Directives (Angular's way of interacting with the DOM). I created a massive widget drag and drop screen all with Angular - no jQuery. So what you can achieve is limitless* and is a lot easier to do with straight Angular because you're less likely to run into digest cycle issues.
Form validation what an interesting point, I believe this to be a pain point for most web developers for years. What is nice about Angular is this comes supported straight out of the box. And it is good (and symmantic). Take email validation for example:
<input type="email" ng-model="person.email" ng-required />
Angular will automatically regex this email to check it is valid. And it will also make sure there is a value. The power doesn't stop there. Like I said it is extensively supported out of the box.
The advice I can give you is, search google for Angular components, test them out before making your decision. But I can assure you that, I have done everything you're talking about purely in Angular.
But the joy of programming that it is entirely up to you!
* you imaginations the limit, angular will find ways to limit you..... etc. etc.
This is not recommended. BTW, jQlite is already included in Angular...
It is not a good practice to use jquery with an angular js.Angular consist of almost all the functionalities that you can get from jquery.
Although if you have some specific scenarios where you need the strongly type model binding of angular js and you want to use jquery for your other work then you can use both in a single project.
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 time to implement. And since there is lack of proper documentation, we often have to resort to reading the source code and then implementing a workaround.
I feel that we would speed up development, and make it easier to maintain the code if we moved to some other framework. Our codebase is rather large, since it is a complex application, so we do not have time to re-write the whole thing at once. I was therefore hoping that it might be possible to combine Dojo with some other framework, so that we can move away from Dojo incrementally. I have only dabbled with these other framework in my spare time, and only wrote some small example apps, so I do not feel that I can really say whether or not they would play well with another framework, so I'm hoping that some of you out there can.
The frameworks I've been looking into - in the order of what I'd prefer based on my short investigation, but feel free to convince me otherwise.
Ember
React
Polymer
Angular (last due to me being scared of the major 2.0 overhaul)
While the main question is whether or not it is possible, please also advice on if you think it is a bad idea to do so.
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.
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.
If I am starting a new project how should I pick between using YUI 2, YUI 3 and jQuery?
I know there are a bunch of questions/answers already about can you use them together, but I am trying to figure out what criteria I should be thinking about to make my decision.
Are they overlapping?
Is one better at GUI and the other better at internals?
Do they play well together? My understanding from other questions is that they can live in different namespaces, so they can live together, but that doesn't necessarily mean that it is good to use both.
Thanks!
If you are familiar with neither, I personally have found jQuery's documentation and API easier to understand than YUI's, at least for simpler things. It also appears there is more jQuery related information than YUI on stackoverflow.
YUI does have its users and supporters though, so check it out in case you end up finding it suitable for you. It's got a huge library of additional modules you can use for complex web applications.
My usual advice would be to go with whatever you're familiar with, and I say this because I don't think it's worth dropping one to start learning the other from scratch. But if you are familiar with neither, then you should check out how easy the documentation for both is to understand.
PS I would not recommend YUI2 if you're starting anew as it has been superceded by YUI3, which is much better designed.
We need more information about the type and size of the project before a proper library can be suggested.
For example, if you're building a semi-complex/large-ish web app, I would suggest Dojo or ExtJs. Otherwise, for smaller projects, jQuery might be more appropriate. I cannot comment on YUI as I have not used it.
Impossible to say without knowing more details about the project. Use jQuery or Prototype for things like DOM manipulation and making autocomplete, etc. If you need a more powerful Javascript implementation take a look at ExtJS, which is basically a full stack framework for Javascript.
Both are JS frameworks and there to help you. YUI is known to be more natural in them and more closer to the original Javascript while jQuery is known as more easy and you find more jQuery users and support around then YUI. However, as said earlier, it depends on the project, if it is likely that you will be making your own custom widgets, I will suggest you to go with YUI but if it's like a simple e-commerce website in which you just need some fancy galleries and shopping cart, go with jQuery, you will learn and implement that quickly. I am not saying that you can not go more in depth with jQuery but my impression is that jQuery is more of a CakePHP for PHP like of framework which gets you off the grounds quickly.
In my opinion there is no need for you to use them side by side in a single project, that will just produce the over-head as both do whatever you want to do in them i.e creating dialog panels, autocomplete quick searches, event related utilities etc.
I am writing down a series of beginner and mid-level tutorials for YUI users, let me know if you find them useful or if there is anything else where I can help.
http://ciitronian.com/blog/tag/yui/
I am an avid user of the YUI framework (http://developer.yahoo.com/yui/). It has its' strengths and weaknesses both performance wise and syntax wise. I have seen a bit of JQuery and I have worked a little with prototype as well but I have stuck mainly to YUI. My question is, is it better to stick with one Javascript library per application, or leverage the abilities of multiple javascript frameworks in your application?
I think it is better to use one framework for at least two reasons:
1. Code is easy to maintain because there is no syntax mix.
2. Application loads a little faster and I think should execute little faster.
My guess is that multiple frameworks is better as long as each has its purpose. If I'm building an ASP.Net web application with AJAX functionality, there may be some built-in ASP.Net AJAX Javascript libraries being used automatically that can be combined with JQuery to handle some situations. Alternatively, one could have third-party controls like Telerik's RAD controls that also bring in more Javascript code possibly. The key is to understand what each framework is adding in terms of rolling your own.
Sure less frameworks in the same website will make your life easier, so try as you can to use one framework, and if you are going to use more than one, take care from conflicts and redundancy.
If i am in your place, i will start searching the framework i have for some plugins and updates, if didn't find will add the new framework.
One more point: don't panic from using more than one framework, the big and famous frameworks such as jquery has its implementations to solve conflicts and work side by side with other javascript libraries
Also... if you use 2 diffrent frameworks at the same time, some functions in one framework could override an function in the other framework, and make ugly conflicts.. e.g the $() could be implemented in diffrent ways, and make something crash, if other functions of the framework is using it. (and they sure do!)
I think its better to use 1 framework in your development, for consistency of API and loading speed. the problem sometime is no framework is comprehensive enough to have all of our development needs.
This is just came into mailbox, their advertisement saying it's a comprehensive framework, with plenty of widget: grid with grouping, charts, forms, tab, fields and so. I haven't play it long, but it seems very promising. check here