Show HN: I built a 4kb alternative to React, Vue, etc for building web UIs.

Re:Show HN: I built a 4kb alternative to React, Vue, etc for... by lhorie on Thursday January 07, 2021 @07:42PM (#25679770)

Skimmed through the docs. Some thoughts:

- it has a bunch of useful serialization sugar (e.g. `{{ classes }}` serializes correctly whether it's an array, an object of booleans, etc. This is similar to Angular (in React-land, this got pulled out into a separate package, classnames). There's similar sugar for `style` and objects (which React also supports).

- I'm not a fan of the variadic event handler signature. If I understand correctly, having a event handler inside a loop adds an extra argument to the handler function, but what happens if there are nested loops? In React-land, this would be done w/ arrow functions and closures; in Angular, one would write a js function call similar to plain HTML event handlers. I prefer the React approach (though I understand that isn't really an option for the way you approached synergyjs)

- Similarly, if `#` is bound to loop index, then how do you access outer loop index in a nested loop situation?

- Binding view property names to form controls of the same name is an interesting abstraction. React looks clunky in comparison (yes, even hooks). Angular has a similar facility, with the addition of allowing custom transformation logic (think getter/setters for bidirectional bindings).

- prerendering via a browser-like environment isn't the best approach IMHO (I've seen people run into issues w/ jsdom missing features, for example, and something like puppeteer is a bit of a heavy thing to be running frequently server-side)

- I like the clear separation between JS and CSS (but, then again, I'm an old school person). React people might dislike it if they're used to css-in-js per-component style encapsulation.

Overall impression: appears to pack quite a punch for 4kb (more so than Preact IMHO, because of how it handles forms). Docs are clear and to the point, but could use more examples/tutorials (especially lifecycle hooks). Would like to see it mature a bit (e.g. in terms of addressing things like nested loops, as mentioned above), and I think it would benefit from considering a less expensive SSR approach.

Very promising!

[ Parent | on HN ]

Re:Show HN: I built a 4kb alternative to React, Vue, etc for... by defx on Thursday January 07, 2021 @07:50PM (#25679856)

Firstly, thank you so much, this kind of feedback is extremely useful and greatly appreciated. I'll try to reply separately to each of your points for clarity...

[ Parent | on HN ]

Re:Show HN: I built a 4kb alternative to React, Vue, etc for... by defx on Thursday January 07, 2021 @07:54PM (#25679898)

RE the event signature: (If you raise an event from an item within a repeated block then synergy provides the data for that item as the second argument to your event handler function.) If you have a nested loop then you'll get the data item for that particular loop.

[ Parent | on HN ]

Re:Show HN: I built a 4kb alternative to React, Vue, etc for... by lhorie on Thursday January 07, 2021 @08:01PM (#25679982)

Right, sorry I think I wasn't clear. I'm wondering how one goes about something like this

    as.map(a =>
      <tr>{
        bs.map(b => <td onClick={() => foo(a, b)}></td>)
      }</tr>
    )

Notice how both `a` and `b` are passed into `foo`. There are other possible permutations, such as passing indices or properties of items. I believe it's possible to access `b.bar` easily enough, but it wasn't clear how to access `a` or the index of `as.map` from inside the inner loop.

[ Parent | on HN ]

Re:Show HN: I built a 4kb alternative to React, Vue, etc for... by defx on Thursday January 07, 2021 @08:19PM (#25680163)

see the comment above "RE: #" concerning the index. synergy doesn't provide means for you to pass custom arguments into the event handlers, but the event target and the datum provide context of the loop and the handlers "this" is the viewmodel itself.

[ Parent | on HN ]

Re:Show HN: I built a 4kb alternative to React, Vue, etc for... by lhorie on Thursday January 07, 2021 @08:24PM (#25680204)

So then one would do `function foo(e, b, a) {...}` to access `a`?

[ Parent | on HN ]

Re:Show HN: I built a 4kb alternative to React, Vue, etc for... by defx on Friday January 08, 2021 @05:16AM (#25683253)

Apologies for the late reply, finally I had to get some sleep! No, you only get the datum for the loop from which the event is raised.

[ Parent | on HN ]

Re:Show HN: I built a 4kb alternative to React, Vue, etc for... by defx on Thursday January 07, 2021 @08:13PM (#25680101)

RE css-in-js style encapsulation: One of my goals was to support pre-rendering, which is why Synergy doesn't currently use Shadow DOM. In the (hopefully near) future, Shadow DOM will become declarative and at that point Synergy will adopt whichever pattern the web lands on and be able to provide both features.

[ Parent | on HN ]

Re:Show HN: I built a 4kb alternative to React, Vue, etc for... by defx on Thursday January 07, 2021 @08:04PM (#25680017)

RE separation of concerns: Glad you like it, and yeah - the react approach is very popular so this won't suit everybody, but that's fine...people have different styles and I don't believe there's a one "right" way any more than there's a "best" programming language.

[ Parent | on HN ]

Re:Show HN: I built a 4kb alternative to React, Vue, etc for... by defx on Thursday January 07, 2021 @07:57PM (#25679938)

Re the '#', yes - this is currently a limitation and will be addressed, most likely with destructuring syntax for the repeated block declaration (e.g., #each [i, item] in items)

[ Parent | on HN ]

Re:Show HN: I built a 4kb alternative to React, Vue, etc for... by defx on Thursday January 07, 2021 @08:01PM (#25679978)

RE prerendering: yes, completely agree - puppeteer would certainly be heavy for dynamic SSR and I wouldn't suggest that. Perfectly suitable for build-time prerendering though, which is what I've been focused on so far in this area with Synergy.

[ Parent | on HN ]

Re:Show HN: I built a 4kb alternative to React, Vue, etc for... by defx on Thursday January 07, 2021 @08:23PM (#25680192)

RE docs: Yes absolutely! The next section in the docs will be tutorials and all of this great feedback will be most useful in helping figure out what to focus on so thanks again.

[ Parent | on HN ]