4 ms·

> Ok, but surely you see the difference between this very simple/straightforward "demo app" and a real webapp? Something like Zillow, Facebook, Doordash, Spotif

> Ok, but surely you see the difference between this very simple/straightforward "demo app" and a real webapp? Something like Zillow, Facebook, Doordash, Spotify, etc. Yes and no. What are those apps really doing that's fundamentally so much more complicated ? Obviously there's a lot more to their UI's and you'd need to be careful about doing full re-renders. I suspect anything that affects global page layout could become problematic. But I think it should be possible to predetermine the page layout (unless the viewport size changes, then you'd need to re-render everything, but that should be uncommon) and only re-render within div's of preset size. > I looked at your code and you had to write your own render loop to accomplish this which would break down if you had interactive stuff that you were rendering out You mean like generating forms/controls ? I have some other code I'm working on that does that and also doesn't seem particularly hard. For example I'm working on a chrome extension with an options page that updates another page and the local storage as soon as a user changes an option setting.

joshstrange 4y ago
> Yes and no. What are those apps really doing that's fundamentally so much more complicated ? They have more views, more data, more data that needs to be kept in sync across multiple views. You cannot rerender (and inject/replace) every time the underlying data changes. It works up to a point but once you cross that rubicon it because very painful. I don't know how better to say this or explain it. I write webapps professionally and for side-projects, maintaining any of them in vanilla js would be a non-starter. I have even tried that for "smaller" webapps that "don't need a build step", it doesn't work. SCSS is vastly superior to CSS, TS is superior to JS, and templates that support things like `v-for="item of items"` or `v-if="condition"` or `@click="doTheThing"` are superior to HTML templates with event handlers, loops spitting out html, and conditional rendering of blocks. > You mean like generating forms/controls ? Yes. Those things make this all more complicated. I've built exactly what you have in the past and at a certain point it falls down hard. There is a noticeable lag when you change data and go to re-render. If the user is focused on an input and you re-render they lose focus unless you make sure to reset the focus after the render. If you wanted to do something like "As the user types re-render an element to show what they typed" (think example/preview, or even something like putting the name you are typing into the UI as a header) it gets really gross really fast. So you might start having smaller render areas "I'll just re-render this 1 part" but that also gets complicated very quickly and at the end of the day you are just building a worse framework without the benefit of the community.
- tgflynn 4y ago
  > You cannot rerender (and inject/replace) every time the underlying data changes. OK, so how do the frameworks do it then ?
  - Kiro 4y ago
    This is a good start: https://reactjs.org/docs/faq-internals.html https://reactjs.org/docs/faq-internals.html https://reactjs.org/docs/reconciliation.html https://reactjs.org/docs/reconciliation.html
    - tgflynn 4y ago
      Thanks.
  - joshstrange 4y ago
    They do pathing/differential rendering. They don't all do it the same way but one example is they build the DOM "in memory", render it out, and then when they re-render they compare they old/new html and inject only the diff. They also have built in things to make sure you don't lose focus when you add an attribute to the input (or change it in some way). There are lighter-weight shadow dom frameworks out there (than Vue/React/Angular) so why would you want to write one yourself?
    - tgflynn 4y ago
      > There are lighter-weight shadow dom frameworks out there (than Vue/React/Angular) so why would you want to write one yourself? Mainly because I prefer working with my own code to working with other people's. Another advantage is reducing the amount of new information I have to learn (which with the whole vanilla HTML5 stack is already vast), but maybe I'm hopelessly out of date. Thanks for the insights though, I wasn't aware they were doing all of that.
      - nuancebydefault 4y ago
        > I prefer working with my own code... Every programmer prefers to work with their own code. This is the biggest dilemma, it boils down to a lot of "make/buy" decisions. Rule of thumb after 20+ years of experience : do not reinvent frameworks. The framework you are thinking of already exists, and, even when not perfect, solves a lot of problems you hadn't even thought of.
mattbrewsbytes 4y ago
I suspect some of the JS frameworks started with a set of JS functions, etc. to do things dynamically on a page. And it grew. And then someone comes by and says "hey we're building a new app, mind if we use that?". And it was cloned and morphed. And it grew. Maybe that repeated a bit, and then someone created a framework of generic tools. Then this happened in multiple places. Or hackers didn't like how something worked so they came up with their own spin. I believe React came out of or is strongly influenced by FB, which makes sense - a Single Page App is the design and progressively loading more ads, ahh I mean content. And here we are building client/server apps with a technology invented for document sharing. There are 2 frameworks solving the "keep track of state" problem on the server and allowing for dynamic/reactive UI via web sockets instead of XHR: Ruby/Rails 7 and Elixir/Phoenix LiveView. They still use JS but you can limit it to client-side things and maintain state and validations on server.

joshstrange 4y ago

> Yes and no. What are those apps really doing that's fundamentally so much more complicated ? They have more views, more data, more data that needs to be kept in sync across multiple views. You cannot rerender (and inject/replace) every time the underlying data changes. It works up to a point but once you cross that rubicon it because very painful. I don't know how better to say this or explain it. I write webapps professionally and for side-projects, maintaining any of them in vanilla js would be a non-starter. I have even tried that for "smaller" webapps that "don't need a build step", it doesn't work. SCSS is vastly superior to CSS, TS is superior to JS, and templates that support things like `v-for="item of items"` or `v-if="condition"` or `@click="doTheThing"` are superior to HTML templates with event handlers, loops spitting out html, and conditional rendering of blocks. > You mean like generating forms/controls ? Yes. Those things make this all more complicated. I've built exactly what you have in the past and at a certain point it falls down hard. There is a noticeable lag when you change data and go to re-render. If the user is focused on an input and you re-render they lose focus unless you make sure to reset the focus after the render. If you wanted to do something like "As the user types re-render an element to show what they typed" (think example/preview, or even something like putting the name you are typing into the UI as a header) it gets really gross really fast. So you might start having smaller render areas "I'll just re-render this 1 part" but that also gets complicated very quickly and at the end of the day you are just building a worse framework without the benefit of the community.

tgflynn 4y ago
> You cannot rerender (and inject/replace) every time the underlying data changes. OK, so how do the frameworks do it then ?
- Kiro 4y ago
  This is a good start: https://reactjs.org/docs/faq-internals.html https://reactjs.org/docs/faq-internals.html https://reactjs.org/docs/reconciliation.html https://reactjs.org/docs/reconciliation.html
  - tgflynn 4y ago
    Thanks.
- joshstrange 4y ago
  They do pathing/differential rendering. They don't all do it the same way but one example is they build the DOM "in memory", render it out, and then when they re-render they compare they old/new html and inject only the diff. They also have built in things to make sure you don't lose focus when you add an attribute to the input (or change it in some way). There are lighter-weight shadow dom frameworks out there (than Vue/React/Angular) so why would you want to write one yourself?
  - tgflynn 4y ago
    > There are lighter-weight shadow dom frameworks out there (than Vue/React/Angular) so why would you want to write one yourself? Mainly because I prefer working with my own code to working with other people's. Another advantage is reducing the amount of new information I have to learn (which with the whole vanilla HTML5 stack is already vast), but maybe I'm hopelessly out of date. Thanks for the insights though, I wasn't aware they were doing all of that.
    - nuancebydefault 4y ago
      > I prefer working with my own code... Every programmer prefers to work with their own code. This is the biggest dilemma, it boils down to a lot of "make/buy" decisions. Rule of thumb after 20+ years of experience : do not reinvent frameworks. The framework you are thinking of already exists, and, even when not perfect, solves a lot of problems you hadn't even thought of.

mattbrewsbytes 4y ago

I suspect some of the JS frameworks started with a set of JS functions, etc. to do things dynamically on a page. And it grew. And then someone comes by and says "hey we're building a new app, mind if we use that?". And it was cloned and morphed. And it grew. Maybe that repeated a bit, and then someone created a framework of generic tools. Then this happened in multiple places. Or hackers didn't like how something worked so they came up with their own spin. I believe React came out of or is strongly influenced by FB, which makes sense - a Single Page App is the design and progressively loading more ads, ahh I mean content. And here we are building client/server apps with a technology invented for document sharing. There are 2 frameworks solving the "keep track of state" problem on the server and allowing for dynamic/reactive UI via web sockets instead of XHR: Ruby/Rails 7 and Elixir/Phoenix LiveView. They still use JS but you can limit it to client-side things and maintain state and validations on server.