Framework Wars 2019 (Both CSS and JS Frameworks)

css frameworks

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.

Javascript Frameworks

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

Angular is developed and maintained by Google, React is developed and maintained by Facebook and Vue is developed by Evan You in 2014 ( an ex Google engineer). Over the last two years, Vue has seen a substantial shift in popularity, even though it doesn’t have the backing of a large company. Later he found out people starting forking the project on Github, he got excited about it and started working on it. Vue is the mixture of Angular and React yet very simple and easy to learn. I am not saying Angular and React are difficult to learn but if you made a search about the learning curves of these frameworks, you’ll find out that Vue is the most simplest followed by React and then Angular.

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

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

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 Vue.js:

• 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 Vue.js:

• 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.

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.