Hacker News Reader

Comment by have_faith | Hacker News Reader

It's my understanding that regardless of the complexity of your custom JSON data at some point while parsing the tree you have a line that says "if obj is of this type, then render this component for this node", all Svelte/Solid etc need to know is that this is the line where a Component is being assigned to a variable that is going to be rendered in the template.

Or are you saying you want a layout rendered from JSON without first defining the possible components as Svelte/Solid/React components etc? As I think that defining components explicitly is a central part of all of the front-end frameworks, compiler or otherwise?

View on HN

Consider the following pseudo-code:

    list2 = bubble_sort(list1)
    render(list2)

Now suppose the user deletes one item in list1.

The question is now:

Will the update trigger a new bubble sort?

Will the update do something smarter, like just delete the DOM element?

There's usually no render function to call in these types of frameworks as far as I understand (my experience being a little Svelte).

I imagine in your scenario the psuedo code to achieve what you want would be written.

  list2 = bubble_sort(list1)
  removeItem = () => delete list2[random index]
  ...
  <for each list2 render div>

The compiler will see a change to the list2 variable anywhere that removeItem is called and annotate the code to make the appropriate changes to the dom in the function call and the bubble_sort line will never be re-run unless it was explicitly added to the removeItem function.

Correct. The idea is that the derived state only updates when the underlying state updates. And the mapping to the DOM is just derived from that derived state. So list updates.. triggers bubble sort, triggers DOM reconciliation. The difference with Svelte is it sees it and the compiler writes the reactive code in the background. In Solid you just write the reactive code yourself.. ie.. `setState` etc. But it more or less works similarly.

It's like Svelte without abstracting the update mechanism. Which makes it a little more to get into at first but very similar to a library like React. The difference from React is that Solid knows exactly what you are updating so it doesn't bother with the other stuff.

Note that the item is deleted from list1. The framework should (I suppose) track that list2 depends on list1 through bubble_sort(). Are the dependencies implicit? Or should they be declared explicitly?

Generally implicitly either through proxy or get method read. Solid provides an explicit API as well.

Well in React the rendering logic could still just be plain functions, though I guess technically those are considered "functional components".

Reply on news.ycombinator.com