jQuery has been around for ages, and it has been almost synonimous for Javascript. Many developer never really wrote Javascript, they learned jQuery instead, and around like 8-10 years ago there was plenty of reason to do so. There is even a meme on StackoverFlow going "not enough jQuery", meaning in the past correct answers got downvoted for not using jQuery, but plain vanilla Javascript.
The main arguments pro jQuery were
- jQuery abstracted away the different Javascript implementations of the different browser vendors;
- because the DOM API was so incomplete and inconvenient (
document.getElementsByClassName()anyone?); - jQuery made it much easier to do cross-browser AJAX stuff.
Times have changed, and with ECMAScript 2015 (also called ES6), we now can use CSS selectors to pick elements from the DOM using document.querySelector() and document.querySelectorAll() in native Javascript as well. Most relevant browsers - and all modern browsers - follow the ECMAScript specification nowadays so browser differences have become alot less of an issue.
Academind and Traversy Media have nice little videos on the topic:
On top of all that, with Babel a transpiler is available that allows us to use all the latest ECMAScript language features without worrying what the browser support for these features looks like. We simply define which browsers are relevant for us in a small file named .babelrc, and Babel makes sure the code runs on these browsers, automatically polyfilling missing features.
Modern browser nowadays come with an asynchronous API called fetch which is based on ECMAScript 6 Promises. New AJAX libraries like Axios make use of the fetch API which can be polyfilled for browsers not supporting it. More information on fetch and how to use it, including code examples, can be found here.
Another big reason jQuery is kind of a thing of the past is the complex functionality that web pages - and even moreso web applications - offer today, are alot harder to develop, maintain and extend coming from the DOM perspective that jQuery brings.
It is generally much easier to create maintainable, understandable and thus, extensible code if you look at application development from a data- (or model-) oriented perspective. This is what modern MVC/MVVM-frameworks like Angular, React or Vue.js offer, alongside with all the stuff necessary to develop Single Page Applications.
Among the frameworks in scope of this gist, Angular has the longest - and most problematic history. Angular development goes back as far as 2009, and is mainly driven by Google engineers. Being such an early player in the market made Angular carry alot of technical debt, which made a complete re-writing of the framework necessary. Along with this re-write, some core concepts in AngularJS were no longer part of Angular 2 (notice the dropping of the name postfix JS). This resulted in alot of applications that had been developed using AngularJS which would no longer work with Angular 2 and upwards. The necessary migration path often was not a trivial one. This cost Angular alot of developer trust - and even more company trust.
The current version of Angular is v6. It is written in Typescript, and while you can use vanilla Javascript to develop an Angular application, it surely is not the recommended and best supported way to do it.
Typescript is a compiler that aims to make Javascript a typesafe language (that is, making sure on compile time, not on run-time, that types are used correctly). While in the long run, this increases development safety and easy, reduces errors (and effort to find and fix those), in the short run it also raises another barrier, making the developer have to learn a "new" language, and also having to transform existing code to Typescript as well.
If that is not an option, Angular should be removed from the scope.
Here's what Angular offers:
- two-way data binding
- declarative syntax in the HTML
- routing for single page applications
- cross-platform development
- web
- apps for mobile (iOS/Android) based on Ionic / Apache Cordova
- desktop installable applications based on Electron, available for Windows, Mac and Linux off a single code base
Source: http://www.stefankrause.net/js-frameworks-benchmark6/webdriver-ts-results/table.html
Bootstrap has been the widest used CSS framework in the world for ages. Ease-of-use, the responsive grid allowing for much easier cross-device layout development and it being the first of the CSS frameworks are the main reasons for Bootstrap's popularity. It basically has become the jQuery of CSS - almost a synonym. Up until Bootstrap 3 the source code was based on LESS, with version 4 the Bootstrap team has finally made the switch over to SCSS.
Material design aims to be far more than a loose collection of pre-designed UI components. It's goal is to define a design language / metaphor / specification for human-machine-interaction in general. It has been invented and developed by Google, and the most well-known and wide-spread implementation of Material Design is Google's mobile platform Android.
Many different projects are working on specific implementations of the Material Design specs. Here's some of them (picked with regard to relevance to the frameworks we're looking at):
Rather than offering an opinionated component library, Materialize aims to be a mainly CSS-centric implementation of the Material design metaphors and principles. This makes it a good choice if you already know you're going to go Material Design, but haven't decided on a specific frontend application development framework yet.
Angular Material offers material design components for Angular.
Material-UI is a material design implementation for React. It is currently on the way to the 1.0.0 release.