5

Angular 2 is considered as a complete framework in frontend development. One of advantages is to put frontend interactions in a managed way, in contrast to various functions of jQuery.

On the other hand, jQuery is very flexible and its features can be applied on demand function by function. It is well collaborated with plain HTML codes, especially good-look templates have been prepared by visual designers. From this prospective, jQuery seems more agile.

What is the best practice of applying Angular 2? Should it be mixed with jQuery, bootstrap, and other frontend library/framework together? What responsibility should each of them take?

Kim Kern
  • 54,283
  • 17
  • 197
  • 195
Stanley Stein
  • 397
  • 1
  • 3
  • 17
  • 1
    depends on the requirement, it does not mean that if u are using angular2 jQuery shouldn't be used explicitly. Look for options. Angular2 has everything in it. – Aravind Feb 23 '17 at 09:34
  • What components are used depends on requirements. However, the horrible things are when developers use jQuery by their own preferences and make the application frontend difficult to manage. Therefore I am looking forward to best practice or at least guideline when using them together. – Stanley Stein Feb 23 '17 at 09:47
  • 3
    Best practice is to not use jQuery with Angular2. – Günter Zöchbauer Feb 23 '17 at 09:48
  • See http://stackoverflow.com/questions/13151725/how-is-angularjs-different-from-jquery/13151808#13151808 for a more elaborate answer – Arinaud Feb 23 '17 at 10:24
  • What I like about JQuery is the easy use of DOM and most important: animations! – NaN May 30 '18 at 12:09

2 Answers2

8

As this question is about software design, you may read answers with various point of views, I will not pretend to detain 'the best answer' and will try to stick with facts.

jQuery was originally designed as a DOM manipulation library, plus styling via jQuery-ui plugin, plus data/asynchronous management such as Promises, Deferred, ajax calls. These different sets of features do not interact much with each-other, besides the fact that they can be chained easily. jQuery is not a framework but a library.

  • Angular2's documentation does not recommend manipulation of DOM elements at all. When needed guideline is to use it's Angular2's renderer.
  • Angular2 offers ajax calls using it's 'http' class.
  • Angular2 plays well will rxJs Observables, Promises, etc. allowing you to be a master of asynchronous behaviour. Downside is that the learning curve is more than steep.
  • CSS3 is now here and supports animations really well. Class binding can be done to change appearance of components.
  • Boostrap can be used in an Angular2 project, and doesn't need jQuery to run, unless using it's javascript library.

Even though, using jQuery in a project is compelling:

  • jQuery has a great past, learning it is quite easy and has alot of users.
  • Seriously, it's performance is really good. Library only takes 84kb minified.
  • jQuery has a huge number of plugins, plugins not having their own successor in angular2 world yet. For example Boostrap 'javascript' plugins are mostly (if not all) jQuery plugins. see here
Ryall
  • 12,010
  • 11
  • 53
  • 77
Arinaud
  • 155
  • 6
  • 1
    You pointed out the rational behind of my questions. 1) Data Model should come from AJAX call. 2) DOM element manipulation should be prevented as much as possible. 3) Use CSS3 to change appearance. 4) HOWEVER, jQuery has HUGE number of plugins and layout templates while most of them have no successor in Angular2 world. How can we handle them? – Stanley Stein Feb 27 '17 at 02:51
  • After I experienced some projects using Angular 4 and jQuery, I learnt how to balance Angular 4 and jQuery and make them together. As the above points describe, the most challenge is both jQuery and Angular manipulate DOM. I used the main HTML page (index.html) to include all jQuery stuff and call jQuery functions in some Angular component instances where their conflict should be carefully prevented. Generally speaking, Angular helps to manage component interaction while jQuery helps decoration. – Stanley Stein Aug 29 '17 at 08:09
  • Correction: Bootstrap JS can be used in Angular 2+ without jQuery: https://github.com/valor-software/ngx-bootstrap – Ryall Dec 04 '17 at 18:54
2

One of Angulars core ideas is not to manipulate the DOM directly, which is the core idea of jQuery to do. So as @GünterZöchbauer says, don't use it unless you really have to (which is very rare). jQuery is more like a helper library, Angular is a Framework and should be used as such.
You can of course mix it with Bootstrap, whereas you should only use the styles and use a Angular 2 version of Bootstrap though: https://valor-software.com/ng2-bootstrap/#/ or https://github.com/ng-bootstrap/ng-bootstrap.

As for

and other frontend library/framework together?

You shouldn't mix it with another Framework, that just messes things up. Libraries sure though, for most of the popular libraries out there exists (or will exist) a Angular version which comes with TypeScript support etc.

bergben
  • 1,385
  • 1
  • 16
  • 35