Do we need React/Angular/Vue in 2020?

Do we need React/Angular/Vue in 2020?

So, can you build rich web apps without using frameworks? The short answer is yes. There are plenty of websites out there that are built without using a framework; GitHub and YouTube are probably the most popular ones. ... However, web apps consist of more than just components.

With many EcmaScript features coming to the modern browsers, you might be wondering what else do we need web frameworks for. Looking back, Angular 1.x, Backbone, JQuery and other libraries come and go, but the new features such as const , let , class and many others are here to stay, so it might be worth looking into the new kids on the block.

Custom Elements v1 + Shadow DOM v1

87% of the browsers already support custom elements

with Custom Elements, you can create your own HTML tags that contain your own component logic and self-contained styles, all that without a single library used. But is this enough to replace react’s component system? Let’s have a look.

Defining a new element

A new custom element can be defined in just 2 lines:

defines an element called “hello-world”

Now to use it, all we need to do is use the <hello-world> component as if it was a normal HTML component:

Adding HTML & CSS

Now, we need to define what is displayed on the screen. Let’s say that we want the content to be a heading saying “hello world from” followed by the user’s specified name. Luckily, Shadow DOM can be used to scope CSS styles to a single custom element allowing us to build self-contained components with ease that will work in vanilla js, React, Angular or Vue. The following code listens for the “name” attribute change and updates the view based on the name.

This allows us to scope the styles and build reactive applications that can change during runtime and the view will update accordingly. It’s also pretty good when it comes to performance, as only the span will update with all the other components staying the same. However, as you can see we are manupulating the DOM manually and it’s not as declarative as react is, where the render function contains variables directly instead of having to contain placeholder elements ( <div id="name"> instead of ${name} ).

Using this method in order to update data on the DOM might seem a little less convenient than just using React DOM where it computes which elements need to be updated rather than you having to change the innerHTML/innerTEXT of those elements, but it comes at a cost. Adding it to your application will cost you 100KB of JS code.

It might not seem like a lot, but it’s still almost 0.7s added to the user waiting time on 3g and on the web, time is money. Literally. 60% of users leave of the site doesn’t load within 3s and 80% of them don’t come back.

So, can you build rich web apps without using frameworks?

The short answer is yes. There are plenty of websites out there that are built without using a framework; GitHub and YouTube are probably the most popular ones.

The long answer might be a little more complicated than you think. As we have already investigated in this article, writing custom, reusable components without using a single framework can be done quite easily. However, web apps consist of more than just components. They also often include:

  • state management (coming soon)
  • routing (coming soon)
  • theming (coming soon)

Can it be done? I can already tell you today that the answer is yes. Is it maintainable, reliable and efficient? Well, we already know that writing reusable components can be done well by utilizing Custom Elements and Shadow DOM, but what about the rest? Read the other articles to find out and learn about the potential future of writing web applications without having to learn/use a framework.

A step towards the right direction

As earlier mentioned, web components are framework agnostic, meaning they can be used within any application, no matter whether it’s vanilla JS, React or Angular. If you are currently building a set of reusable components and you would like to share it with others or you’re looking for components for your next app, check out bit.dev.

It’s very easy to use custom components; simply pick the one you want to use, run the npm install shown on the component page, and import it. For example, running npm i @bit/wiredjs.wired-elements.wired-progress and adding the following definition to the code allows you to use a cool hand-drawn progress bar:

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

What’s new in HTML6

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

ReactJS vs Angular vs Vue: Best Javascript Framework For Your Project

ReactJS vs Angular vs Vue: Best Javascript Framework For Your Project

ReactJS vs Angular vs Vue: Best Javascript Framework For Your Project. This video covers the key differences between ReactJS, Angular and Vue with respect to the following: Use case, Performance, Data binding, Scripting language, Testing, Community support, Growth curve

ReactJS, Angular and Vue have been all the craze the past couple of years. All these tools help developers build fancy user interfaces for web and mobile applications. But if all of them serve the same objective, what do you think makes them stand apart! Well, to address that, this video covers the key differences between ReactJS, Angular and Vue with respect to the following:

  1. Use case 03:11
  2. Performance 03:30
  3. Data binding 04:52
  4. Scripting language 06:05
  5. Testing 06:52
  6. Community support 07:31
  7. Growth curve 08:24

React vs Angular vs Vue.js by Example

What is the best JavaScript framework, library that everybody is learning in 2019? React, Angular or Vue? Watch this video to find out.

With all of the various javascript *libraries *and frameworks, you might be a little bit confused as to where to begin. Right now, the three powerhouses in the javascript world are React, Angular and Vue.js.

Sometimes, the best course of action is to make up your own mind based on your own experiences.

And that's exactly what this course will aim to do. We're going to design and develop a single app in React, Angular and Vue.js.

The goal here is to help you determine which workflow you like best based on your own needs and preferences.

The following is the basic flow of what we're going to learn in React, Angular, and Vue.js:

  • Installing & Getting Started with a Project
  • Component Structure
  • Templating
  • Styling
  • Integrating CSS Frameworks
  • Working with API's

This will help you get a solid start with each of these javascript technologies, to the point at which you will walk away with your own opinions.

So, if you're ready to learn, let's get started!

What you’ll learn

  • Create a React App
  • Create an Angular App
  • Create a Vue.js App
  • Create an Adobe XD Prototype Mockup
  • Understand the core differences between React, Angular and Vue.js

Are there any course requirements or prerequisites?

  • HTML
  • CSS
  • Basic Javascript
  • Adobe XD (Experience Design) for Mockup Process (Optional)

Thanks for watching

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Introduction Best Javascript Framework for Your Project : ReactJS vs Angular vs Vue

 Introduction Best Javascript Framework for Your Project : ReactJS vs Angular vs Vue

ReactJS, Angular and Vue have been all the craze the past couple of years. All these tools help developers build fancy user interfaces for web and mobile applications...

ReactJS, Angular and Vue have been all the craze the past couple of years. All these tools help developers build fancy user interfaces for web and mobile applications. But if all of them serve the same objective, what do you think makes them stand apart! Well, to address that, this video covers the key differences between ReactJS, Angular and Vue with respect to the following:

  1. Use case 03:11
  2. Performance 03:30
  3. Data binding 04:52
  4. Scripting language 06:05
  5. Testing 06:52
  6. Community support 07:31
  7. Growth curve 08:24