146075 Views | 42 Min Read
TABLE OF CONTENT
React Usage Statistics 2020
- In Stack Overflow’s developer survey 2020, React was ranked the 2nd most popular web framework with 35.9% votes behind jQuery which has been steadily losing share to react.
- Approx. 1.45million to 1.6 million websites (live and historical) have been built with React acc. to Wappalyzer and BuiltWith statistics as of June 2020.
- Current version – 16.13.1.
- Github – 150k Stars and 1,388 Contributors as of June 2020
- NPM – Averaging close to all time high of 7.5-8.5 million weekly downloads as of June 2020.
Pros of using React
- Reusable components – React’s component-based approach helps developers to import or reuse UI components without breaking a sweat insteading of coding them from scratch.
- Easy integration – React allows easy integration with other front-end and back-end framework like the popular PHP framework Laravel to work in tandem without a hitch.
- One Direction Data flow – One greatest fundamental difference between React and angular 1 was that React was based on a downward One directional data flow architecture rather than a 2-way data binding adopted by Angular. This ensured that a child element cannot affect the parent making the code more stable and less prone to errors.
- Virtual DOM – React creates a virtual representation or a copy of DOM called Virtual DOM or vDOM. React compares the virtual DOM to the real DOM to only render components that have changed instead of rendering the whole page. This is the key behind React’s blazing fast performance.
- Rich Community Support – React is backed by a massive Developer Community with almost 1.6k contributors on Github and a wide array of learning resources, tutorials and help guides readily available to anyone starting out. Also do not forget React is backed by one of the largest and most powerful company in the world – Facebook.
Cons of using React
- Although JSX is a simpler syntax that is easier to read and comprehend, it might present an additional learning barrier to new developers.
- React is often plagued with complaints about poor documentation that cannot catch up with new releases and features forcing developers .
- React only deals with the View Layer of the MVC Model leaving out no other option but to rely on other technologies to deal with Model and Controller Layers.
- React is evolving and changing at a very fast pace requiring developers to play catch up and reskill themselves which can be exhausting and difficult to cope up with. Developers often find themselves stuck in a constant learning cycle which keeps rendering their previous knowledge useless or defunct.
Prominent websites built with React
Airbnb, Asana, BBC, Cloudflare, Codecademy, Dropbox, Facebook, Github, Imgur, Instagram, Medium, Netflix, OkCupid, Paypal, Periscope, Pinterest, Product Hunt, Reddit, Salesforce, Scribd, Shopify, Slack, Snapchat, Squarespace, Tesla, The New York times, Typeform, Twitter, Uber, Udemy, WhatsApp, Zendesk.
Vue was first launched in 2014 by Evan You, a developer working for Google who took inspiration from Angular to deliver a simple lightweight and efficient alternative in the form of Vue.js. Although Vue has adopted most of its features from React and Angular, it has made major improvements on those features to deliver a better, easy to use, and secure framework. The biggest example of this approach is that Vue offers a 2-way data binding as seen in Angular and ‘Virtual DOM’ as seen in React.
Vue Usage Statistics 2020
- Approx. 427k to 693k websites (live and historical) are built with Vue acc. To Wappalyzer and BuiltWith statistics as of June 2020.
- Current version – 2.6.11
- Github – 166k Stars and 293 Contributors as of June 2020.
- NPM – Vue registered an impressive 1.63 million weekly downloads on NPM as of June 2020 edging ahead of Angular.
Pros of using Vue
- Built in MVC – Vue has an inbuilt MVC that enables quick and easy configuration unlike React.
- Easy to learn – Vue does not require you to learn JSX or Typescript like in case of React or Angular. Vue makes use of easy to grasp HTML templates that does not increase the complexity of code.
- Small size – Another key advantage of Vue is its surprising lightweight size given its impressive prowess. gzipped version of Vue is barely 18-20kb in size, much lighter than its bloated bulky rivals like React or Angular.
- Integration – Vue can not only be used to create applications from scratch at a blazing fast face, it can also be integrated into existing web apps seamlessly without any trouble for creating new components.
Cons of using Vue
- Small community of contributors – Vue.js does not enjoy the backing of a giant like Facebook or Google like in case of React or Angular. But Vue has indeed managed to create a community of backers. On github, Vue has 291 Contributors which is decent but still nowhere close to the kind of backing React enjoys with 1.6k contributors. Still kudos to Evan and his team for successfully creating one of the most powerful and loved framework the dev community has ever seen.
- Limited employment Opportunities as compared to React and Angular – Vue is undoubtedly extremely popular in China and the US but that might not be the case in the rest of the world. Traditionally the US is always the leader in new technology adoption with the rest of the world lagging behind. Popularity of Vue has not yet cached up in the rest of the world like the US. This can be verified by the fact that out of 720k currently live websites built with Vue.js, more than 450k are registered in the US alone.
Prominent websites built with Vue
9gag, Adobe, Apple Swift UI, Behance, Bilibili, BMW, Chess, Font Awesome, Gitlab, Hack the box, Laravel, Laracasts, Louis Vuitton, Namecheap, Netlify, Netguru, Nintendo, Pluralsight, Pornhub, Shien, Stack overflow, Trivago, Trustpilot, Upwork, Wizzair, Zoom.
Angular Usage Statistics 2020
- Current version – 9.1.0
- Github – 59.5k Stars and 1.578k Contributors as of June 2020
- NPM – Angular registered a massive 1.62 million weekly downloads on NPM as of June 2020, almost the same as Vue but still well behind React.
Pros of using Angular
- Component Based Architecture – After ditching MVW(model-view-whatever) architecture, Angular 2 and beyond adopted a strictly component-based architecture that facilitates reusability. Components can be used over and over again throughout the app. It also enhances code readability and ease of maintenance.
- Server performance – Angular supports out of the box caching and tons of features to ensure fast server performance.
- MVC – Model View Controller in angular establishes key features like scopes and data binding. It also ensures UI and App logic are isolated from each other.
- 2-way data binding – One key feature of Angular is 2-way data binding which forms a link between the Model layer and View layer in such a way that each one of them reflects a change in another. However, other rival frameworks have adopted a one-way data-binding for simplicity.
- deal for building Enterprise scale web applications.
- Third-party integrations – Angular offers a rich collection of third party integrations to further enhance their web application.
- Massive Community Support – Angular is blessed with backing from Google and a huge developer community amassing over 1.1k contributors on GitHub. Angular also has great documentation coupled with a huge library of resources and community support.
Cons of using Angular
- Typescript – In order to use Angular you are obliged to use Typescript which does offer a lot of advantages but still poses a big learning challenge to new developers to surmount. Typescript is a big barrier to entry and explains why angular has struggled against both React and Vue.
- Heavy and Bloated – compared to lightweight alternatives like React JS and Vue JS, angular is extremely bulky and large in size, roughly close to 550-600kb which might not be suited for most of the small-scale applications.
- Poor SEO – Angular struggles with SEO due to acute accessibility issues cornered with search engine crawlers/spiders. If SEO is your prime focus, React is a much better SEO friendly alternative.
- Difficult migration – Even though AngularJS(angular 1) is now obsolete, many applications are still running this legacy version. Migrating from Angular 1 to Angular(current version 9) is extremely painful and cumbersome. Angular is developing at such a rapid pace, migration among new Angular versions can also be challenging sometimes.
- Steep Learning Curve – Compared to React and especially Vue, Angular has a very steep learning curve which might present a daunting scenario for newbie developers. Angular requires a thorough knowledge of MVC to master.
Prominent websites built with Angular
Google, Allegro, Blender, Clickup, Clockify, Delta, Deutsche Bank, DoubleClick, Freelancer, Forbes, Guardian, IBM, Instapage, iStock, JetBlue, Lego, Mailerlite, Microsoft Office, Mixer, Udacity, Upwork, Vevo, Walmart, Weather, WikiWand, Xbox, Youtube.
Ember was originally a SproutCore 2.0 framework that was renamed as Ember.js by its creator Yehuda Katz, an accomplished developer who is credited as one of the chief creators of jQuery. One of the most adored and key features of Ember is the Ember Command-line interface tool which is a productivity powerhouse in itself.
Ember Usage Statistics 2020
- Approx. 32k – 36k(currently live) and 110k(live and historical) websites have been built with Ember as per BuiltWith statistics as of June 2020.
Current version – 7.19.0
- Github – 135Stars and 50 Contributors on Github as of June 2020
- NPM – Ember-cli-babel package is hovering close to 550k weekly downloads on NPM as of June 2020.
Pros of using Ember
- APIs – Ember provides a simple mechanism to work with APIs.
- Convention over Configuration – Ember follows the philosophy of “CoC – Convention over Configuration” approach which ensures that there is no need for any configuration in most cases so that you can jump straight away to coding and building your web application.
- Rich Documentation and support – Ember comes along with detailed documentation along with thorough tutorials and help guides to help you get started with ease.
- Ember CLI – The Ember Command Line Tool is a productivity booster that not only helps to set up new projects but also creating components and controllers using automatic generation. Ember CLI also helps to install 3rd party dependencies.
- Inspector Tool – Ember has an Inspector development tool extension for Chrome and Firefox that helps to monitor and edit applications in real-time.
- Supports 2-way data binding similar to Angular.
- Backward Compatibility with previous versions.
Cons of using Ember
- Steep Learning Curve – Newbie Developers might find Ember quite challenging as compared to Vue or React.
- Ember is more suited to complex large-scale applications and might prove to be too bulky and heavy for small scale simple applications.
- Highly Opinionated – Ember is highly opinionated in a sense that any deviation from doing things by standard way might lead to frustrating problems.
- Stagnation in popularity – Ember has suffered a stagnation over the last few years failing to attract new developers into its fold. Ember couldn’t find a spot in Stackoverflow’s Developer survey 2020 and could only register a meagre 3.6% in the active users category in State Of JS 2019 Survey. If this trend continues, Ember might get overtaken by Svelte.js by the end of 2020.
Prominent websites built with Ember
Crowdstrike, Ghost, GroupOn, Heroku, Intercom, LinkedIn, Microsoft, Netflix, Skylight, Square, TED, Twitch, Yahoo, Zendesk.
Preact.js is built with the same core principle of React – Component based approach with Virtual Dom while being completely compatible with React. It can even use React packages without compromising on speed, performance, and leaner size. In instances where full potential of React isn’t necessary, most developers even use React during development and switch to Preact for production. Many major companies like Tencent, Uber, and Lyft are using Preact.
Preact Usage Statistics 2020
- Approx. 21.5k(currently live) and 65k(live and historical) websites are built with Preact going by BuiltWith/Wappalyzer statistics as of June 2020.
- Current version – 10.3.4
- Github – 25.7k Stars, 1.4kForks, 228 Contributors as of June 2020.
- NPM –Preact recorded 230k weekly downloads on NPM as of June 2020.
Pros of using Preact
- Small Size – As mentioned earlier, the key merit of Preact.js is its small size of just 3kb, making it one of the most lightweight library/framework that you can find. Even with its lightweight size, Preact still delivers a faster render performance in comparison to its elder sibling React which has a size of 40-45kb (gzipped).
- High Efficiency – Preact is more efficient than React in memory usage that means the garbage collector has to do less work.
- Preact CLI – Preact offers an extremely powerful command-line interface tool that helps you create new projects seamlessly with ease while saving you the effort to deal with Babel or web pack.
- Link State module – even though Preact is a subset of React, it has few of its own advanced features. The most important of them all is the LinkState module that optimizes state changes. React that uses arrow functions inside a render() method to update state. This method is inefficient with a lot of unnecessary code. Preact solves this problem by the use of LinkState module that returns a handle function when passed in an event updates component state changes automatically.
- Compatibility – As discussed earlier, Preact uses the same ES6 API as React. This means the developers can easily switch to Preact from React in an existing project during production.
Cons of using Preact JS
- Small Community and popularity – Preact has a tiny community as compared to React with only 200 contributors on github. Preact still isn’t very popular and merely 20k live websites have been built with Preact.js compared to half a million in case of React.
- Preact does not support propTypes, a key feature in React.
- Another big drawback with Preact is that it does not support createClass. It only supports stateless functional components and ES6 class-based component.
Prominent websites built with Preact
Bluehive, Bustle, Dailymotion, Dev.to, Dominos, Financial Times, GroupOn, Hashi Corp, Housing.com, Lyft, Pepsi, Rocket Chat, Smashing Magazine, Synacor, Sogou Wenen, Tencent, Treebo, Uber.
Many developers consider Svelte to be a truly game-changing and revolutionary idea that fundamentally changes the way we code web applications and are tipping Svelte to dethrone React as the most popular front-end framework in the world.
As a result, apps built with Svelte are lightning-fast with excellent performance. Other major advantages include zero client-side dependencies, absence of complex state management libraries, including Svelte can boast big names like Godaddy, Razorpay, 1password, New York Times as its clients.
Svelte sage Statistic 2020
- Approx. 3600 websites(live and historical) are built with Svelte acc. to Wappalyzer/BuiltWith statistics as of June 2020.
- Current version – 3.20.1
- Github – 32.8k Stars, 1.5k Forks, 283 Contributors as of June 2020
- NPM –Preact recorded 52.5k weekly downloads on NPM as of June 2020.
Pros of using Svelte
- Component based Model –Svelte.js follows the same component-based model as a framework like React or Vue. New improved reactivity features in Svelte version 3 has made the task of building reusable components even faster and simpler by writing less code.
- Excellent Performance – As stated earlier, Svelte does not have a virtual DOM like React, instead relies on reactive programming to surgically update the DOM. As a result, Svelte is able to achieve the fastest rendering compared to almost any other framework and tops most of the performance benchmarks.
- SEO – Unlike some other framework that struggles with search engine crawlers, Svelte is SEO friendly.
- Supports client-side as well as server-side rendering.
Cons of using Svelte
- Limited user base – Even though Svelte has won critical acclaim and laurels in the developer community, it is yet to be adopted widely in the industry. Svelte.js does have a few big name clients under its belt but the number of websites running Svelte are barely 3-4 thousand and that too mostly in the United States of America.
- Small community and resources.
- Lack of tooling – One of the biggest complaints against Svelte has been its poor immature tooling for debugging applications.
- Lack of third party components – Unlike other framework React that has a plethora of third party component libraries like – React Bootstrap, Material UI, Semantic UI, Ant design etc, Svelte is still sorely lacking in this domain.
- Scalability issues – Some developers might feel that Svelte is difficult to scale as it doesn’t officially support Typescript.
Prominent websites built with Svelte
1Password, AB Lab, Absolute Web, Bekchy, BlueHive, Cashfree, Chess, Comigo, Entur, Farmbox, Fusion Charts, Godaddy, HealthTree, Rakuten, Razorpay, The New York times.
Express was originally built by TJ Holowaychuk in 2010 before being acquired by IBM(StrongLoop) in 2015. It is currently maintained by Node.js Foundation. The key advantage of using Express is rapid server-side coding. Complex tasks that would take hours to code using pure Node.js can be resolved in a few minutes thanks to Express. 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.
Express Usage Statistics 2020
- Approx. 1.2 million websites (live and historical) have been built with Express acc. to Wappalyzer and BuiltWith statistics as of June 2020.
- Current version – 4.17.1
- Github – 48.k Stars, 8k Forks, 1,639 Contributors as of June 2020
- NPM – Express is racking up an impressive 11.5-13 million weekly downloads on NPM as per June 2020 stats.
Pros of using Express.js
- Community support – Express is a really mature 10 year old framework with a massive community backing. Express boasts more than 1.6k contributors on Github.
- Good Documentation – Express is blessed with well written and thorough documentation along with a huge trove of tutorials and resources.
- Fast paced development – Simplifies and accelerates developing web applications using Node.js.
- Middleware – Express is technically a series of middleware function calls. Middleware functions perform various tasks like executing code, making changes to request and response objects and ending request-response cycle. Express has 5 types of middleware – Application-level, Router level, Error-handling, Built-in and third party middlewares.
- Routing – Offers a powerful routing mechanism to define routes based on URLs and HTTP methods.
- Integration with databases – Express offers seamless connectivity with all major popular databases like MongoDB, MySQL and Redis.
- Integration with Template engines – All popular template engines like Pug, HAML, EJS, work out of the box with Express.
Cons of using Express.js
- Ensuring security of the web application is entirely up to the developer and quality of the code. Express by itself doesn’t offer any security solution.
- Even though this isn’t really a disadvantage in most cases especially for experienced developers, biggers might find Express difficult to master because of its un-opinionated nature. There isn’t a defined structured way of doing things to guide beginners. Although, experienced developers will consider un-opinionated nature a big merit that offers more flexibility and freedom.
Prominent Websites Built With Express
Accenture, Coursera, Exove, Fox, Godaddy, IBM, Myntra, Nike, Paypal, Pluralsight, Quizup, Ripjar, Sony Playstation, Twitter, Uber, Unsplash, Yandex.
Next.js is an end-to-end server-side rendering framework based on React. Next.js was created by Dutch company Vercel(previously known as ZEIT) in 2017. Although both Next and Gatsby are based on React, there is one key difference between the two. While Gatsby is a static site generator, Next is essentially SSR- Server-side renderer.
But remeber Next does offer static generators as well. Next is built with the principle of “Build once, runs everywhere” which means that not only can you make web applications with Next.js but also mobile apps, desktop apps as well as Progressive Web apps.
The major advantages of using Next.js are – automatic code-splitting, hot code reloading, automatic routing, and built-in handling of SEO to name a few. Next has the privilege of stating major tech companies like Github, Docker, and Netflix as its users.
Next.js Usage Statistics 2020
- Approx. 34k(live) and 100k(live and historical) websites are using Next acc. to Wappalyzer and BuiltWith statistics as of June 2020.
- Current version – 9.3.5
- Github – 47k Stars, 7k Forks, 1k Contributors as of June 2020
- NPM – Next has clocked close to 500-570k weekly downloads on NPM as per June 2020 stats.
Pros of using Next.js
- SEO friendly – Traditional Client side rendered apps have a poor SEO performance. Search engine crawlers face difficulties in indexing such pages. However Next.js with its server side rendering capability delivers an excellent SEO performance. Next.js allows us to create dynamic meta tags in the head section to optimise SEO.
- Hot-code Reloading – Next.js automatically reloads the page when a change is detected.
- Deploy everywhere – With Next.js you can build both small scale static websites as well as enterprise scale applications. Moreover, you can not only build web applications but also mobile apps, desktop apps as well as progressive web applications too.
Cons of using Next.js
- Gatsby might be a better option than Next.js for smaller blogs where static build delivers a much more favourable and better performance than relying on Next.js Server side rendering.
- Performance benchmarks of Next.js is in most cases inferior to Gatsby and Nuxt.
- Requires back end server side to provide data.
- Next.js is built specifically to work with React only.
Prominent websites built with Next
Auth0, Binance, Coinbase, Docker, Github, Hulu, Invision, Magic Leap, Netflix, Sesame, Starbucks, Trulia, Tencent, Twitch, Uber.
Gatsby Usage Statistics 2020
- Approx. 38k(live) and 85k(live and historical) websites have been built using Gatsby acc. to Wappalyzer and BuiltWith statistics as of June 2020.
- Current version – 2.20.26
- Github – 43.7k Stars, 7.8k Forks, 3.1k Contributors as of June 2020
- NPM –Gatsby has recorded on an average 380k-400k weekly downloads on NPM as per June 2020 stats.
Pros of using Gatsby.js
- Fast Performance – Websites built with Gatsby.js are usually 2-3 times faster than normal websites built with other tech stack. Gatsby automatically compiles the most appropriate webpack config and handles optimisation, prefetching, lazy loading and fast rendering by default to maximise your website’s performance.
- Out-of-the-box PWA – Gatsby.js converts your website into a full fledged Progressive Web App that enhances user experience to the maximum.
- Supports Multiple Data sources – Gatsby collects data not only by markdown but also various other remote data sources like WordPress, Drupal, Netlify, Contentful, Trello, Stripe etc.
- High Security – Gatsby offers implicit security as it does not require any server, database or dependencies.
- Plugins – Gatsby’s rich and extensive plugin architecture will offer you a plugin for every task that you can hope to accomplish – image optimization, setting up google analytics, creating sitemaps, robot txt files, caching etc.
Cons of using Gatsby.js
- Not suitable for large scale websites – Gatsby.js is not an ideal solution for content-heavy enterprise scale websites like e-commerce stores or media extensive websites. Build time will drastically increase as the size of content grows. This will lead to a significant drop in website performance. Gatsby is a perfect solution for small or even medium scale applications but large enterprise scale websites.
- Prerequisite knowledge – Although learning how to use Gatsby is fairly easy, a perquisite knowledge of React and a little GraphQl is necessary.
- Hosting – Hosting with Gatsby is not straight forward like using a normal website on Site ground, GoDaddy or HostGator.
Prominent websites built with Gatsby
Airbnb, Braun, edx.org, Fabric, Figma, Flamingo, Freecodecamp, Ghost, Hopper, Impossible, Nike, Paypal, React, Segment, Sendgrid, Snapkit.
Nuxt Usage Statistics 2020
- Approx. 35.5k websites have been built using Nuxt acc. to Wappalyzer and BuiltWith statistics as of June 2020.
- Current version – 2.12.2
- Github – 26.6k Stars, 2.3k Forks, 233 Contributors as of June 2020.
- NPM –Nuxt has recorded an average 200k weekly downloads on NPM as per June 2020 stats.
Pros of using Nuxt.js
- Fast setup and development – Setting up a new project in Nuxt.js is just a matter of a few minutes thanks to the starter-template that can be created easily using the command line. Nuxt handles most of the initial setup and configuration by itself so that you can head straightaway to coding.
- Project Structure – Nuxt by default organises your code in a logical, scalable and easy to understand structure right out-of-box. The main directories set up by default are – assets, components, layouts, pages, plugins and store.
- Nuxt Community – ‘Nuxt community’ is a GitHub collection of several APIs, libraries, starter kits and modules that you would need when starting out.
Cons of using Nuxt.js
- You might face problems integrating custom libraries with Nuxt.
- Debugging issues when using Nuxt can often be quite challenging and frustrating.
- Size of community backing Nuxt is relatively small as compared to Next.js or Gatsby.js
- Documentation is not very extensive and there isn’t an abundance of good resources.
Prominent websites built with Nuxt
Aircall, Amplitude, Backmarket, Bitpay, Bootstrap Vue, Fox News, Gitlab, Icons8, Instrument, MyScript, Nespresso, Note.com, Ozon.ru, Roland Garros, System76, Todoist, Upwork, Wappalyzer.
Jest Usage Statistics 2020
- Current version – 25.4.0
- Github – 30.6k Stars, 4.3k Forks, 1k Contributors as of June 2020
- NPM – Jest is clocking approx. 6.8-7 million weekly downloads on NPM as per June 2020 stats.
Prominent websites built with Jest
Airbnb, Bla Bla Car, Circle Cl, Facebook, Instagram, Intuit, One football, Revolut, Spotify, Stack, Swat.io, The New York Times, Travel Perk, Twitter.
Mocha Usage Statistics 2020
- Current version – 7.1.1
- Github – 19.2k Stars, 2.6k Forks, 400 Contributors as of June 2020.
- NPM – Mocha has recorded on an average 4.3-4.4 million weekly downloads on NPM as per June 2020 stats.
Prominent websites built with Mocha
Accenture, Algolia, Asana, Clay, Codefirst, Coursera, Netlify, Open Collective, Principal, Third Iron, Triple Byte, Typeform, UX Planet, Webflow, Wix, Yahoo.
Jasmine Usage Statistics 2020
- Current version – 3.5.0
- Github – 14.8k Stars, 2.2k Forks, 194 Contributors as of June 2020.
- NPM – Mocha has recorded on an average 1.6 million weekly downloads on NPM as per June 2020 stats.
Wrapping It Up!
Carefully pay heed to your project’s requirements and understand which set of frameworks complement your needs and can deliver that best performance at the lowest development cost and time. The learning curve, complexity, compatibility documentation, community support should also be taken into account as deciding factors apart from just performance.
Written by Nikhil Tyagi
16970 Views | 19 Min Min Read
60358 Views | 12 Min Min Read
70139 Views | 6 Min Min Read
104662 Views | 13 Min Min Read