Framework Wars 2022

Framework wars have been on the verge for quite sometime now. I certainly do not want to be caught in them. I sometimes don’t know what to learn or what framework to use for my next project. Bootstrap, Foundation Zurb, TailwindCSS, Material CSS, few to mention are great CSS frameworks with a lot of features and good for prototyping. They make Front-end developers work much easier but sometimes a bit difficult to handle them. To handle them? Yes, I said they make prototyping easier and also our works fairly simple but sometimes you might have to learn new terms to be able to use them, on top of all the CSS terms we know.

Coming to javascript, there are 3 top frameworks that makes our work very simple and easy but also comes with their headaches. Angular, React and Vue are the top 3 frameworks as at 2019 (Some may say React and Vue are libraries, true but lets just stick to the term framework for now).

Angular is a TypeScript-based free and open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS.

Angular is a complete framework and has everything you might need for your project.

Pros and Cons of Angular

Benefits of Angular:

• Angular’s created to be used alongside with Typescript. And has exceptional support for it.
• Angular-language-service — which allows intelligence and autocomplete inside of component external HTML template files.
• New features like a generation of Angular based npm libraries from CLI, generation, and development of WebComponents based on Angular.
• Detailed documentation that allows getting all necessary information for the individual developer without asking his colleagues. However, this requires more time for education.
• One-way data binding that enables singular behavior for the app which minimized risks of possible errors.
• MVVM (Model-View-ViewModel) that allows developers to work separately on the same app section using the same set of data.
• Dependency injection of the features related to the components with modules and modularity in general.
• Structure and architecture specifically created for great project scalability

Drawbacks of Angular:

• Variety of different structures(Injectables, Components, Pipes, Modules etc.) makes it a bit harder to learn in comparison with React and Vue.js, which have an only “Component” in mind.
• Relatively slower performance, according to different benchmarks. On the other hand, it can be easily tackled by utilizing so-called “ChangeDetectionStrategy”, which helps to control the rendering process of components manually.

Companies that use Angular: Companies that use Angular: Microsoft, Autodesk, MacDonald’s, UPS, Cisco Solution Partner Program, AT&T, Apple, Adobe, GoPro, ProtonMail, Clarity Design System, Upwork, Freelancer, Udemy, YouTube, Paypal, Nike, Google, Telegram, Weather, iStockphoto, AWS, Crunchbase.

React is a javascript library, which means it doesn’t have all the functionalities or features Angular has, yet its very powerful and does whatever Angular do. Since React is a library, you might want to get to libraries or add-on packages whenever you need some new features. They do not have a state management, you need to get a third party state management tools such as Redux, Mobx, etc

Pros and Cons of React

Benefits of React:

• Easy to learn, thanks to its simple design, use of JSX (an HTML-like syntax) for templating, and highly detailed documentation.
• Developers spend more time writing modern JavaScript, and less time worrying about the framework-specific code.
• Extremely fast, courtesy of React’s Virtual DOM implementation and various rendering optimizations.
• Great support for server-side rendering, making it a powerful framework for content-focused applications.
• First-class Progressive Web App (PWA) support, thanks to the create-react-app application generator.
• Data-binding is one-way, meaning less unwanted side effects.
• Redux, the most popular framework for managing application state in React, is easy to learn and master.
• React implements Functional Programming (FP) concepts, creating easy-to-test and highly reusable code.
• Applications can be made type-safe with either Microsoft’s TypeScript or Facebook’s Flow, with both featuring native support for JSX.
• Migrating between versions is generally very easy, with Facebook providing “codemods” to automate much of the process.
• Skills learned in React can be applied (often directly) to React Native development.

Drawbacks of React:

• React is un-opinionated and leaves developers to make choices about the best way to develop. This can be tackled by strong project leadership and good processes.
• The community is divided on the best way to write CSS in React, split between traditional stylesheets (CSS Modules) and CSS-in-JS (i.e. Emotion and Styled Components).
• React is moving away from class-based components, which may be a barrier for developers more comfortable with Object Oriented Programming (OOP).
• Mixing templating with logic (JSX) can be confusing for some developers at first.

Companies that use React: Facebook, Instagram, Netflix, New York Times, Yahoo, Khan Academy, Whatsapp, Codecademy, Dropbox, Airbnb, Asana, Atlassian, Intercom, Microsoft, Slack, Storybook, and many more.

VueJS is a progressive javascript framework as stated on their website. Its not as powerful as Angular but has more features than React. Unlike React, VueJs has their own state management, Router and also has directives which helps makes Its usage simpler.

Pros and Cons of VueJs

Benefits of VueJs:

• Empowered HTML. This means that Vue.js has many similar characteristics with Angular and this can help to optimize HTML blocks handling with the use of different components.
• Detailed documentation. Vue.js has very circumstantial documentation which can fasten learning curve for developers and save a lot of time to develop an app using only the basic knowledge of HTML and JavaScript.
• Adaptability. It provides a rapid switching period from other frameworks to Vue.js because of the similarity with Angular and React in terms of design and architecture.
• Awesome integration. Vue.js can be used for both building single-page applications and more difficult web interfaces of apps. The main thing is that smaller interactive parts can be easily integrated into the existing infrastructure with no negative effect on the entire system.
• Large scaling. Vue.js can help to develop pretty large reusable templates that can be made with no extra time allocated for that according to its simple structure.
• Tiny size. Vue.js can weight around 20KB keeping its speed and flexibility that allows reaching much better performance in comparison to other frameworks.

Drawbacks of VueJs:

• Lack of resources. Vue.js still has a pretty small market share in comparison with React or Angular, which means that knowledge sharing in this framework is still in the beginning phase.
• Risk of over flexibility. Sometimes, Vue.js might have issues while integrating into huge projects and there is still no experience with possible solutions, but they will definitely come soon.

Companies that use Vue.js: Xiaomi, Alibaba, WizzAir, EuroNews, Grammarly, Gitlab and Laracasts, Adobe, Behance, Codeship, Reuters.

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

Pros and Cons of VueJs

Benefits of Svelte:

• Instead of doing most of the work in the browser, Svelte does its work when you build the app and it compiles it to efficient vanilla JavaScript.
• Reduces the overhead of the JavaScript framework you’re using. By compiling Svelte to vanilla JavaScript improves the code readability, enables re-use and it produces a much faster web app.
• Svelte does not require declarative, state-driven code, which the browser has to convert into DOM operations. That means you don’t need to use virtual DOM anymore.

Drawbacks of Svelte:

• IDE support is not yet comparable to the commonly-used frameworks. It still has a lot of room for improvement. Although there are some good resources online to solve some of the issues, it can be considered as a major disadvantage as of today.
• Not many Svelte dev tools exist at the moment. It is still a young and growing ecosystem. Keep that in mind. However, that’s a great opportunity to develop some for the Svelte community.
• Small open-source ecosystem. Like many other frameworks, it takes time to build a large community around a specific framework. Although Svelte has gone a pretty decent way already, there are still not enough open-source contributors. Same here, you can look at it as an opportunity as well.

Companies that use Svelte: The New York Times, Rakuten, Nesta, Avast, 1password.com, Philips, Yellowpop, Decathlon, Appstronauts

Remix is the new kid in town. Very powerful, all inclusive and simple to use fullstack framework. Now, what is Remix? Remix is a seamless server and browser runtime that provides snappy page loads and instant transitions by leveraging distributed systems and native browser features instead of clunky static builds. Built on the Web Fetch API (instead of Node) it can run anywhere.

Remix comes with a number of advantages:

• It compiles with esbuild, an extremely fast JavaScript/CSS bundler and minifier.
• It uses progressive enhancement on the server side. Only necessary JavaScript, JSON, and CSS content are sent to the browser.
• It performs dynamic server-side rendering.
• It knows when to refetch mutated data, as Remix oversees the whole workflow.
• It includes an end-to-end solution with React Router, server-side rendering, production server, and backend optimization.

Companies that uses Remix: Flipside Crypto, Traction, PXM, circa5000, quaddro, Storefront, portal, Aipha

Another new Kid on the block. Fresh is a full-stack modern web framework for JavaScript and TypeScript developers. It is designed to create high-quality, performant, and personalized web applications. Fresh 1.0 was release on June 28, 2022.

Fresh is a new style web framework that is written for Deno, a runtime for JavaScript, TypeScript, and WebAssembly that is based on the V8 JavaScript engine and the Rust programming language.

As a developer, there is no substantial difference in which framework to choose, because it just takes some time to get used to the new one. I am fairly good with VueJs and also with React, I haven’t actually touched on Angular yet. It is my target to know all 3 Frameworks but at the moment, I want to shift my attention to some backend using NodeJS. Its the popular for backend if you’re a javascript developer and you want to add some backend to your application. It also has some good Frameworks such as Express, SailJS, AdonisJs, Koa, Loopback etc… and the new NestJS.

But at the moment, I am stuck with these 2 front-end frameworks (React and VueJS). I urge you to learn because they’re very good and powerful.