7 ms·

Show HN: Hacker News clone using Remix and React

80 points by clintonwoo 5y ago

Hi all, author here. This project was a pleasure to do, Remix has very good developer experience. But further than that it's actually a really good way to develop applications, it's a mix of old meets new where the paradigm encourages you to take advantage of web standards for data fetching (forms, links, a tags). And it turns out that it's actually an optimal way to develop simple or even complex web applications which can deploy in a number of runtime environments (including edge workers). So you can get an insanely fast website for users. Note that this project is not necessarily an optimal website implementation (since it copies Hacker News) but rather it's intended to be useful as a starting point or reference for your own projects! You can read about some of the benefits of it on the project page linked. By the way I'm currently available to work (if you email me at clinton.dannolfo @gmail!)

deleted 5y ago
[deleted]
loanl 5y ago
Looking nice! I think Remix is gaining substantial popularity over Next.js these days. It's pretty interesting to watch.
baobabKoodaa 5y ago
This seems interesting! I'm not too familiar with Remix, could you expand on this bit: > Most apps can be built leveraging web fundamentals (form/anchor tag) requiring no state management library
- clintonwoo 5y ago
  In general a client side web app might use something like Redux to hold state and make requests to the server using JavaScript (`fetch` for example). But with Remix you can just use HTML <form action="/submit" method="POST"> tags and have an `action`or `loader` which handles the response for it! This way the app even works when JS is disabled (Usually to redirect you to a new page after an action). Remix also provides a higher level <Form> React component and hook with support for extra states like loading etc!
  - baobabKoodaa 5y ago
    Hmmh, but what about global state for the 99% of users who do have JavaScript enabled? If I navigate to a page on a Remix app, and then hit the back button, does Remix do some trickery to maintain global state so that things such as scroll position are not broken?
    - clintonwoo 5y ago
      Remix also supports client side React rendering so those redirects will be client side history and general routing logic applies just like using React Router. No page reloads will occur when using the Remix Form and Link component so the state is preserved according to regular React/React Router behaviour.
      - baobabKoodaa 5y ago
        React Router isn't a state management library and doesn't provide global state. As far as I can tell, using Remix/React/React Router in this way would result in broken behavior. As an example, consider a news website that has infinite scroll on the front page. When the user clicks on an article and then clicks back, the user will see a version of the front page that is different from before, and their scroll position will be broken.
        sergiodxa 5y ago
        Remix has a ScrollRestoration component to handle the scroll position when going back and forward in the browser history. When you click the browser back button as far as I remember Remix will do what the browsers do and show the previous data, but if you click a button in the UI to navigate to the previous page it will fetch the new data. Re global state, in my experience with Remix and before it with tools like React Query, once you move the server state (data fetched from an API or queried from a DB) outside tools like Redux, then what you have left is mostly UI state (input values, open/close states, etc.) and you don't need Redux for that. And if your app is more complex (like a canvas-like app for example) you can either use a state + context in a parent component or you can use Redux or any other state management library, Remix once JS load will not cause a full page navigation so if you initialize a global state in something like Remix it will keep working across page navigations, even if you click back it will keep the state because Remix uses RR to navigate so it's pure client-side navigation.
- azangru 5y ago
  It might help watching their release video: https://www.youtube.com/watch?v=wsJaUjd1rUo https://www.youtube.com/watch?v=wsJaUjd1rUo And other videos on their youtube channel discussing their framework: https://www.youtube.com/c/Remix-Run/videos https://www.youtube.com/c/Remix-Run/videos
msoad 5y ago
For comparison this[1] is Next.js implementation that uses React Server Components (RSC). I feel folks at Remix missed on React Server Components and now it will be a lot of work to make it work in Remix. Hopefully I'm wrong. If you don't know, RSC allows the HTML from server to start streaming as React is rendering the components in the backend. It allows fine grain control to what part of page renders first and which parts can be rendered later as HTML and data is streaming from the server. Before this, all of React server frameworks would render the entire page, shove "hydration data" in it which is mostly repeated data that is used to render the page and also include that HTML in the form of complied JSX in the page in the page scripts. Obviously that would make React SSR very bulky and unscalable. That's why RSC can solve so many React performance problems [1] https://github.com/vercel/next-react-server-components https://github.com/vercel/next-react-server-components
- kentcdodds 5y ago
  Here's an objective comparison that Ryan Florence (Remix co-creator) made showing a Remix Hacker News Clone (not the one posted, but one he built himself) vs the Next.js implementation you're talking about here: https://remix.run/blog/react-server-components https://remix.run/blog/react-server-components If React Server Components can improve things for Remix (they can't right now, but maybe they will get better?) and if it is ever released (it's been 5 years now... and they still are saying they've got a long way to go), then Remix will ship support for them and it will be a non-breaking change for Remix users.
  - sergiodxa 5y ago
    I was coming to say something like this, also if Remix ever supports RSC it will most likely (IMO) be under noticed, like you just name a route `.server.tsx` and it will be a RSC and that's it, I don't think Remix will need a breaking change for this and RSC seems more like an implementation detail Remix has rather than something super big for the framework.
  - PleaseDisclose 5y ago
    Hey Kent, could you please disclose that you work for Remix as well?
ahmedfromtunis 5y ago
On my machines (desktop and smartphone), this implementation is noticeably faster than the real thing; or at least that's how I perceive it. I never worked with, or even tried, React and such libraries but a bit surprised. The code in this version here must be much more complexe, and the server much smaller, yet (feels as if) it is faster. Am I the only one experiencing this and surprised by it?
- sergiodxa 5y ago
  You're probably feeling it's faster because it's using <Link prefetch> on every link so everything is prefetched before you click the link (when you hover them) which makes the navigation almost instant once you click it.
  - mattwad 5y ago
    That's not right.. it's literally only on the 'new' and 'threads' links in the top navigation: https://github.com/clintonwoo/hackernews-remix-react/search?q=prefetch https://github.com/clintonwoo/hackernews-remix-react/search?...
- woah 5y ago
  The difference in speed is likely due to the fact that for many actions, data is sent as json and then placed into html markup on the client using code that was downloaded once at the beginning. This probably results in a smaller payload.
- alana99 5y ago
  Yeah, it's due to client side routing. The tradeoff is slightly higher JS size on the first load (but it gets cached) then when performing navigations it's only needing to fetch the data required to render the page. The alterative is an old school style web server that returns a new HTML file and page reload on every navigation which is higher download and runtime cost (which is how the real HN does it!). No criticism here as the site definitely works well regardless.
  - 5y ago
woah 5y ago
The author of this actually has a bunch of different HN clones with different JS tech: https://news.ycombinator.com/from?site=github.com/clintonwoo https://news.ycombinator.com/from?site=github.com/clintonwoo Might be fun to compare
- clintonwoo 5y ago
  Thanks for pointing that out! To add some extra info, the demo's are running on https://remix.hnclone.win https://remix.hnclone.win (this project) https://hnclone.win https://hnclone.win (nextjs/graphql project) It's not necessarily an apples to apples comparison of web servers though, since the NextJS one is also using GraphQL which adds extra response time. The remix one is also running on fly.io instead of a regular VPS in middle america just to cope with extra HN traffic.
- benmccann 5y ago
  Here's one built with Svelte: https://hn.svelte.dev/ https://hn.svelte.dev/ It's not exactly an apples-to-apples comparison for a number of reasons including implementation and hosting differences, but might be interesting to people anyway. The code lives here: https://github.com/sveltejs/sites/tree/master/sites/hn.svelte.dev https://github.com/sveltejs/sites/tree/master/sites/hn.svelt...
  - password4321 5y ago
    I'm always interested to see which ones are running after a few months, or a year later when the time comes to pay to renew the domain. Random yearly payments to keep tiny side project vanity URLs doesn't measure high on the life partner acceptance factor scale.
- password4321 5y ago
  I'll put in my request for https://nestjs.com/ https://nestjs.com/, "an application architecture out of the box".
dannyphantom 5y ago
Huh, how cool. This may just be an odd coincidence but I have very photosensitive eyes so there are a few custom settings I cycle through whenever I need to reduce eye strain. Switched my settings back to mfg preset and for some reason the website is easier on my eyes than regular HN. The colors are all the same, the layout is the same, the zoom is the same - can't really figure out why but I thought that was neat.
- lowboy 5y ago
  On my machine the clone has more padding and line height, which makes it easier on the eyes
assemblylang 5y ago
Great implementation, looks identical to HN and is very responsive! HN is a great website for trying out web frameworks, given how simple it is in terms of features and design. I made an alternative front end for HN not too long ago that was styled like the Windows XP desktop[0], was good fun. I wonder how many HN clones and front ends have been written for HN at this point, I'm guessing at least several hundred. [0] https://hackerxp.com/ https://hackerxp.com/
TameAntelope 5y ago
Only thing I notice is that the collapse button isn't a button and is the entire [-] thing, vs. just the - or + being an actual button. Very great work! I love destroying the notion that you have to use some esoteric hyper-optimized tech to get quality performance.
- k__ 5y ago
  Yes, the buttons and links here are horribly tiny on mobile. I don't know the stats, but I could imagine that HN is used by quite some mobile users, so an UX update would be appreciated.
deleted 5y ago
[deleted]
austinkhale 5y ago
Really interesting. I’ve been wanting to try Remix out for a bit after heavily investing in Next. Side note: seems like there is some sort of issue when swiping back on iOS Safari. Periodically getting flashes of the incorrect content.
terrycody 5y ago
I really hope someone can made this info a wordpress theme+plugin, then add some auto deleted thread after X times, then cool!

80 points by clintonwoo 5y ago

deleted 5y ago

[deleted]

loanl 5y ago

Looking nice! I think Remix is gaining substantial popularity over Next.js these days. It's pretty interesting to watch.

baobabKoodaa 5y ago

This seems interesting! I'm not too familiar with Remix, could you expand on this bit: > Most apps can be built leveraging web fundamentals (form/anchor tag) requiring no state management library

clintonwoo 5y ago
In general a client side web app might use something like Redux to hold state and make requests to the server using JavaScript (`fetch` for example). But with Remix you can just use HTML <form action="/submit" method="POST"> tags and have an `action`or `loader` which handles the response for it! This way the app even works when JS is disabled (Usually to redirect you to a new page after an action). Remix also provides a higher level <Form> React component and hook with support for extra states like loading etc!
- baobabKoodaa 5y ago
  Hmmh, but what about global state for the 99% of users who do have JavaScript enabled? If I navigate to a page on a Remix app, and then hit the back button, does Remix do some trickery to maintain global state so that things such as scroll position are not broken?
  - clintonwoo 5y ago
    Remix also supports client side React rendering so those redirects will be client side history and general routing logic applies just like using React Router. No page reloads will occur when using the Remix Form and Link component so the state is preserved according to regular React/React Router behaviour.
    - baobabKoodaa 5y ago
      React Router isn't a state management library and doesn't provide global state. As far as I can tell, using Remix/React/React Router in this way would result in broken behavior. As an example, consider a news website that has infinite scroll on the front page. When the user clicks on an article and then clicks back, the user will see a version of the front page that is different from before, and their scroll position will be broken.
      - sergiodxa 5y ago
        Remix has a ScrollRestoration component to handle the scroll position when going back and forward in the browser history. When you click the browser back button as far as I remember Remix will do what the browsers do and show the previous data, but if you click a button in the UI to navigate to the previous page it will fetch the new data. Re global state, in my experience with Remix and before it with tools like React Query, once you move the server state (data fetched from an API or queried from a DB) outside tools like Redux, then what you have left is mostly UI state (input values, open/close states, etc.) and you don't need Redux for that. And if your app is more complex (like a canvas-like app for example) you can either use a state + context in a parent component or you can use Redux or any other state management library, Remix once JS load will not cause a full page navigation so if you initialize a global state in something like Remix it will keep working across page navigations, even if you click back it will keep the state because Remix uses RR to navigate so it's pure client-side navigation.
azangru 5y ago
It might help watching their release video: https://www.youtube.com/watch?v=wsJaUjd1rUo https://www.youtube.com/watch?v=wsJaUjd1rUo And other videos on their youtube channel discussing their framework: https://www.youtube.com/c/Remix-Run/videos https://www.youtube.com/c/Remix-Run/videos

msoad 5y ago

For comparison this[1] is Next.js implementation that uses React Server Components (RSC). I feel folks at Remix missed on React Server Components and now it will be a lot of work to make it work in Remix. Hopefully I'm wrong. If you don't know, RSC allows the HTML from server to start streaming as React is rendering the components in the backend. It allows fine grain control to what part of page renders first and which parts can be rendered later as HTML and data is streaming from the server. Before this, all of React server frameworks would render the entire page, shove "hydration data" in it which is mostly repeated data that is used to render the page and also include that HTML in the form of complied JSX in the page in the page scripts. Obviously that would make React SSR very bulky and unscalable. That's why RSC can solve so many React performance problems [1] https://github.com/vercel/next-react-server-components https://github.com/vercel/next-react-server-components

kentcdodds 5y ago
Here's an objective comparison that Ryan Florence (Remix co-creator) made showing a Remix Hacker News Clone (not the one posted, but one he built himself) vs the Next.js implementation you're talking about here: https://remix.run/blog/react-server-components https://remix.run/blog/react-server-components If React Server Components can improve things for Remix (they can't right now, but maybe they will get better?) and if it is ever released (it's been 5 years now... and they still are saying they've got a long way to go), then Remix will ship support for them and it will be a non-breaking change for Remix users.
- sergiodxa 5y ago
  I was coming to say something like this, also if Remix ever supports RSC it will most likely (IMO) be under noticed, like you just name a route `.server.tsx` and it will be a RSC and that's it, I don't think Remix will need a breaking change for this and RSC seems more like an implementation detail Remix has rather than something super big for the framework.
- PleaseDisclose 5y ago
  Hey Kent, could you please disclose that you work for Remix as well?

ahmedfromtunis 5y ago

On my machines (desktop and smartphone), this implementation is noticeably faster than the real thing; or at least that's how I perceive it. I never worked with, or even tried, React and such libraries but a bit surprised. The code in this version here must be much more complexe, and the server much smaller, yet (feels as if) it is faster. Am I the only one experiencing this and surprised by it?

sergiodxa 5y ago
You're probably feeling it's faster because it's using <Link prefetch> on every link so everything is prefetched before you click the link (when you hover them) which makes the navigation almost instant once you click it.
- mattwad 5y ago
  That's not right.. it's literally only on the 'new' and 'threads' links in the top navigation: https://github.com/clintonwoo/hackernews-remix-react/search?q=prefetch https://github.com/clintonwoo/hackernews-remix-react/search?...
woah 5y ago
The difference in speed is likely due to the fact that for many actions, data is sent as json and then placed into html markup on the client using code that was downloaded once at the beginning. This probably results in a smaller payload.
alana99 5y ago
Yeah, it's due to client side routing. The tradeoff is slightly higher JS size on the first load (but it gets cached) then when performing navigations it's only needing to fetch the data required to render the page. The alterative is an old school style web server that returns a new HTML file and page reload on every navigation which is higher download and runtime cost (which is how the real HN does it!). No criticism here as the site definitely works well regardless.
- 5y ago

woah 5y ago

The author of this actually has a bunch of different HN clones with different JS tech: https://news.ycombinator.com/from?site=github.com/clintonwoo https://news.ycombinator.com/from?site=github.com/clintonwoo Might be fun to compare

clintonwoo 5y ago
Thanks for pointing that out! To add some extra info, the demo's are running on https://remix.hnclone.win https://remix.hnclone.win (this project) https://hnclone.win https://hnclone.win (nextjs/graphql project) It's not necessarily an apples to apples comparison of web servers though, since the NextJS one is also using GraphQL which adds extra response time. The remix one is also running on fly.io instead of a regular VPS in middle america just to cope with extra HN traffic.
benmccann 5y ago
Here's one built with Svelte: https://hn.svelte.dev/ https://hn.svelte.dev/ It's not exactly an apples-to-apples comparison for a number of reasons including implementation and hosting differences, but might be interesting to people anyway. The code lives here: https://github.com/sveltejs/sites/tree/master/sites/hn.svelte.dev https://github.com/sveltejs/sites/tree/master/sites/hn.svelt...
- password4321 5y ago
  I'm always interested to see which ones are running after a few months, or a year later when the time comes to pay to renew the domain. Random yearly payments to keep tiny side project vanity URLs doesn't measure high on the life partner acceptance factor scale.
password4321 5y ago
I'll put in my request for https://nestjs.com/ https://nestjs.com/, "an application architecture out of the box".

dannyphantom 5y ago

Huh, how cool. This may just be an odd coincidence but I have very photosensitive eyes so there are a few custom settings I cycle through whenever I need to reduce eye strain. Switched my settings back to mfg preset and for some reason the website is easier on my eyes than regular HN. The colors are all the same, the layout is the same, the zoom is the same - can't really figure out why but I thought that was neat.

lowboy 5y ago
On my machine the clone has more padding and line height, which makes it easier on the eyes

assemblylang 5y ago

Great implementation, looks identical to HN and is very responsive! HN is a great website for trying out web frameworks, given how simple it is in terms of features and design. I made an alternative front end for HN not too long ago that was styled like the Windows XP desktop[0], was good fun. I wonder how many HN clones and front ends have been written for HN at this point, I'm guessing at least several hundred. [0] https://hackerxp.com/ https://hackerxp.com/

TameAntelope 5y ago

Only thing I notice is that the collapse button isn't a button and is the entire [-] thing, vs. just the - or + being an actual button. Very great work! I love destroying the notion that you have to use some esoteric hyper-optimized tech to get quality performance.

k__ 5y ago
Yes, the buttons and links here are horribly tiny on mobile. I don't know the stats, but I could imagine that HN is used by quite some mobile users, so an UX update would be appreciated.

deleted 5y ago

[deleted]

austinkhale 5y ago

Really interesting. I’ve been wanting to try Remix out for a bit after heavily investing in Next. Side note: seems like there is some sort of issue when swiping back on iOS Safari. Periodically getting flashes of the incorrect content.

terrycody 5y ago

I really hope someone can made this info a wordpress theme+plugin, then add some auto deleted thread after X times, then cool!