Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: Open – Free React landing page template

github.com

Post reply on HN
Print view View original

31–40 of 79 posts

Re: Show HN: Open – Free React landing page template

#31

Post by oefrha »

a_wild_dandan wrote: post #20
arnaudsm wrote: post #9

What's the advantage of using React for a landing page that could be a 10KB static HTML file ? (non-sarcastic question)

Extensibility. We may begin with simple hero image/call-to-action, but we might wind up with a sign up form with validation, a interactive map of office locations, maybe even fancy particles (who doesn't love particles!?[1]), etc. The page load will be fast enough to dissuade no users, I can add server-side rendering & free code-splitting (e.g. Next.Js), etc. Seems like a good deal. [1] https://vincentgarreau.com/par…

> who doesn't love particles!?

I don’t. Please don’t waste my cycles and battery on pointless visual effects (unless you’re a vfx company).

Re: Show HN: Open – Free React landing page template

#32

Post by BiteCode_dev »

protonimitate wrote: post #17
arnaudsm wrote: post #9

What's the advantage of using React for a landing page that could be a 10KB static HTML file ? (non-sarcastic question)

I'm seeing 714kb of data loaded over 924ms. Not as small as possible, but I don't think this really qualifies as bloat. Imo the benefits of using React boilerplate for a landing page would be: - Quick to set up / customize (faster than starting from scratch in vanilla js, anyway) - Flexible. Allows devs to quickly pivot the landing page into a "landing page + [whatever]" if needed If pure speed to load is your endgoa…

> I guess to flip the question, what's the benefit of using a static HTML file over React, other than a 10kb footprint?

KISS

Re: Show HN: Open – Free React landing page template

#33

Post by duxup »

arnaudsm wrote: post #9

What's the advantage of using React for a landing page that could be a 10KB static HTML file ? (non-sarcastic question)

I suppose someone would eventually choose to do more with the site and wants to use React at that point, that might make it a better fit.

Otherwise, I also don't think it is quite the end times that they used react at all anyway.

I enjoy the discussion but every page that gets posted on HN gets this sort of armchair systems architect discussion that seems to be a bit over the top IMO.

Re: Show HN: Open – Free React landing page template

#34

Post by onion2k »

protonimitate wrote: post #17
arnaudsm wrote: post #9

What's the advantage of using React for a landing page that could be a 10KB static HTML file ? (non-sarcastic question)

I'm seeing 714kb of data loaded over 924ms. Not as small as possible, but I don't think this really qualifies as bloat. Imo the benefits of using React boilerplate for a landing page would be: - Quick to set up / customize (faster than starting from scratch in vanilla js, anyway) - Flexible. Allows devs to quickly pivot the landing page into a "landing page + [whatever]" if needed If pure speed to load is your endgoa…

I'm seeing 714kb of data loaded over 924ms.

That's not the React stuff though. There's 82KB of JS from the React bundle (main.08bdff3a.chunk.js and 2.8a9031d8.chunk.js) on the demo site (plus 18kb that's loaded asynchronously for Google's analytics script). Everything else would be necessary even if it was static HTML and vanilla JS. Heck, the video-placeholder.jpg image is bigger than all the JS combined.

And it's not really been optimized at all. A whole stack of the React components could be lazy-loaded with Suspense to get the initial page weight down a bit more. If you didn't want to do that you could probably swap React for Preact and knock another 20KB off the JS bundle size.

Re: Show HN: Open – Free React landing page template

#35

Post by mdellabitta »

jakearmitage wrote: post #22
a_wild_dandan wrote: post #20

Earlier quoted context omitted.

Extensibility. We may begin with simple hero image/call-to-action, but we might wind up with a sign up form with validation, a interactive map of office locations, maybe even fancy particles (who doesn't love particles!?[1]), etc. The page load will be fast enough to dissuade no users, I can add server-side rendering & free code-splitting (e.g. Next.Js), etc. Seems like a good deal. [1] https://vincentgarreau.com/par…

So... premature optimization?

Premature optimization would be doing things in static HTML even though the rest of your code is in React because static HTML is "lighter" or "faster."

Also, Next.js does static HTML export out of the box if that's your preferred end target.

Re: Show HN: Open – Free React landing page template

#37

Post by pacomerh »

frankzander wrote: post #7
mosselman wrote: post #2

Why react?

Because a startup without a react landingpage isn't really a startup and not as hipster as the other new companies in town ;)

eh, not necessarily, you could claim using a popular framework has it's benefits. It's easier to transition it to a full app whenever the time comes. The author could've chosen something less hip?, sure, but again React is widely used and it has proven to be useful in many app scenarios.

Re: Show HN: Open – Free React landing page template

#39

Post by a_wild_dandan »

jakearmitage wrote: post #22
a_wild_dandan wrote: post #20

Earlier quoted context omitted.

Extensibility. We may begin with simple hero image/call-to-action, but we might wind up with a sign up form with validation, a interactive map of office locations, maybe even fancy particles (who doesn't love particles!?[1]), etc. The page load will be fast enough to dissuade no users, I can add server-side rendering & free code-splitting (e.g. Next.Js), etc. Seems like a good deal. [1] https://vincentgarreau.com/par…

So... premature optimization?

Over-engineering perhaps, but not premature optimization. You don't have to reach for that stuff until you need it.

As a side note, I do often advocate for somewhat over-engineering projects by starting with familiar frameworks. They strongly constrain the solution space yet give power to quickly meet inevitable feature creep. Strong KISS/YAGNI proponents might balk at that endorsement, but I've had far more trouble handling growing pains from adapting codebases that don't use frameworks than I have working in such over-engineered framework-based projects.

Re: Show HN: Open – Free React landing page template

#40

Post by protonimitate »

icholy wrote: post #28
protonimitate wrote: post #17

Earlier quoted context omitted.

I'm seeing 714kb of data loaded over 924ms. Not as small as possible, but I don't think this really qualifies as bloat. Imo the benefits of using React boilerplate for a landing page would be: - Quick to set up / customize (faster than starting from scratch in vanilla js, anyway) - Flexible. Allows devs to quickly pivot the landing page into a "landing page + [whatever]" if needed If pure speed to load is your endgoa…

> I'm seeing 714kb of data loaded over 924ms. That's really bad!

How so? Anything The only way you could possibly quantify this is by collecting data on # of conversions between the "optimized static site" and this react boiler plate.

Spoiler: the time you waste collecting this data could be spent working on an MVP that this landing page is supporting ;)

Post reply on HN