Build Your Own React(pomb.us)

153 pointsby howToTestFE19 hours ago7 comments

Etheryte6 hours ago
The animations don't keep up when you scroll the page quickly and it really makes the whole thing a pain to glance through. When you scroll fast or just jump to a point in the middle of the article with the scrollbar, you get a bunch of enqueued animations that make no sense.
franciscop6 hours ago
This is an amazing resource to understand the internals/potential internals, and led me to build a small renderer that I've been using to amazing success for my own alt backend renderer. I now can do it like this:
```
    export default server()
      .get('/', () => <div>Hello world</div>)
      .get(...);
```
I've been using Bun's JSX transformer as well to do the transpilation, and since it's just a renderer on the backend I don't need to worry about events or hooks, just the rendering step. For this, the article was amazing and I learned a lot.
- satvikpendeman hour ago
  Isn't this just a JSX template engine? For anything interactive you still need JS on the frontend. And then you essentially recreate React Server Components.
- thecupisblue5 hours ago
  I'm actually about to release something similar, if you're interested would love to share it with you - getting some feedback would really help a lot.
  - franciscop3 hours ago
    That's very nice, sure, thanks! Would love to see what others are working on. My very minimal implementation and docs are here, not really yet in my public projects, I've only used it for experiments:
    - Documentation: https://server-js.com/documentation#jsx
    - Source of the main renderer: https://github.com/franciscop/server-next/blob/master/src/js...
- alfonsodev6 hours ago
  How do you handle interaction ?
  - franciscop3 hours ago
    No interaction built in for this kind of simplified use-case, it's just like one of the old "template engines" of the old day, just in JSX/TSX. It's actually much better than expected, I used to dislike that all the old templates had something "off" for me; either they invented their own syntax for logic that you needed to learn besides normal JS (think Handlebars, Pug, etc), or they were in JS-like and with an odd HTML syntax that made sharing between plain HTML and whichever language very hard (think Pug/Jade).
    With JSX templating, it's a subset of React, so you can directly share "up"t, and sharing "down" is very easy as well (just removing interaction), since both use the same syntax.
  - 8n4vidtmkvmk3 hours ago
    I wrote something like this too. If i need interaction, i did something with the onclicks so it just sends the function definition to the client and calls that. Its not as powerful as react but you can do basic stuff. Its good if your site is mostly static.
    franciscop3 hours ago
    I was strongly thinking about doing that, but I think I prefer (for now) explicitly not having events, than having events that work kinda similar but not the same. Did you end up publishing it? Would love to have a look!
agarren16 hours ago
That is a fantastic presentation. It reminds me of the annotated source/site that backbonejs used to have, but this one is interactive. Really great job!
- theturtletalks14 hours ago
  Pomber is the founder of CodeHike and the code block animations you see are powered by it! We use CodeHike for our doc tutorials and it’s so much easier to follow.
- keeganpoppen12 hours ago
  could not agree more. this is the "everything has to be communicated via video format" they tell you not to worry about... as it were... all of the interactive and sequential that helps to build up a story, but where every detail is brought into focus exactly when it is relevant, but still forms part of a cohesive, intelligible whole (ie. a document! (who knew that documents were a great way to document things!)). i really have nothing to add to parent other than to second how fantastically presented the content on this page is. really beautiful work.
- dleeftink10 hours ago
  Motioncanvas may also be of interest then!
  [0]: https://motioncanvas.io/blog
- agumonkey16 hours ago
  coffeescript docs used the same system iirc, very nice indeed
kitd9 hours ago
Love the way this is done. It's a shame commercial vendors don't do this sort of thing for their product docs more regularly.
- pomber8 hours ago
  Author here.
  > It's a shame commercial vendors don't do this sort of thing for their product docs more regularly.
  I've been trying. I'm even building something to make adoption easier, not launched yet but it's here https://docskit.codehike.org
a45646316 hours ago
Amazing website and presentation of the story. Love it!
15 hours ago
undefined
TZubiri7 hours ago
Why a .us domain?
- greenchair6 hours ago
  MAGA!