Live data from Hacker News

Second-guessing the modern web (2020)

macwright.com

81–90 of 309 posts

Re: Second-guessing the modern web (2020)

#81
post #37

Earlier quoted context omitted.

Which ways are those?

- It "calls you" (i.e. you never explicitly call your React components, React does) - It permeates your codebase (e.g. migration from moment to date-fns is something you can realistically do piecemeal, React to Vue or vice versa not so much) - It enforces a specific architectural paradigm (components) to the exclusion of others (e.g. MVC, MVVM, etc) - Its direct competitors are frameworks (Angular, Vue, Backbone, Aur…

Almost everything in your first few points there depends on how you choose to use React, though, rather than being inherent in the library itself.

It "calls you" (i.e. you never explicitly call your React components, React does)

The starting point for doing anything with React is where you call it to render a certain component at a certain point in your document. There are things built on top of React, such as Next.js, that add more layers and do follow more of a framework design, but even there they are still calling React when they need to rather than the other way around.

It’s true that React provides features can automatically trigger a rerender later on. You don’t have to use any of those, though.

There are also integrations with many other libraries, such as those for managing state in one way or another, where the library can trigger rerendering of specific React components when relevant state changes. In this case, it’s the library calling React rather than React calling out.

Another alternative is the original React “philosophy”, simply rerendering the entire tree whenever you need to and letting the VDOM mechanism and perhaps a few helping hands that avoid unnecessary rerenders in your components keep this reasonably efficient. When to call into React for a rerender is entirely your own choice.

I suppose you could argue that React operates somewhat like a framework because it calls the render function for each component, but to me this is more analogous to a generic sorting algorithm that calls a comparison function I pass in when it needs to. It still doesn’t do anything until I call `sort`, and the code I write is still what decides the overall control flow for the program.

It permeates your codebase (e.g. migration from moment to date-fns is something you can realistically do piecemeal, React to Vue or vice versa not so much)

It is possible to use React only as a convenient rendering library and keep other responsibilities like state management and communications separate, just like any other software.

Some people choose not to do that and instead write React components that manage state and call remote APIs and cook you breakfast in the morning. Whether this strategy is wise is a different question.

I’m working on a new front-end using React right now, and even at an early stage when presentation code is a large part of what has been written so far, maybe 1/3 of the code even knows React exists. I’ll be surprised if that figure is even 20% by the time we launch. Even now, we could drop React tomorrow in favour of any other rendering code, and nothing would need to change in the code that handles our data model, diagram layouts, communications with our back-end APIs, etc.

It enforces a specific architectural paradigm (components) to the exclusion of others (e.g. MVC, MVVM, etc)

Components are just a way to build a rendering hierarchy: data in, DOM out. Nothing about that forces you to adopt any specific architecture in the rest of your application. Again, some people do choose to put other responsibilities within their components, even using React components to model non-presentational aspects so almost their entire front-end architecture becomes one big tree of React components, but you don’t have to do this and then deal with all the problems it potentially creates that you didn’t otherwise have.

Re: Second-guessing the modern web (2020)

#82
post #50

Earlier quoted context omitted.

Yep. We recently did an assessment of available UI libraries and pretty much concluded the best maintained libraries with a modern look and feel are all web-focused and we're likely to have to settle for building an electron app if we want to be able to take advantage of the best selection of 3rd party libraries without building as much ourselves. As much as I don't like the ecosystem or Javascript as a language, the…

was Flutter included in the comparison?

I did look at Flutter but pretty much concluded that it was still fairly immature and didn't have great 3rd party libraries available for things like graphing and data tables (sort, filter, group, etc, with all the UI work done for you). This was a year or two ago so things may have improved since, but in React-land there's plenty of very capable and well maintained options in both the commercial and open source world.

Re: Second-guessing the modern web (2020)

#83
post #40

The amazing part to me is that SPAs are so much harder to do right compared to old-school server-side rendered HTML. One could be forgiven if they think a "simple" SPA is a good starter project, but they'd be very wrong. Async programming (Javascript Promises and/or async/await) is difficult, error-prone, and should be avoided whenever possible. On top of this, understanding how data flows through these SPAs is no sm…

Perhaps you've been luckier than I have in your experience with Rails and Django codebases! I have seen a tremendous amount of "not doing it right" and "architecting things in such a way that it makes it nearly impossible to 'do it right' when adding or changing any behavior."

With any of the popular React server-side rendering frameworks, getting up and running with a basic web site with some pages and HTML content is not significantly harder (and in fact not that different at all) than doing the same in Django or Rails.

Re: Second-guessing the modern web (2020)

#84

Earlier quoted context omitted.

> The problem with SSR, as I understand it according to this article, is that it still removed native link handling from clicks This is not true. SSR React still returns HTML. You can set hrefs on a tags. They all work fine.

Aha, thanks. So when the author writes: > So, Server-Side Rendering runs your JavaScript frontend code on the backend, creating a filled-out HTML page. The user loads the page, which now has pre-rendered content, and then the JavaScript loads and makes the page interactive. Does this mean that one could make the page interactive with server side rendering, but it's not normally done? Or did I completely misunderstand…

> Does this mean that one could make the page interactive with server side rendering, but it's not normally done?

It can be done, it is actually, how things were done a quarter of a century ago: server-side rendered content with tiny triggers for interactivity directly embedded in the code. In the next step, as complexity grew and as an attempt at separating concerns, you would send the content and along with it a bundle of code for interactivity (which may have been sent in the same request or as a separate resource). Then, we got frameworks. Technically, these could do this as well, but it doesn't match their basic pattern.

Re: Second-guessing the modern web (2020)

#85
post #49

One thing I've seen happen again and again in a lot of technologies is a "framework gravity". A lot of people see this as engineers just wanting to work on "hype" technology but I think what is actually happening is a reflection of global engineering time. React is great for SPAs. Most large companies are working on honest-to-god SPAs. By extension most engineers are working on SPAs. So most tooling is created for SP…

Sorry, what's a "SPA" - can't seem to find it by Googling.

   firefox "https://en.wikipedia.org/w/index.php?limit=500&profile=all&search=spa"
At the top is the link to the Disambiguation.

https://en.wikipedia.org/wiki/Spa_(disambiguation)

A more specific search, e.g., "single page", will not redirect.

In some ways, for discovery, Wikipedia's search engine is better than Google's. For one, it is non-commercial and does serve ads based on past surveillance of the user's activity. Second, the user can retrieve larger numbers of results and page through them quickly without triggering a (false positive?) defensive measure than temporarily blocks her IP address from retrieving results for a defined period. Third, it is curated to remove commercial content rather than curated to further a business purpose in online advertising.

No wonder Google steals Wikipedia content for "instant answers" or whatever they call it. Wikipedia search works quite well.

Re: Second-guessing the modern web (2020)

#86
post #35

As mostly a user that doesn't develop web apps anymore, all this feels very true to me. I'm soooooo sick of interfaces that load an empty useless shell of UX chrome and then slowly trickle in content at some later time, and leave spinners, or even worse, gray boxes simulating text. Send the text content in the initial reply, please! It's bad enough having to wait for webfonts, but when you wait to start doing the slo…

> gray boxes simulating text This is one of the worst UI trends in the last decade. Mock content gives devs permission to ship slow APIs, and they can even look janky when your API is too fast. It feels like watching a half hour of trailers before the movie starts.

And I can't even count the number of web sites (from companies with plenty of engineering budget!) that render the gray placeholder UI, but when the real data comes in, it doesn't even remotely line up with the placeholder UI (which is the whole point). I totally get how it happens: the placeholder UI and real data UI isn't sharing code, and just relies on dumb luck that the next person who changes the real data UI also changes the placeholder UI to match it.

Re: Second-guessing the modern web (2020)

#87

There’s a really great fix for this, which is to design JS frameworks to not take over the entire application. I have been waiting for a long time for the framework that will let me write a web component, and then include that web component in a regular HTML page, in a way that’s supported by the idioms and best practices of that framework. It’s also worth pointing out that all of these drawbacks to rendering web pag…

> design JS frameworks to not take over the entire application.

Facebook did just that with React. React doesn't have to be used only as a single page app. Use it for just a single component on a page if you want.

Re: Second-guessing the modern web (2020)

#88

The part about API changes being incompatible with old versions of the frontend (that are still loaded in someone's tab somewhere) is a valid problem, but honestly isn't significantly worse for SPAs than for traditional server-rendered HTML websites. Your basic HTML web form will break too, if your API has changed in an incompatible way! It's true that traditional websites would coincidentally get a new version if th…

> That said, one "trick" is to have your SPA silently listen to your server for app version updates, and when there's a new version, just make your client-side Link component do a full page load (instead of a client-side route transition). Then at least you'll have the same behavior as traditional HTML websites.

I think the author’s point is that it’s sort of a bummer that we have to deal with this just to get back to “normal”. I agree that it seems under-discussed, too.

Re: Second-guessing the modern web (2020)

#89
post #75
post #50

Earlier quoted context omitted.

Yep. We recently did an assessment of available UI libraries and pretty much concluded the best maintained libraries with a modern look and feel are all web-focused and we're likely to have to settle for building an electron app if we want to be able to take advantage of the best selection of 3rd party libraries without building as much ourselves. As much as I don't like the ecosystem or Javascript as a language, the…

Tbh if you're living in React-land and understand Redux, useReducer with useContext has subsumed the need for it in nearly all cases for myself and my team. For the parts it doesn't match, truly global stuff or tonnes of mutation, MobX is nicer out of the box than Redux. Redux can be just as nice and in some ways more powerful, but thats only after installing and configuring X amount of middlewares, with all the type…

Interesting, I did look at MobX briefly but pretty quickly concluded it seemed like overkill for our use case where Redux, Redux Toolkit and Thunk would pretty much solve everything we needed and seemed comparatively simple to follow, I'll definitely take a look into useReducer and useContext though, that looks like a potentially viable option for the majority of cases.

Re: Second-guessing the modern web (2020)

#90

I choose React for personal projects because it's easy. I'm not too concerned with performance. This article doesnt spend much time on developer experience.

Well there's also what might be called the "eschatological perspective on technology": time in development is spent only once, but user life time and technical resources are spent million times (at least, if it's a significant project). In this context, we may also speak of the "eschatological debt" of a project.
Post reply on HN