0

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.

olimits7
  • 555
  • 2
  • 9
  • 26
  • 1
    You need to read this: http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background – isherwood Mar 13 '15 at 14:43

4 Answers4

4

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.

m0meni
  • 16,006
  • 16
  • 82
  • 141
2

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.

sbarnard
  • 385
  • 3
  • 11
  • Thanks for the reply! My server-side code is PHP, which my lead developer is going to handle integrating to the site. We just need the front-end HTML side from these designers using AngularJS/Bootstrap/CSS/HTML, and then my programmer would put in all the dynamic data with PHP...in this case, then the design team would just need to focus using AngularJS on the "front-end", right? – olimits7 Mar 13 '15 at 15:10
  • You can have angular in back end template if you want or you can keep it simply front end. It's up to you really. – m0meni Mar 13 '15 at 15:14
  • Yes, if all you are really doing with it is just some basic CSS animations and small DOM manipulations it will be fine. I personally use it more for the model view binding with controllers and services where it really shines through. Take into consideration who your developers are though and what their skill sets are. If they truly have very little experience with AngularJS it will take them time to learn it. There is a bit of a learning curve. And you may not get something maintainable if this is the first time they have to use it in a project. Be open and sincere to their concerns :) – sbarnard Mar 13 '15 at 16:19
  • 1
    Never use a technology just for the cool factor. If you aren't going to be maintaining this yourself it is wise to let the people who do maintain it use the technology they are most comfortable with and best at. This will definitely increase the probability that your code will follow best practices which will be better for scaling, performance and maintainability. If you **must** go with a technology for any reason make sure you have people who understand the technology or be very open to delays in the project timeline and code that may not be the prettiest thing you have ever seen. – sbarnard Mar 13 '15 at 16:28
1

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.

LoganRx
  • 362
  • 2
  • 13
  • Thanks for the reply! This is exactly what I was thinking, I just think they are not familiar with AngularJS this is why they are more hesitant in using it since they know JQuery a lot better. – olimits7 Mar 13 '15 at 15:15
0

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.

Maciej Paprocki
  • 1,230
  • 20
  • 29