DEV Community

Ashutosh Sarangi
Ashutosh Sarangi

Posted on • Updated on

Building My Own React-Like Library with Advanced Features! πŸš€

I'm excited to share that I've finally managed to create my own React-like library with many features! πŸŽ‰ Here’s a glimpse of what it can do:

All the below features are achievable using Vanilla Javascript.

  1. Global store management
  2. Web component creation, using a component inside another component.
  3. Browser routing
  4. Shadow DOM integration for seamless updates
  5. Observable pattern from Angular for action dispatching and more
  6. Single Page Application

_It’s been an incredible journey building this.πŸš€ _

There are lots of Keynotes I would like to highlight

1. Global store management

const Store = {
    menu : null,
    cart : [],
};

const proxiedStore = new Proxy(Store, {
    set(target, prop, value) {
        target[prop] = value;
       ...
        return true;
    }
});
export default proxiedStore;
Enter fullscreen mode Exit fullscreen mode

2. Web component creation

export class MenuPage extends  HTMLElement {
        constructor() {
          super();
       }
 connectedCallback() {} // It will trigger when It connected to the DOM
}
customElements.define("menu-page", MenuPage);
Enter fullscreen mode Exit fullscreen mode

3. Browser routing

 // Event Handler when URL change directly in the browser
        window.addEventListener('popstate', e => {
            this.go(e.state.route);
        });
-----------------------
function (route, addToHistory = true) {
        console.log('Going to route --> ', route);
        if (addToHistory) {
            history.pushState({route}, '', route); 
            // This will add the route to the browser history
        }
switch (route) {
            case '/':
                pageElement = document.createElement('menu-page');
                break;
           ...
        }

}


Enter fullscreen mode Exit fullscreen mode

4. Shadow DOM integration for seamless updates

// In a customeElement when we add this in side constructor we are saying to treat this as a shadow dom.

 this.root = this.attachShadow({mode: 'open'});

Enter fullscreen mode Exit fullscreen mode

NOTE:-
The main reason to Adopt shadow dome, is because in a normal Custome Component let's say we inject style it will pollute our global style as well.

So when we have the Shadow DOM it will not Pollute. It maintains its own scope.

5. Observable pattern from Angular for action dispatching

// This will broadcast our event.
  window.dispatchEvent(new Event('appMenuUpdated'));
  window.addEventListener('appMenuUpdated', (e) => {});
Enter fullscreen mode Exit fullscreen mode

6. Single Page Application

Here I use the routing technique which we discussed above along with Html Templates to update.

Image

Image

Image

After this, It broke a lot of my perspective, and the picture is clear now. How all the framework and Library work.

Reference:-
https://frontendmasters.com/courses/vanilla-js-apps/wrapping-up/

Top comments (0)