React can be considered one of the biggest powerful disruptors in the web development area that delivered a real breakthrough in shaping web applications.
Introduced as a component-based, functional, and declarative programming style for building interactive user interfaces that we mainly saw in single-page web apps. It delivers fast rendering by making use of ‘Virtual DOM’ that renders only those components that have changed, instead of rendering the whole page.
Angular, an open-source typescript based framework by Google and used to build client-side single-page web applications. It was created by Google’s engineers Misko Hevery and Adam Abrons in 2010. AngularJS achieved popular recognition and was poised to reign supreme but the rise of React did push it into nonexistence presenting its grave of short comings.
So as a result, it went through a complete and total re-write scratch and Angular was reborn in 2016.
AngularJS took inspiration from React and made severe changes, the biggest shift from M-V-W architecture (Model-View-Whatever) to component-based architecture just like we have seen in React. Today it’s one of the most secure front-end frameworks for building enterprise scaled apps.
Launched in 2014 by Evan You, a developer working for Google who took inspiration from Angular and created to deliver a simple lightweight and practical alternative in the form of Vue.js.
Vue has adopted most of its features from React and Angular, it has made significant improvements on those features and to deliver a better, easy to use secure framework. One of the most significant examples of this framework is the approach that Vue offers a two-way data binding as seen in Angular and ‘Virtual DOM’ as you have seen in React.
Vue offers high flexibility, and not only can it function as an end-to-end full fledged framework like Angular but also a view layer with state management like React. The principle key advantage of Vue is its simpler, uncomplicated, unrestrictive and progressive nature that adapts to developer’s needs.
Preact.js is a lightweight and high-performance library alternative to React. Preact is merely 3kb in size and still gives you all the necessary functionality of React. Created by Jason Miller, Senior Developer Programs Engineer at Google, and Preact can be considered as a subset of React stripping away some functionalities.
It’s built with the same core principle of React, a component-based approach with Virtual Dom while being completely compatible with React.
You can even use React packages without compromising on speed, performance, and smaller size. In instances where the full potential of React is not necessary, most developers even use React during development and switch to Preact for production.
Originally a SproutCore 2.0 framework that was renamed as Ember.js by creator Yehuda Katz, whos an accomplished developer who been credited as one of the creators of jQuery. The most cherished and key features of Ember is the Ember Command-line interface tool which is a productivity powerhouse in itself.
As apps built with Svelte we notice there are lightning-fast with outstanding performance and other major advantages you’ll notice include zero client-side dependencies, lack of complex state management libraries
Next.js is an end-to-end server-side rendering framework based on React. created by Vercel(previously known as ZEIT) in 2017. Although both Next and Gatsby are based on React, there’s one key difference between those two. Gatsby is a static site generator while Next is essentially SSR (Server-side renderer).
Just remember Next does offer static generators as well. Next was built with the principle of “Build once, runs everywhere” which means that not only can you make web apps with Next.js but mobile, desktop apps and Progressive Web apps as well.
The major advantages of using Next.js is its automatic code-splitting, code reloading, automatic routing, and built-in handling of SEO,
Originally built by TJ Holowaychuk in 2010, before Express was acquired by IBM(StrongLoop) in 2015. Its maintained by Node.js Foundation. One of the key advantages of using Express is it rapid server-side coding.
Complex tasks that could take hours to code using pure Node.js can be resolved within a few minutes. On top of that, Express offers a robust routing mechanism for handling highly dynamic URLs as compared to the basic and rudimentary one offered by Node.js.
Also debugging is an effortless task by easily pin-pointing bugs plus Express provides a templating engine to dynamically render HTML pages on the server-side which makes web apps more efficient.
Nuxt.js is an open-source progressive framework based on Vue eco-system, it gets used to build performant web apps especially server-side rendered applications and can be considered as an enhancer for Vue.
Keep in mind, Nuxt.js is not a substitute for Vue as it can’t function alone and neither can it be viewed as a full-fledged back-end framework like Express. Its a combination of Vue libraries and components – Vue, Vue Router, Vuex, Vue server renderer and Vue meta while packing the prowess of web-pack babel and PostCSS.
With Nuxt.js you can create three different kinds of web apps; Pre-rendered Static pages app, Single-page web application (SPA) but as well Server-side rendered web applications(SSR) or universal apps.
Last on this list is Gatsby, founded by Kyle Mathews and Sam Bhagwat, around 2015. Gatsby is a modern, flexible React and GraphQl based Static Site Generator that is used to build high-performance and SEO friendly static sites.
Gatsby pull data from any data source possible like WordPress, Drupal, Netlify, Contentful etc or any APIs, databases or simple markdown. Unlike Next.js, Gatsby does not perform server-side rendering. Instead, it generates HTML content on the client-side during build time. As a result, it delivers blazing-fast performance, flawless security and great SEO performance.
Another advantage that Gatsby offers are their plugins that can add key functionalities and modifications that can make your life easier.
These plugins range from enhancing UI/UX, using styled-components, integration with key services like Email marketing tools or CMS, SEO, image optimisation, setting up sites analytics tools, creating sitemaps, caching etc.