2

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!

Improve this question
7
  • Try to use css in stead of javascript for animation wherever you can. Also, angular and jquery sounds like overkill for a single-page app. Are you sure you need it? If not, why don't you tell the guys who said "We shall use Angular for all the things" that it is a bad idea? Commented May 9, 2014 at 11:32
  • I think directives can help you.. The fact that can you isolate your controls and possible issue also will let you improvement them individually. Commented May 9, 2014 at 11:54
  • Angular itself is quite heavy. I don't know it very well, but I wouldn't expect it to run smoothly on mobile device. Specifically, $watches need to reevaluate and deep-copy watched value on each user action that touches the $scope, which often generates a lot of unnecessary computation. Also, animations themselves may be a problem. Using css may help a bit. Commented May 9, 2014 at 12:03
  • @Dalorzo: Appreciation? You probably meant something different, I can't really find appreciation in my comment. Anyway, I agree with you, that using directives can help. I'm just not convinced, if that will be sufficient. Commented May 9, 2014 at 12:42
  • Thanks @Frax what I meant is that I do not think angular "heaviness" is the direct responsible of performance issues in our applications but instead how use Angular. I agree that abusing of $watch functions can be harmful but are some other very good parts in angular and can help improve performance a different way. Commented May 9, 2014 at 13:08

2 Answers 2

Reset to default
4

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 this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.