Can You Build Web Apps in 2019 without a Framework?

Do we need React/Angular/Vue in 2019?

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.

Useful tip before we begin: Use Bit to encapsulate components with all their dependencies and setup. Build truly modular applications with better code reuse, simpler maintenance and less overhead.

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: