I'm creating a single page view website with AngularJs and jQuery intended for iPads and other tablets. I used AngularJs because it was requested by our client, but not knowing the AngularJs philosophy I decided to control click events with jQuery (big mistake, I know).
The thing is, mixing the two libraries together this way seems like it causes a lot of performance issues on mobile devices. I need to load and manipulate with animations hundreds of divs simultaneously (it's a POS app), and I was wondering if implementing directives instead of using jQuery events would give me a performance boost. If not, I really don't see the reason why I should develop directives.
Thanks in advance!
So I improved the problem thanks to a few things. First, reducing the number of angular elements greatly increases performance. Second, I used jquery-animate-enhanced for my movement animations, which also improves translations a lot! Third I used animate.css for my fade animations, which is great.
I'm still trying to improve performance with view recycling kind of like in iOS or Android, but I'm finding that ng-repeat isn't very happy with that. So, I'm probably going to have to implement directives.
Thank you!
Improve performance :
I have been through this situation and the best thing I did to improve the performance of my SPA web-app is to use native Javascript wherever possible instead of jQuery.
For example, I replaced my
$(element).html("This is some text") to element.innerHTML="This is some text"
and
$(document).on('scroll',element,callbackFuntions)
to element.addEventListener('scroll',callbackFunction,{passive:true})
Notice the {passive:true} parameter in my scroll even listener, Passing this, incredibly increased my scrolling experience and helped me get rid of the scroll-lags.
Reason to use Directive:
There might be times when you want to run a script when the particular element is created in the dom and not before it. That's when directives help a lot.
Related
I am building a mobile web app and thinking of the best approach to manage the app pages (say 'full screen views').
When using jQuery Mobile, the heavily used pages are all kept in the DOM. Some other framework (Backbone/Marionette) users suggest having only one page that is split into regions which update on navigation. Since my pages don't have much to share between themselves (even the header/footer changes) this means that the whole page should be rerendered on navigation if removed before.
By quickly playing around with both approaches, I have noticed that the already cached page from the DOM much quicker than rendering it all again and I didn't feel the performance issues while keeping the pages for longer time.
My question is, what is the best approach from your experiences? If the page content doesn't change much or at all, then maybe I should not remove the views. (I am talking of max 10 mid-weight pages). Cheers
I believe the conventional thing to do (and usually the most performant) is to only render enough content to fill the page. If the content cannot be seen, there is little use having it in the DOM.
However, just because that might be the conventional thing to do doesn't mean that it is the best thing for your app. If you are able to achieve noticeably better performance keeping all your content in the DOM then I do not see that as a bad approach.
You may be experiencing performance issues with the conventional approach because you do not have the experience or know-how to improve that approach yet, but you will learn those tricks eventually and that may be the best time to switch to the conventional approach over your more performant approach.
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 7 years ago.
Improve this question
I'm working with a design team to redesign my website, and my lead developer told me to tell them I wanted to use AngularJS instead of JQuery for my HTML pages since it is clean code and has the most modern libs; which they agreed to use.
I guess since AngularJS is newer than JQuery they don't have as much experience with it. In the project scope, we agreed that they would do just the "front-end" work (e.g. templated bootstrap, css/html and animations of the site) for the redesign, but they told me that someone from their team said that AngularJS is also "back-end" programming work too...is this accurate?
If they are creating my HTML pages will they have to do "back-end" programming work if they use AngularJS or will this be only "front-end" work? They say they have to use JQuery because this is all "front-end" work.
Also, they are telling me for specific animation effects such as fading in and out of elements etc. that they want to use jQuery and Bootstrap. They tell me that AngularJS is not the best solution for animations, but it's better for manipulating dynamic and real time information for the website...is this accurate?
It seems to me they are just trying to find ways to not use AngularJS and use JQuery instead which they are more comfortable with.
Animations in AngularJS are possible using one of it's modules called ngAnimate it works by adding CSS classes to your HTML elements, but you need to write the classes yourself and you'll be using CSS3 animations which are much better performance wise than JQuery animations, and only require pure CSS. This is what I used at first and it seemed to be working pretty well for me. However, what I found was that as I started doing more complex animations my CSS rules grew huge especially because you have to prefix most CSS with -webkit -moz -o and the like.
At this point I was ready to try alternatives, but I didn't want to go back to jQuery. What I found was GSAP. It's a stupidly powerful and convenient javascript library for animations, and I could integrate it perfectly into Angular using directives. For example I have this in one of my projects:
.directive('highlight', function() {
return {
scope: {},
restrict: 'A',
link: function(scope, element) {
element.on('mouseenter', function() {
TweenMax.to(element, 0.5, {
color: '#000',
borderColor: '#000',
backgroundColor: '#F2F2F2'
});
});
element.on('mouseleave', function() {
TweenMax.to(element, 0.5, {
color: '#BDBDBD',
borderColor: '#BDBDBD',
backgroundColor: '#FFF'
});
});
}
};
})
If I have a link in my HTML shaped like a button it was as simple as writing
<button highlight></button>
And I'd have a button with an animated border, text color, and background color. Moreover, it's reuseable. I don't have to write the highlight rules for every single button in my DOM. I just have to add the attribute highlight.
jQuery works, but it's animations suck. Angular is better, but it's verbose and I personally didn't enjoy implementing it. I lean towards GSAP because of how powerful and flexible it can be while also giving you the best performance in your animation.
As LoganRx said AngularJS is a client side javascript library. It does have a superb animation module that can be added for CSS animations. However if CSS animations don't cut it you are probably going to want to look at Javascript animations as well. This is where Jquery animations would come into play. There are many Javascript animation libraries out there however. Furthermore AngularJS and Jquery have two different purposes. From the example in your comment fade in and fade out animations are basic css animations that are included with the AngularJS animation module. So you could use it for that purpose.
AngularJS obviously has no dependency on JQuery and vice versa. AngularJS is great for model and view binding making ajax requests, routing, CSS animations and a whole lot more! In fact you can build an entire application with just AngularJS. Jquery however is a very general purpose javascript library that gives you utilities that are not available in AngularJS. In many cases you are going to use both libraries.
Yearofmoo who has contributed greatly to AngularJS has a great blog which includes a lot of animation examples for AngularJS. You can find his blog here: http://www.yearofmoo.com/
To address the issue of whether server side work will need to be done is actually quite tricky. It depends on how the application is rendering dynamic content right now. If the whole HTML document is just being generated by the server based on some dynamic information and there are no real restful data end points then yes you are probably going to have to do some server side work to create end points where you can retrieve the dynamic data to be consumed with AngularJS. However if the current application relies heavily on Ajax calls that return Json or XML objects (or if it was really well designed, and it uses serialization frameworks) then you probably won't have to do much server side changes if any at all.
First off AngularJS is a front-end JS framework and technically does not require any back-end programming. It can interact with a back-end very easily and efficiently but AngularJS by itself is not back-end programming.
In terms of the animations there are just as many ways to animate things in Angular as in jQuery. CSS Transitions, Transforms, and Animations will all work with Angular without jQuery it is just a different way of thinking. There is also an Angular Module called NgAnimate which allows for more directed animations for different interactions on the page.
So in conclusion, as an Angular Developer, I would be aware that everything that you are looking for is possible to accomplish with Angular and is not difficult unless they are unfamiliar with Angular. But the aspects of the application that they are claiming would be made easier with jQuery are extremely similar in syntax and execution in Angular. Also, Angular has jqLite built into it which allows for some basic jQuery functionality already.
Angular is not for animations. Angular is framework for developing applications for the web. So things like advanced user interfaces for example.
Doing animations in angular is just bad idea. You can, but they will be bad, although doing them in jQuery can be also bad if you don't use it properly(and by the way jQuery is also not for animations, but have few useful functions). jQuery is still update and it's industry standard. It was published few years ago for the first time, but new versions are coming regularly.
Don't get me wrong here Angular animations might be quite well done, however whole angular it's tones of tones of code, which only some bits have anything to do with animations
Angular is not back end framework. You can connect it easily with backend using for example mean.io but angular itself mostly still stays on front.
By the way, in my opinion angular is slow and don't embrace good practices. Also next version of angular will be not compatible with previous one so no update to most recent version in the future.
Right now, I am taking a look at Angularjs after spending sometime playing with twitter's bootstrap. I really like bootstrap because it's easy, sleek and very mobile-friendly. Now for angularjs, I see people recommending it instead of Jquery and going as far as in saying that, DO NOT USE JQUERY AT ALL and do everything on angularjs.
This question and answers helped to shape some of my beliefs and why I should move to angularjs than jquery.
How do I “think in AngularJS” if I have a jQuery background?
Accepted answer to this question ( which is very well-detailed!) goes like this on its overall summary:
Don't even use jQuery. Don't even include it. It will hold you back.
And when you come to a problem that you think you know how to solve in
jQuery already, before you reach for the $, try to think about how to
do it within the confines the AngularJS. If you don't know, ask! 19
times out of 20, the best way to do it doesn't need jQuery and to try
to solve it with jQuery results in more work for you.
Even the FAQs from angularjs website says not to use it Angularjs FAQs.
DOM Manipulation
Stop trying to use jQuery to modify the DOM in
controllers. Really. That includes adding elements, removing elements,
retrieving their contents, showing and hiding them. Use built-in
directives, or write your own where necessary, to do your DOM
manipulation. See below about duplicating functionality.
If you're struggling to break the habit, consider removing jQuery from
your app. Really. Angular has the $http service and powerful
directives that make it almost always unnecessary. Angular's bundled
jQLite has a handful of the features most commonly used in writing
Angular directives, especially binding to events.
The concept of angularjs seems tempting. In fact, who would not like abstracting away DOM manipulation logic? However, bootstrap makes it so much easy when you are designing web-pages but since bootstrap uses jquery, bootstrap and angularjs together means that the code and overall web-page is still dependent on jquery. Is this mixer completely undesirable? If so then, what is the best way to keep hanging to bootstrap while using angularjs? Simply saying, I don't care so much about jquery but I like bootstrap.
I might be talking in circles here so I will try to reword what I am saying in a single sentence.
What is the best way to use angularjs and bootstrap together without creating spaghetti code where one place is so jquery-based and next angularjs-based?Or is the idea of using bootstrap and angularjs together is conceptually against what angularjs was meant for?
When trying to integrate jQuery things in to Angular, the best approach is to wrap it in a directive. This is what Angular-Strap originally did, but the recent version upgrade to 2.0 completely removed those dependencies and does it all in Angular (and it is a much better product for having done so.) This is the same method that Angular-UI took from day 1 and that continues today.
When you do something like this, the biggest hurdle is trying to keep things "Angular-ized" when working with the DOM. The examples that both Angular-Strap and Angular-UI can provide if you look at the underlying code are very good and should give you the right direction.
I am developing a large scale HTML5 app, and I really wonder about this issue. I will have a lot of dialog boxes and tabs that will open by user interaction.
I wonder what is the best practice - writing all the dialog boxes and tabs in the HTML document with display:none to all of them, or create these HTML sections on the fly with JS or jQuery every time the user making the relevant interaction.
What is better in terms of performance, ease of development, readability, etc?
Any help will be appreciated.
I'll try to address this question as good as I can.
1 - As I said in the comments, Avoid inline styling.
First and foremost this is because inline styling voilates DRY.
Having to repeat the same thing over and over again for this is very bad for maintenance and for developing since instead of changing code once you have to change it at ~100 places.
2 - Avoiding inline styling is also good for accessibility, some screen readers and search engine crawlers do indexing work and reading work based on css selectors and thusly using inline styling will force them to either ignore or misintrepret things.
3 - When working as developers it's easy to do inline styling "just for the fun" but what you're actually doing is mixing concerns. HTML is the content and CSS is the design.
Mixing these two usually leads to headaches and making my job as a developer that comes after you a pain in the effin ass since I have no idea what's styled and how.
Now, onto performance.
When you use inline styles, what you're telling the browser is basically "hey, for every page page view apply these styles to all of these elements." Now, this just became really apparent why this is bad.
You have no ability to cache and store your css and basically forces the browser to rerender your styles every time. Using an external CSS file will actually help you speed up your site since the browser caches it.
That was that for the css part.
The javascript you had asked about.
As I said, hide things with css and show with javascript. Now why do you want to do this instead of pulling everything in?
Well, you can do both. If you're only a webbrowser experience then you can do either, it doesn't matter. I myself prefer to have stuff in the DOM because it relates to content and if you're a large app having dozens of dozens of ajax calls will only make it harder for maintenance. I believe if you have to ajax stuff in make sure it counts and is logical and not just for the kicks (I think this applies if only you have jQuery and plain javascript at your disposal).
If you're working with backbone.js, for example, it's based on views and introduces some form of "MVC" into your frontend enabling you to have views with subviews that can pull content in from the server.
Hope that helps a bit with making a decision! :)
I would say it depends on how many tabs your application has and how big these are.
Big content inside the tabs mean that the application will take long to load when started and consume much ram. If this is the case, I suppose to load them as needed.
Small content inside the tabs will load fast, so load everything at once to increase performance when the tabs are clicked.
Don't forget to run some tests on older computers with a slow internet connection to see how your application behaves. Not everyone has the newest and fastest hardware.
We have Tabs-Menu controls which rely on jQuery library and the dev-manager insist that i should get the functions that controls are using into a separate java-script file so we don't have to reference/rely on the whole jQuery, so it made me wonder.. is it a bad idea to edit the jQuery files ?
Yes it is a very bad idea. It would be a nightmare to maintain with all the bug fixes and feature changes the jQuery team would make.
You should write plugins to modify the behavior as you want.
The gzipped production version of jQuery is 31K. Not only is this an unmaintainable idea, but this is a pre-optimization. Any images beyond tiny PNGs or GIFs will likely be as large or larger than the entire jQuery library.
Additionally, this is time that could be spent addressing actual problems. I don't know what sort of userbase you're targeting, but unless every one of your users is on dialup, 31K will take no time at all to download.
is it a bad idea to edit the jQuery files ?
Yes. If you edit the core jQuery library, you make it much more difficult to use future versions of jQuery, which may include important new features, bug fixes, etc. If you make your changes in plugins, as you should, you can just drop in the new versions of jQuery when they're released.
Well I'd say it's a pretty bad idea. You really want the responsibility of maintaining the mess you have left after chopping it out? Are you an expert on the jQuery library? Do you understand all of the side effects? You would be better off rewriting portions of your Tabs-Menu controls without jQuery than trying to chop out bits of jQuery. I presume that the issue is that you don't want the "overhead" of including a relatively large script for a small set of features. This is unfortunately the way of jQuery. Either
Accept that you have to use jQuery, and make the most of having it referenced
Rewrite your Tabs-Menu controls without jQuery
any other option is going to be painful. Insist that your dev-manager reads the answers to the question.