Why Comfey

Traditionally or even today, if we are developing features using vanilla Javascript, we follow an event-based, imperative approach. Typical flow follows following pattern:

1. Listen to an event
2. Do action (May have some calculation/variable changes etc)
3. Update DOM

OnDocReady: hideMenu();
OnBurgerClick: showMenu();
OnMenuItemClick:
  hideRootMenu();
  showSubMenu();
  hideLanguageSwitcher();
  appendMenuTitle(current);
  hideFooterMenu();
OnBackClick:
  hideMenuTitle();
  showLanguageSwitcher();
  showRootMenu();
  showFooterMenu();
OnCloseClick: hideMenu();

The advantage of the above code is, it is simple to follow along. But as the complexity increase, it becomes more and more cluttered.

The same application can be much more intuitive and clean with states. In a Comfey application, a typical flow will look like this:

1. Initialize states
2. Define actions (Click handlers etc) that will be responsible for state changes.
3. DOM updates itself for every state change.

Example

// Initialize state
const [, setCurrentNavPage] = comfey.useState('currentNavPage', '');

for (const link of linkWithSubMenu) {
    link.addEventListener('click', function menuItemClick() {
      setCurrentNavPage(link.textContent);
    });
}
backLink.addEventListener('click', function backLinkClick(e) {
    setCurrentNavPage('');
  });

That is all the javaScript needed, DOM manipulation is abstracted in Comfey. All you have to do is add some HTML data attributes as required.

<div data-bind="currentNavPage"></div>
<div class="language-switcher" data-bind-hidden="currentNavPage">

Read more about Templating

Still why Comfey and not React?

Comfey is designed to be as compact and lightweight as possible still offering features that will help you in most practical use cases, without having to deal with huge frameworks. This project came into existence for this sole purpose and it will stay the same. If you are going to build an SPA or a very complex JavaScript application, you will need a framework like React, Vue, or Angular. If you are writing components for traditional sites, Comfey will make your vanilla js comfier.

Convinced? Get started by Reading Comfey Quick start guide