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.
- Weaker cross browser support for programmatic tag selection and DOM manipulation.
- 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.
- 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.
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.
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!
- 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’.
- 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.
- 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.