11 ms·

I'm a 1 person dev team who wrote frontend code that outperforms React. Is was successful because I didn't use any sort of LLM assistance.

ChrisMarshallNY 2mo ago
I’m a 1 person dev team that’s in the final stages of shipping a complete rewrite of a pretty big app (native frontend, server backend). It’s going to be very successful, because I used all sorts of LLM assistance (and because it’s adding onto a successful app that’s been shipping for two years). There’s absolutely no way that I could have managed this scale, on my own. There will be examples of both success and failure, with LLMs.
shimman 2mo ago
That's pretty impressive. I always like bespoke web utilities tailored for specific dev purposes. What approach are you taking? I'm about to start a mithril.js project, was always under the impression it was the most efficient approach. Are you doing something similar or different or are you referring to WASM?
- mickael-kerjean 2mo ago
  Same as op, I rewrote away from react my Dropbox alternative (https://github.com/mickael-kerjean/filestash 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/public/assets/pages/ctrl_homepage.js 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.
- chrismorgan 2mo ago
  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.
  - gulugawa 2mo ago
    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.
  - shimman 2mo ago
    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.
    - gulugawa 1mo ago
      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 https://gomakethings.com/guides/?filter=html
- gulugawa 2mo ago
  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>
  - shimman 1mo ago
    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.
    - gulugawa 1mo ago
      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.

ChrisMarshallNY 2mo ago

I’m a 1 person dev team that’s in the final stages of shipping a complete rewrite of a pretty big app (native frontend, server backend). It’s going to be very successful, because I used all sorts of LLM assistance (and because it’s adding onto a successful app that’s been shipping for two years). There’s absolutely no way that I could have managed this scale, on my own. There will be examples of both success and failure, with LLMs.

shimman 2mo ago

That's pretty impressive. I always like bespoke web utilities tailored for specific dev purposes. What approach are you taking? I'm about to start a mithril.js project, was always under the impression it was the most efficient approach. Are you doing something similar or different or are you referring to WASM?

mickael-kerjean 2mo ago
Same as op, I rewrote away from react my Dropbox alternative (https://github.com/mickael-kerjean/filestash 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/public/assets/pages/ctrl_homepage.js 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.
chrismorgan 2mo ago
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.
- gulugawa 2mo ago
  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.
- shimman 2mo ago
  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.
  - gulugawa 1mo ago
    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 https://gomakethings.com/guides/?filter=html
gulugawa 2mo ago
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>
- shimman 1mo ago
  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.
  - gulugawa 1mo ago
    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.