Vanilla.js Patterns

Watch these videos for a full background and latest info

This project presents a potent approach to web development using the fundamental building blocks of the web - Vanilla JavaScript and CSS. By doing so, we eliminate the overhead of heavy frameworks or libraries. Here's why we believe in this approach:

Running

pnpm i

pnpm start

Why choose Vanilla JavaScript over frameworks and libraries like React, Vue, etc?

While frameworks and libraries do offer certain advantages, they also come with inherent challenges:

1. Dependency and Updation: With a framework, you become dependent on its evolution. Updates are frequent, and keeping your codebase synchronized can become a daunting task.

2. Learning Curve: Frameworks impose their conventions and rules, meaning there's always an extra layer of knowledge to acquire, in addition to mastering JavaScript itself.

3. Opaque Structure: Frameworks often work as a "black box" - if you want to tweak a certain part (like the router in React), it can be complex and challenging.

Choosing Vanilla JavaScript, on the other hand, empowers you with more control, transparency, and freedom from continuous update requirements.

Aren't we creating our own framework with Vanilla.js Patterns?

Some might argue that by not using an established framework, we're creating our own, which others will have to learn. While there is some merit to this argument, it is important to note that the patterns we use here are built directly on the JavaScript language and the Web APIs - the core tools for web development that any developer should be familiar with.

Instead of learning the idiosyncrasies and abstractions of a specific framework, developers will learn how to use the foundational technologies more effectively.

But aren't we reinventing the wheel?

Not really. What we are doing is simplifying and demystifying. We're reducing the layers of abstraction and showing how the fundamental technologies of the web can be harnessed directly. The browser is the real "wheel," and our job is to leverage its capabilities efficiently.

What’s wrong with using a CSS preprocessor like Sass?

Nothing is "wrong" per se with using a CSS preprocessor like Sass, but with the evolving capabilities of CSS, it's becoming less necessary. Features like native CSS variables and nesting (yes, even nested media queries) mean you can do more with vanilla CSS than ever before. Like with JavaScript, sticking with vanilla CSS avoids the need for an extra layer of tooling and learning.

You can also run without a server by enabling use-hash in the router component, which uses hash-based routing. This method is used in our GitHub Pages live demo: Vanilla.js Patterns Live Demo.

Optional Backend

Optional backend that the /users route points to. Setup instructions here.