Discussion on: Modern Web Components

View post

Replies for: I love the idea of using built-in components that can be used anywhere but when trying to dive deeper into web components I found there to be a bit...

Matias Trujillo • Jun 17 '19

I invite you to try Atomico, it's simpler than the exposed libraries,eg:

Atomico 3kB is based on virtual-dom, HoCs and hooks.

It has a small router and deferred charges(dinamic import), eg:

I hope I have covered the essentials. start simple npm init @atomico

Josef Ježek • Jun 17 '19 • Edited

We love Web Components, not custom apis. ;-)

github.com/w3c/webcomponents

Matias Trujillo • Jun 22 '19

No thanks, WC api is unfriendly and complex, current class-based implementations generate too much repetitive code and tie tightly to this.

instead, with my proposal you can better separate the logic from the view and avoid things like this.

microsoft code.

class /**any libraries based on classes, eg LitElement */{
    anyUpdate(changedProps) {
        if (changedProps.get('_showMenu') === false) {
          // get popup bounds
          const popup = this.renderRoot.querySelector('.popup');
          if (popup && popup.animate) {
            this._popupRect = popup.getBoundingClientRect();

            // invert variables
            const deltaX = this._loginButtonRect.left - this._popupRect.left;
            const deltaY = this._loginButtonRect.top - this._popupRect.top;
            const deltaW = this._loginButtonRect.width / this._popupRect.width;
            const deltaH = this._loginButtonRect.height / this._popupRect.height;

            // play back
            popup.animate(
              [
                {
                  transformOrigin: 'top left',
                  transform: `
                  translate(${deltaX}px, ${deltaY}px)
                  scale(${deltaW}, ${deltaH})
                `,
                  backgroundColor: `#eaeaea`
                },
                {
                  transformOrigin: 'top left',
                  transform: 'none',
                  backgroundColor: `white`
                }
              ],
              {
                duration: 100,
                easing: 'ease-in-out',
                fill: 'both'
              }
            );
          }
        }
      }
}

The right is part of the code that shows how inelegant it can be to solve a state problem using classes.

Indifferent to eg, if I believe that sometimes you need solutions like Atomico if your WC is simple