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

51–60 of 79 posts

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

#51

Post by john61 »

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? "

I can view it on my 11 years old N900 which is still my smartphone in daily use.

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

#52

Post by shriek »

oscarteg wrote: post #5

Using React is really bad for your SEO. If you want to use React, use something like Nextjs or Gatsby to compile it into a static HTML website.

Almost like people have forgotten that this exists[1] in React. Also, your logic is true to any SPA, not just React.

And Google has started to index SPAs[2] as well even though it's not instant like others have mentioned.

[1] https://reactjs.org/docs/react-dom-server.html#rendertostati...

[2] https://youtu.be/PFwUbgvpdaQ?t=836

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

#53

Post by drusepth »

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

Please don't take this as argument, but do you have any studies/sources that support anything Maybe I'm naive, 90% seems like an extremely high estimation to me.

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

#54

Post by roelvanhintum »

bobthepanda wrote: post #48
ttty wrote: post #43

Earlier quoted context omitted.

I can learn react and I can apply everywhere. Reuse my react components with styles. No global css class flying around. After a few pages static html becomes a pain to maintain. Plus I don't like static html. If I setup webpack (you want different files, proper es6, imports...) You can easily add react. No need to shift your thinking between static html and react. Much easier to have 100 websites just with react. Can…

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.

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

#55

Post by peterangular »

BiteCode_dev wrote: post #32
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 guess to flip the question, what's the benefit of using a static HTML file over React, other than a 10kb footprint? KISS

100% agree - bringing in a framework for a landing page is insane to me in regards to pushing dependencies where they don't belong.

In this conversation I have yet to see one solid argument for inclusion of React on a landing page outside of "it can help the developers pivot to landing page + something else". Sure I can sorta see this, but if you're an engineer who decides on major dependency inclusions based on what may happen you're over-engineering (ESPECIALLY in regards to a landing page).

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

#56

Post by peterangular »

drusepth wrote: post #53
protonimitate wrote: post #40

Earlier quoted context omitted.

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

Please don't take this as argument, but do you have any studies/sources that support anything Maybe I'm naive, 90% seems like an extremely high estimation to me.

It's an over-generalization and I'll throw my own anecdata in here from ecommerce: I've seen MAJOR improvements with conversions when I can get something from a 1s load-time down to Specifically, it's an interface-to-interface thing as much as a first load experience... if a customer can browse my stores with near-instant loading of product pages (or maybe even pre-loaded) they are more likely to look at more products. If they're more likely to look at more products, they're more likely to buy, etc etc. Sure 750ms doesn't SEEM like much, but what about someone who's shopping for a formal dress? They may be looking at 20+ unique SKUs within a shopping experience so take 20 * 750ms and there ya go.

We don't control things like network conditions, etc. and even in 2020 we must be respectful to the end client in regards to transmitted data to run an experience.

I know I didn't link to any studies here so it's all moot, but I'm just sharing my in-industry experience with optimization to illustrate that lots of people don't settle for "90% of the time <1s is good enough".

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

#57

Post by protonimitate »

drusepth wrote: post #53
protonimitate wrote: post #40

Earlier quoted context omitted.

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

Please don't take this as argument, but do you have any studies/sources that support anything Maybe I'm naive, 90% seems like an extremely high estimation to me.

I probably should have just said "a majority", but Google has a good resource on page load studies[1].

"DoubleClick by Google found 53% of mobile site visits were abandoned if a page took longer than 3 seconds to load."

Maybe my logic is wrong, but considering 3 seconds is the "tipping point" for more abandonments than not, anything under 1 second is "good enough" imo.

Again, I don't have data for this, but I would suspect that the difference between 100ms and 900ms won't impact business metrics in any meaningful way. Or at least enough to warrant the "react is overkill" argument.

Is react more than necessary? sure. Does it matter? I don't believe so. Whatever gets your landing page/product in front of people faster (from a development and time to ship POV, not just page loading) is what matters.

The bigger point is that particularly on HN, a lot of comments love to point out how "react is overkill", but it's mostly just a knee-jerk reaction. It seems that lately anytime anything to do with React is posted here, it's immediately met with "why react?" comments. In some cases they're warranted, but for the most part its just boring conversation that cares more about being pedantic than helping out. Particularly for this example, this is just one option that someone might want to utilize. It should be up to the user to weigh the pros and cons of picking this template. I don't see why the entire conversation should be dominated by "static sites are better" rhetoric.

[1] https://developers.google.com/web/fundamentals/performance/w...

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

#58

Post by peterangular »

oefrha wrote: post #31
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…

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

Right - I get pretty angry when I watch activity on my CPU cores spike with opening a "pretty" website. If my CPU fan is revving because you're doing silly particle effects (usually sans WebGL) I'm not happy with your solution.

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

#59

Post by peterangular »

jwdunne wrote: post #49
ttty wrote: post #44

Earlier quoted context omitted.

I can develop faster in react than static html... Once you need a/b testing you're screwed with the static HTML. You got to start adding more logic in your spaghetti Js and then you can't even reuse html. Boom, looks like a mess now

There are a number of assumptions here: 1. I’m using that much JS 2. Said JS is spaghetti 3. My split testing tool needs integrating with my ‘spaghetti JS’ 4. I’m creating enough landing pages the overhead of duplicate HTML/CSS is high In reality, if I’m starting out quick: 1. I’ll use little JS because it isn’t necessary 2. The JS I do write isn’t large enough to become spaghetti 3. I’ll duplicate it twice and rethi…

> The most problematic assumption you’ve made is that if it’s not React, it’s spaghetti.

This is the biggest problem I keep seeing in the conversation... Tons of people assuming that vanilla JS has to be crap code. In reality, I've worked on MANY well-documented codebases with large JS cores that are custom. Yes some are gross, but some are very simple and easy-to-follow even when I'm 100% unfamiliar with the codebase.

Honestly I get it - having an opinionated framework is awesome when you're working in large teams of varying skill... but if this is aimed at "startups" like it touts I have zero tolerance for increased complexity because "ECMA without React is 'spaghetti'" or "this will handle the feature creep better" - both are a faulty basis for inclusion of a major/opinionated dependency.

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

#60

Post by gbourne1 »

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)

First off, thank you for building and sharing with the community. I have built a few landing pages with React and always end up regretting because you always need a React developer to maintain. I think best to build the landing pages (about, homepage, faq, etc) in something a non tech person can use like Wordpress or at least Hugo (markdown). You don’t need to bring in a React developer when you want to add a new marketing section to the homepage.
Post reply on HN