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

61–70 of 79 posts

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

#61

Post by mead5432 »

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…

Every line of code represents an opportunity for a defect. In the case of a landing page, that could crater your conversion rate.

You reduce that risk by using more static HTML.

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

#62

Post by mtm7 »

a_wild_dandan wrote: post #39
jakearmitage wrote: post #22

Earlier quoted context omitted.

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…

This is fascinating. If you ever feel like writing about your experiences adapting codebases, I'd read it in a heartbeat! :)

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

#63

Post by peterangular »

deftturtle wrote: post #45

As others have pointed out, you could use a static html page, vanilla js, etc, but ignoring this, I see value for future learning. Sure, there are alternatives, but it looks like the industry wants React skills. I've never used React, and I'm pretty new to web design, so this makes me interested in learning. It's a small project, one which I could modify and study. This is how I got into making my own website. I came…

I mean this 100% in good faith:

You couldn't pay me enough money to post a "Controversial Opinions" section to a site that also links to my current resume on the same page.

It's best to keep this stuff separate from your professional life.

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

#64

Post by tomgp »

protonimitate wrote: post #40
icholy wrote: post #28

Earlier quoted context omitted.

> 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 ;)

The question is; sub 1sec for who? A lot of people aren’t going to be loading that page over the same quality of network connection as your average hacker news reader. Many’s the time I’ve cursed web developers when I’ve been on a train trying to book a restaurant or some other simple task that doesn’t need animation or images or video.

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

#65

Post by ivanhoe »

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!

According to DevTools it has around 80KB of JS and the rest is the design, mostly pngs of screenshots or whatever those graph looking things are. If you plan on using it for your own app, you'd probably set those to your own promo images, so it's really not such a big deal.

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

#66

Post by ivanhoe »

protonimitate wrote: post #40
icholy wrote: post #28

Earlier quoted context omitted.

> 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 ;)

Problem with that approach is that 1 second on his connection is not necessarily equal to 1s on mine or your connection. So we'd need to see the expected traffic and then discuss "the average time" that makes sense, the speed for the target group.

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

#67

Post by moneywoes »

jwdunne wrote: post #14

This is not a good use case for react. At all. A landing page should do one thing and one thing well: drive an action. The less distracting interactivity the better. The only thing you want interactive are your CTAs. The overhead of using React, even if using a static site generator, isn’t worth it. Not when you can whip up a simple HTML/CSS page in less time that’s far far easier to build and deploy. Because the fas…

Thoughts on Gatsby or Next.js for React landing pages?

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

#68

Post by bobthepanda »

roelvanhintum wrote: post #54
bobthepanda wrote: post #48

Earlier quoted context omitted.

Templating isn't a React-only feature, there are other frameworks that give you that. Using React for a static landing page is like using a flamethrower to light a birthday candle.

True, but you know for sure that candle is lit. ;) On the React topic: jsx within classes does make it nice to build components, but again you’re right that others provide the same experience.

I would say that if all you're serving is a landing page, with the appropriate namespacing all you really need is SASS or even css. How many things could you possibly be sticking on a landing page that is supposed to be short and to the point?

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

#69

Post by emagdnim2100 »

jwdunne wrote: post #14

This is not a good use case for react. At all. A landing page should do one thing and one thing well: drive an action. The less distracting interactivity the better. The only thing you want interactive are your CTAs. The overhead of using React, even if using a static site generator, isn’t worth it. Not when you can whip up a simple HTML/CSS page in less time that’s far far easier to build and deploy. Because the fas…

For what it’s worth - there’s definitely no speed up, for me at least, to ship a pure handwritten HTML + CSS page vs the same page using create-next-app. The latter makes it trivially easy to add new functionality, etc; the former guarantees I have to start over. I also get a bunch of stuff - TypeScript, code splitting, minification, etc - for free, literally no work. It’s nice.

Using Next with Preact instead of React makes the total gzipped JS bundle around 20kb. Takes no time to set up.

If you’ll only ever build one website, sure, use basic tools. If you can amortize the cost of learning the toolchain across many projects, use better tools! (I’m not saying that’s only React by any means.)

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

#70

Post by jwdunne »

emagdnim2100 wrote: post #69
jwdunne wrote: post #14

This is not a good use case for react. At all. A landing page should do one thing and one thing well: drive an action. The less distracting interactivity the better. The only thing you want interactive are your CTAs. The overhead of using React, even if using a static site generator, isn’t worth it. Not when you can whip up a simple HTML/CSS page in less time that’s far far easier to build and deploy. Because the fas…

For what it’s worth - there’s definitely no speed up, for me at least, to ship a pure handwritten HTML + CSS page vs the same page using create-next-app. The latter makes it trivially easy to add new functionality, etc; the former guarantees I have to start over. I also get a bunch of stuff - TypeScript, code splitting, minification, etc - for free, literally no work. It’s nice. Using Next with Preact instead of Reac…

Why would I need TypeScript, code splitting and new functionality on a single page with one purpose: to sell?

I’m all for extensible solutions when required but React does not buy me much for the overhead on a landing page that I drive paid traffic too.

Now if a client had marketing team that needed to spin out a new landing page along with an ad on demand without code, I’d use React to build a landing page builder. The server would generate a static page and I’d have something cache that (and purged on modification of that page or a release). That’s perfect use case for React.

But a single page that I’m driving paid traffic to for a new business? Not in react. If I needed two, I have no shame, I’d copy and paste. Then at 3 I’d consider static site generation - on the basis that the build produces static assets only. Perhaps if the campaigns do their job, I can invest in tools that empower my marketing guys to build landing pages for their campaigns.

The fact is I don’t need the interactivity of React on a landing page. I don’t need more functionality on a landing page than CTAs, sales copy and social proof. If I’m putting anything more than that on a landing page, I’m failing. If the landing page is not 100% focused on what I want, which is usually sales or the entry to a funnel, it’s failing.

Now if the product you’re selling, as I said below, IS highly interactive and user friendliness is a selling point, I can see React being of use for live on-page demos of features. Because that’s what you’re selling!

Post reply on HN