I use web components with a render function to generate HTML and templates to provide fine-grained reactivity. Targeted re-rendering of items with relevant state changes makes performance significantly faster and also makes forms easier to write.

Here is an example of a template used to render a list of events.

const EventItem = () => {

  EventItem.eventTime = (eventData) =>{
    if(eventData.isRecurring){
     return `${eventData.dayOfWeek}s at ${eventData.nextEventTime}`;
    }
    return `${eventData.nextEventDate} at ${eventData.nextEventTime}`
  }

  EventItem.url = (eventData) => {
    return `/html/groups/event.html?id=${eventData.eventId}&groupId=${eventData.groupId}`
  }

  EventItem.location = (eventData)=>{
    return  `${convertLocationDataForDisplay(eventData.eventLocation)}`
  }
    
  return `
    <li>
      <a 
        class="btn secondary"
        {{href=url}}
        {{eventName}}
       >
       </a>
       <div 
         class="event-time" 
         {{eventTime}}
       >
       </div>
       <div
         class="event-location"
         {{location}} 
       >
       </div> 
      </li>
   `;
 }

 BaseDynamicComponent.defineTemplate(EventItem,"EventItem");

This is how the template is used in a component.

  <ul
    data-array=data
    data-template-name=EventItem  
  ></ul>

Do you prefer frameworks like lit to generate your web components? I always felt like the base APIs were okay-ish but I haven't really investigated web components much. Like honestly once maybe 4 years ago and it was for a POC at work.

I'm using a framework built from scratch with vanilla JS. It includes logic for writing templates.

I plan to publish an updated version soon.

Same as op, I rewrote away from react my Dropbox alternative (https://github.com/mickael-kerjean/filestash) in vanilla js a couple years back around the idea that components are plain exported functions like this:

  export default function component(render) {
      const $dom = xxxx
      render($dom);
  }

example: https://github.com/mickael-kerjean/filestash/blob/master/pub... the only library in there is rxjs to manipulate events in a functional fashion with no imperative code and everything is composed from those simple component functions. The wasm is used mostly as an interface for plugins to both run apps to display various file types like RAW, PSD, TIFF, CDR, .... as those tend to have better support in C than other languages, and on the server side to have a safe environment to execute plugin code.

Completely seriously, and I don’t think this is particularly controversial: outperforming React is not impressive. React was never particularly good at performance—VDOM is fundamentally overhead, and there are a variety of faster and lighter techniques employed by various competitors, and even among VDOM libraries it’s not as fast as it could be. React sold itself as fast initially, but what it was faster than (rebuilding the entire DOM on any update) was a strawman.

It’s not hard to be faster than React while exposing broadly similar functionality. If you’re making something for your own usage only, it’s even easier to beat it.

I don't disagree, I'm always curious if there are new techniques out there to adopt. It's just hard to find out about them because as you said, sometimes they are bespoke single use tools that aren't easily shared/discussed about.

This site has excellent articles on learning to use native web technologies with minimal dependencies. I've found them to be useful resources when learning how to create web components.

https://gomakethings.com/guides/?filter=html

I actually agree with you. I was making the point that not using LLM assistance to code produces decent results.

Also, I'm planning to release my changes as a framework that can be used for a variety of interactive websites.