Share On Twitter Facebook Google+ LinkedIn Pinterest Tumblr Reddit
Question

Are jQuery and Bootstrap outdated?

Tags: bootsrap jquery
Date:
Status:Unresolved
Question Id:38

Are jQuery and Bootstrap outdated? I have read that they are now being replaced by React and CSS grid but I keep seeing them in the tutorials for web developers. Is it worth for a beginner to invest his time in learning these technologies?

Answer
Date:
Correct:No

JQuery and Bootstrap are outdated. ‘Legacy with a large user base’ would be the right description. The large user base occurs because the most popular publishing platform on the web still relies on it.

The problems JQuery/Bootstrap were built to fix are now better handled using JavaScript and CSS3. These problems included;

  • Weaker cross browser support for programmatic tag selection and DOM manipulation.
  • Web designers with good HTML/CSS and design-chops but zero JavaScript skills were common before ‘the rise of the frameworks’, i.e. before about 2011.
  • Lots of old CSS rules that made styling confusing and non-consistent, especially container positioning (i.e. rules meant for text alignment and spacing were used for container positioning because there was no alternative). These inconsistencies and counter-logical standards made many designers turn to pre-made css such as Bootstrap for their core styling. Modern CSS (flexbox, grid) now fixes this.

So

  • JQuery is clearly legacy (and Bootstrap v5 doesn’t even use it anymore).
  • Bootstrap has been deprecated because of its reliance on JQuery up to the beginning of 2020, and v5 has arrived far too late because it is competing with better native JS/CSS3 support.

So both are pretty much legacy. What’s the issue?

JQuery/Bootstrap are still heavily used.

JQuery is still well within the top 10 most used frameworks as of this writing for example. Closer to top 5 in many places, and It goes up to the number 1 JavaScript lib if you include that publishing platform (more on this later).

Confusing mixed messages!

What do do?

As a web application developer (using React/Angular/Vue), you still need to know both JQuery/Bootstrap as you will see them often in legacy code. You would not intentionally use either in a new project though because JQuery has some serious problems; it doesn’t scale as well as modern frameworks, caused by;

  • Poor DOM redraw efficiency. You can also get into performance sapping update loops, caused by naïve polling (i.e. code directly checks a bit of DOM every few milliseconds, but that DOM read actually causes a redraw - this is far more common than you think!). A more modern way is update to a lifecycle (so changes are batched together in a single update), and detect changes in underlying data rather than DOM (which is faster as well as much more efficient - you only write to DOM when there is actually a corresponding data change, and you rarely read from it).
  • Very poor handling of underlying data - it is often stored directly in the DOM (as values in input-form-tags for example), or distributed through several JQuery scripts. There is often no ‘single point of truth’, a core concept that many developers can’t live without.
  • Abysmal overall structure because none is enforced. We have things like JQueryUI, but they don’t come close to modern frameworks with defined structure, lifecycles, and formal data paths.
  • No testability, particularly because data update is often tied to DOM update, causing many race conditions that are difficult to manage let alone test! The existence of race conditions causes many projects to move to a modern framework - the brittleness caused by JQuery race conditions becomes unmanageable over time.
  • Doesn’t work well with modern virtual-DOM frameworks, so you lose upgradability unless JQuery is removed.
  • The modern way of creating web applications uses something called a build pipeline. During this process, you define the minimum browser requirements of the final output (i..e what browser support is needed to run), and the pipeline will handle all the incompatibilities for you by adding in the required shims, fall-backs and fixes. A build pipeline makes JQuery 100% obsolete because a build process fixes all the cross-browser JS incompatibilities. It doesn’t fix CSS incompatibilities though, so Bootstrap is not in the same boat. Decent build pipelines come ‘out of the box’, so are easy to use. For React it is called create-react-app.

As you can see, these problems are all significant. So much so that JQuery is often seen as an anti-pattern. So it is definitely legacy as far as this group is concerned! But see note 1 below.

As a front end developer or the old term, web designer (building standard websites, perhaps with a CMS and some API calls but no front end framework), you will see JQuery a lot, and not just for legacy. It is still used heavily in the currently best selling, commercially available website templates for example. You should really avoid JQuery though, because native browser stuff (CSS3 and JS) are preferable for future-proofing. It is also worth noting that the ‘Bootstrap look’ is now quite old fashioned. The more modern way is to build the look and feel towards the company brand rather than use a default like Boostrap. Even when the UI follows a generic default, that default is now often a lot cleaner, allowing content (or brand) to take prominence. See Design Systems Repo for curated examples.

The big issue for front end developers is of course that publishing platform that is used in more websites than React, Angular and Vue put together - WordPress. Around 35% of the entire web is built on WordPress. And guess what it comes bundled with. Yup, JQuery. If you are a front end developer building WordPress sites, you need JQuery. There are many knock-on effects caused by WordPress’s untouchable popularity; if you wondered why all those website templates use JQuery, you now know… they assume you will be using WordPress. It may be wrong vs a modern JAM-stack, but it is also an easy option.

There is an additional issue that is often forgotten; many ad-tracking scripts still require JQuery. This is an easier problem to fix; just import JQuery in your page head and forget about it.

Also, the elephant in the room - I suspect there is also an issue of teaching. Many teaching organisations create courses that go from simple to hard. They put Flexbox and JavaScript in at the end with the ‘hard’ stuff, and start with JQuery/Bootstrap. This does not reflect industry, where both CSS3 and JavaScript are seen as primary skills and JQuery is often seen as a bad habit. The better, more knowledgeable clients prefer HTML, CSS3 and ES6-JavaScript and often won’t allow JQuery.

Personally, I’d pick HTML/CSS3/JavaScript over JQuery/Bootstrap as a beginner. The former set is future proof (and a primary skillset in 2020), and pays better (as well as leading naturally to frameworks, which pay the best). In some places, JQuery/Bootstrap are just plain wrong today, and mask better ways of doing things.

JQuery/Bootstrap is still popular, but both fading and not nearly as well paid when you see it in a job spec - its seen as a very junior skillset. I’d miss the low-entry jobs and go straight to ‘entry level developer who will move up to frameworks in a few years’ by being strong in HTML/CSS3/JS. JQuery/Bootstrap is something to learn after HTML/CSS3/JS just to keep your skillset rounded towards being able to handle legacy.

The problem is that many people go to JQuery/Bootstrap first because it seems like a shortcut… but to the bottom end of the market!


Notes

  1. There is a modern version of Bootstrap for each of the common frameworks (e.g. react-bootstrap). These have been rewritten from the ground up to look like the original Bootstrap. They are fine to use if you or your client wants the ‘bootstrap look’. Although the Bootstrap rewrites are technologically up to date, they are not always in keeping with the philosophy of modern large projects, which use a more holistic approach called a design system. See Microsoft Fluent-ui for a good example of a component set that conforms to a higher level design system (they use it for MS Live - the online versions of MS Office). Bootstrap is an older concept that simply provides UI with a common ‘look’.
  2. Note that AngularJS also uses JQuery (actually, JQLite), and is considered legacy. You still see tutorials for it, but absolutely nobody uses it for new projects in 2020. It is still career-enhancing in places where large organisations offshore large legacy to (India, Eastern Europe), but otherwise use Angular (or Angular v2 onward to be correct), or React/Vue.
  3. A final point worth making - JQuery/Bootstrap are easy to learn for most people within the industry, as we do the same things (in a more up-to-date way) every day. The answer is geared towards beginners looking at what to learn.
Answer
Date:
Correct:No

They all are meant to tackle different kind of problems. Bootstraps is like a smart front-end for back-end developers that don’t like to mess with front-end; Jquery is a cross-broser DOM manipulation tool and an Ajax simplification tool; Vue/React/Angular is the new cool kid in the street that tryes to do it reactively. Everyone gets bored with the old and likes to be “modern” and play with challenging new toys. But 6 years from now I bet the questions here will be “are Vue/React/ANgular outdated should I use the xxx new library?” The answer will always be: learn what best fits what you are doin - libraries are just tools, like an hammer: you would not use an hammer to peel an apple. I still use them all depending on the project. Learn JS, CSS, HTML and their history, and throw in the mix a web-server (NGINX, Apache, etc.) and a backend language and framework (Python-Flask, JS-NodeJs, etc.). With that you can do anything and learn any new toys, even create new libraries that will be the hype of the future. You should not focus on the toys, you should focus on the hammers that make them.

Answer
Date:
Correct:No

The web keeps on evolving and so must web developers as well.

That said, not all companies evolve with the times and many use older technologies.

So there's never really a problem learning a popular technology, even after it's popularity has faded.

All that knowledge just goes into you library.

Bootstrap is used still. I'm using it on an Ember 2.4 project right now. I have to add brand new UI components to this out of date Ember project. I could use jQuery, but the project mostly used coffescript and handlebars. Neither of those are really too cutting edge either.

On a green field project I have, I'm using React and flexbox.

Point is, the tools vary in the field.

As a beginner, jQuery and vanilla CSS are great starting points.

I'd make sure to start clunking around some ( not by choice but bc it's a rough start) with vanilla JS while learning jQuery.

If you want to be strong in CSS learn it from scratch.

It'll make learning bootstrap or grid or flexbox easy…also important to know the rules.

There aren't that many but the can be confusing.

Specificity is the most important css rule.

Answer
Date:
Correct:No

JQuery and Bootstrap work. Even I want to start using Vue JS and possibly leave out Bootstrap in future projects it’s not worth the time re-fit existing projects with no gain for the end user. And I’m not sure it’s better to change to Vue until I find some benefits. I still like JQuery. It made javascript tolerable to use. Same with Bootstrap and CSS.

Answer
Date:
Correct:No

Bootstrap 5 is still in development (and supposedly won’t use JQuery) so I would think it’s still a popular framework. And since there are millions of sites out there built with Bootstrap already, you should become familiar with it if you want to work in the field of front-end website development, since you’re bound to come across it at some point.

Answer
Date:
Correct:No

Yes, they are outdated because the cool jQuery selectors are now natively supported by JavaScript. Go to google and run this in the console:

  • document.querySelector("#custom-bg") 

It selects the background div by ID…in the exact same way that jQuery would do. How about selecting by class?

  • document.querySelector(".search-icon") 

That selects the search icon by CSS class name. There is also document.querySelectorAll to select all possible matching elements. The point is, all the cool stuff that jQuery does is now supported by native browser JavaScript.

That said, I do sometimes use jQueryUI, which has some cool components/plugins to do something in a few lines which would take maybe 100 lines of native code.

As for bootstrap, CSS is also pretty great these days to roll those things yourself but there are other web component libraries that offer what bootstrap does…and then some. I use Ionic, which works with Angular/React and offers a grid but also offers dozens of other insanely cool components to make your app feel native on whatever platform.

The point is, jQuery and bootstrap solve problems that just don’t exist anymore. When it would save code, there are other superior options out there.

Answer
Date:
Correct:No

Yes and no, it depends on your career orientation.

Technology devices are evolving at a crazy rate, is this causing so much change in programming?

Before, you all had to know to be a good programmer but now they want to teach you that the new basic codes and connect you in networks to automatically fix your bugs?

It is as if you would no longer need to do math, because Einstein, it is found to be included in your smartphone and it will calculate all your place.

It is a fight of Titans which occurs currently on the Earth and even in space, or finally, it is the most sofistiked devices Technologically which will gain.

Advice, learn your codes: Css, Webkit, jQuery, SVG, and Bootstrap, and you will come out a winner.

Good Programming and Good day to all.

Thank you.

Answer
Date:
Correct:No

No, Bootstrap is not outdated, but jQuery has no future. In Bootstrap 5, jQuery is removed as a depedency. If CSS grids finally are not included, you can of course replace it with another grid system. With Sass (and some manual work) you can get to less than 30 KB (uncompressed) depending on the project. This is definitely not a huge overhead. Current systems like TYPO3 and Shopware rely on Bootstrap (Shopware with Shopware 6, by the way, only since this year).

Your Answer

Review Your Answer