Best alternatives to jQuery on AngularJS [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
Well, I wish we could list the best alternatives to jQuery for use with AngularJS, taking into account compatibility with AngularJS and the ability to manipulate the styles (css), besides the possibility of using effects such as fadeIn, fadeOut, slideDown, slideUp, etc.
As based on the response to comment propose to take into consideration the following factors:
Compatibility with AngularJS.
Handling of styles.
Handling events.
Effects
...
The idea is that this thread is helpful when alternatives to jQuery to
work with AngulaJS.

Well, I would just use vanilla javascript to do the DOM manipulation. Styles and events would be possible within angular.
And as far as effects are concerned, a simple library like animate.css can help!
So in short,
Compatibility with AngularJS. - Its vanilla Javascript so no issues here
Handling of styles. - By handling of styles, if you mean using conditional styles, it could be accomplished by angular's ng-class
Handling DOM. - Most of the DOM manipulations can be handled by pure javascript. If you still need a lightweight library go for one of these
ryejs or nodelist or use jqlite that comes bundled with angular
Handling events. - As you are going to be using angularJs, I presume you would be using angular's event model.
Effects - Definitely animate.css

tl;dr: Use angular for all of this, not jquery.
First of all, you can(must) do all of this with angular. Or there is no point to use angular at all. I mean this is very bad practice to manipulate dom directly or do other jquery-style things. Angular provide much more modern approach for all of this things (via built-in and custom directives and etc.).
As the second point - what's wrong with jquery? You're able to use jquery with angular. It's a common practice, because some of third-party libs have a jquery dependency.
And the last one - Angular have built-in jqlite inside, so you're able to do some stuff in this way
As a light-weigth alternatives to jquery you can use zeptojs. But again - this is weird. And I didn't sure how much zepto is better than jqlite.
And as a last point - you can do everything with pure js. But you should keep in mind point about browser's support

Related

Is it a bad practice to use jQuery in Angular? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
My question is the following. Should I avoid using any kind of jQuery code in Angular application as it seems legit to have only one thing interacting with DOM.
Another question is if anyone came across problems where he couldn't find any other solution but writing a quick hack with jQuery.
Thank YOU!
Yes it's a bad practice, but sometimes it will save you much time, especially when you are looking for a plugin,
Do it when necessary only, and keep a note to switch it back when other solutions are available.
The first thing you should do is to read this thread on SO "Thinking in AngularJS" if I have a jQuery background?. This will give you some perspective.
When it comes to Angular, it the model that drives the view and most of the times direct DOM manipulation is not required.
For example if you are using DOM manipulation to show\hide element, add remove class or set style, then better to use ng-show\ng-class\ng-style directive.
But there are cases when DOM manipulation is required and that is the time you write directives and either use jqLite or jQuery to manipulate DOM.
My suggestion would be to avoid jQuery unless you have to incorporate a jquery plugin that is dependent on jQuery.
While developing always look if the inbuilt directives that can serve your purpose. If not can jqLite be used to achieve what is desired. Your final resort should be jQuery.
Well it's just two large resources, which makes your app "heavy". Otherwise it's only a preference thing. Personally I don't use jQuery with any of the reactive frameworks (Vue, React nor Angular).
Remember that anything jQuery can do, you can do with vanilla JS.

Embed Javascript in HTML Coding Best Practice [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am writing my first html application. I have both JavaScript and jQuery embedded at the bottom of the html file.
Is it a good practice to mix JavaScript and jQuery together?
Currently, I am importing jQuery 3.3.1; what if next version comes out? How can I make the imported jQuery dynamic?
Answering your questions one by one.
First of all, you are keeping your scripts at the bottom of the page. And that is really a good practice to keep all the scripts at the bottom of the page so that it will not block rendering of the page.
Second, mixing JavaScript & jQuery code is completely a personal choice. But still, I would recommend going with either JavaScript or jQuery to maintain code consistency & it's understandability. It will be easier for other developers to understand code that is written in a consistent way. Though, there might be some points where you would like to prefer JavaScript to achieve performance & you should do that but such cases will be very few.
Best Practice: Write all your scripting code in separate file & take reference of that file in your HTML page.
Don't worry about the jQuery version updates. Current jQuery version is very very much stable, so even if the newer version comes up - you would not need to switch to that version until or unless you are blocked for some feature that is only available in the latest version.
This will be your Jquery which is in your system
<script src="jquery-3.3.1.min.js"></script>
and if you thinking according updates then you should go with CDN links
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
1) JQuery is a JavaScript framework. You can write the same exact thing in plain JavaScript that you can in JQuery. The difference is that JQuery will often be shorter and perhaps easier to read. So in short they are meant to be mixed together.
2) Also, if a new version of JQuery comes out nothing will happen to your project. Jquery is just a bunch of plain Javascript that makes things easier for you. It won't stop working because a newer version is available.
Jquery is Javascript I don't think it is bad practice to mix them!

JavaScript performance on hybrid apps [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm writing a hybrid app with HTML5, JavaScript and CSS for Android 4.0+ and iOS 7.0+. I was wondering: does JavaScript consumes much memory of the smartphone? Basically my script will: parse objects, handle events, Ajax calls, update the view, etc. I was considering about use jQuery o Angular.js too.
I'm focusing on performance and smooth experience.
Thanks!
As Ari Lerner writes about AngularJS in ng-book, "When we mix Angular into the flow, it extends this normal browser flow to create an Angular context. The Angular context refers specifically to code that runs inside the Angular event loop, referred to as the $digest loop." This is good for updating the view with a JavaScript library.
Both AngularJS and jQuery are extremely efficient, and can be used together to meet the needs listed above.
In my opinion, the optimal JavaScript library for mobile is jQuery Mobile.
https://docs.angularjs.org/misc/faq
Angular JS uses Jquery for some of its operations, and uses its own built in version if none is declared. I would suggest reading the documentation for a full grasp.

How to get started with jQuery Mobile? (Programmers background) [closed]

Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
I have a background in C++/C# and Java (Android). Now, I want to pick up what seems to me the best solution for mobile web applications: jQuery Mobile.
I know some of the very basics of HTML/DOM/CSS, but not in a structured/thorough manner.
Javascript-wise, it seems to be a rather different programming approach than I'm used to.
Where do you recommend I start? Javascript (and possibly Ajax) or jQuery or could I afford by immediately starting with jQuery mobile?
Plus, could you recommend me some good learning/example sources as well?
Thank you in advance.
-Thomas
jQuery mobile is a plugin written using jQuery in order to Enhance html5 elements appearance and behaviour to match iPhone design pattern for application behaviour (Progressive enhancement).
Whilst it is fairly easy to get started filling the templates jQMobile provides as a C# developer you need to understand that working with JavaScript and jQuery has some significant differences.
jQuery was a community necessity and is basically nothing but an abstraction layer on top of JavaScript to rectify the difficulties programmers were facing which mainly had to do with the difference of JavaScript implementation in different browsers and also the weakness in the DOM which is an API which allows JavaScript to access elements inside the document.
What jQ basically does is it takes care of those differences for you and exposes methods to you that are pretty much guaranteed to deliver the same results across supported browsers.
This will greatly help you get started by still wont allow you to learn the fundamental differences between the world you are coming from and the world you are getting into.
JS does not have classes only functions. However functions can have methods and be instantiated. The inheritance in js is Prototypal Inheritance.
new f()
produces a new object that inherits from
f.prototype
more info here
To learn the basics and understand more about this language before you use it! please watch this also

Lightweight JS AJAX library [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
My friend and I have a site (www.rosasecta.com). It uses a lot of Ajax, but it's all by hand, and it's really ugly and hard to dig through. We want to switch to a JS library, but JQuery, Prototype, and Dojo are to large. We just want a small, compact library that can do AJAX cleanly and some basic DOM selecters. Can anybody recommend one?
Thanks in advance.
The selector portion of jQuery, dojo (and some of the other frameworks) is actually available as a separate library, the Sizzle Selector library:
http://sizzlejs.com/
Sizzle purports to be only 4kb minified and gzipped according to their site.
However, with ajax too, I think a customized jquery with only the smallest bits may be the best "complete package". Some of the other libraries like dojo have methods of building them with exactly the features you want, too.
The default jquery minified+gzipped is only 19kb. I think a core build can be done down to only 12kb.
jQuery isn't large at all, and you can use Google's hosted version meaning many of your users won't even have to download it upon visiting your page.
You requested:
Lightweight
AJAX Capabilities
DOM Selectors
You've practically got jQuery already.
jQuery minified at aro 56K is less than the size of a typical JPG file. It will do everything you need and a whooooooole lot more
Zepto.js: http://zeptojs.com/#download (8kb gzipped)
What about MooTools? It won't provide everything jQuery will, but if it will do what you need, it's very small.
Atomic.js , Size is less than 1kb and angular style , simple js library
https://github.com/cferdinandi/atomic
Read more
https://ultimatecourses.com/blog/writing-a-standalone-ajax-xhr-javascript-micro-library

Categories