Live data from Hacker News

Second-guessing the modern web (2020)

macwright.com

121–130 of 309 posts

Re: Second-guessing the modern web (2020)

#121
post #28

Earlier quoted context omitted.

I see a big difference between Hadoop and React though: React pushes the costs on the client. This is something that's not often mentionned, but with a traditional SPA, a good part of your code runs on the client, which is server costs you don't have to pay. I don't know if it's something that people do consciously to reduce costs and just never talk about, or if it's an unintended consequence, but it's here. If your…

I don't know if it's something that people do consciously to reduce costs and just never talk about, or if it's an unintended consequence, but it's here. It's very deliberate. It's even what is taught in colleges. I've had debates with recent graduates who believe the proper way to build anything from a web site to an app is to offload as much of it as possible on the client. If the client doesn't have the latest gea…

I'm genuinely not quite sure what you're talking about. What remotely significant costs are being transferred from the server operators to the client? An SPA without SSR still needs to server a bunch of static data to the client (the JS app bundle). It also needs to look up and return any dynamic data the client app subsequently requests. The only actual computation being moved is the generation of HTML/DOM markup from the server data, and I can't imagine that being a remotely significant amount of computation except in some pathological examples like extremely large pages or extremely intensive computations required for rendering (like, I don't know, maybe some geometry visualization tools or something?)

Re: Second-guessing the modern web (2020)

#122
post #92

Earlier quoted context omitted.

Nobody teaches that. You don't offload things to the client in order to save money. You offload things when it will improve performance. Most of the processing power and bandwidth will still be incurred by the server, just at a different time in the lifecycle of the app.

Well... improving performance because otherwise your server is being slowed down by the load from SSR? That's still saving money in disguise.

No. That's not it at all.

If your page takes 3 seconds to show anything at all, your bounce rate will be stupid high.

If your page loads nearly instantaneously with placeholders, and then the content loads in over the span of 4 seconds. Your bounce rate will be significantly better.

Even though your page loads slower, it will be perceived as faster resulting in less users navigating away before your page starts rendering.

Perceived performance is only one factor but there are many other reasons why you offload things to the client.

Re: Second-guessing the modern web (2020)

#123

I'm no fan of React, and I'm building a new back-end and front-end that is probably heretical to... well.. everything. What I have found is that if you have reactivity from your back-end, then front-end reactivity is... easy. My focus is on board games, but the idea generalized pretty well. As an example, my dumb chat room: https://github.com/mathgladiator/adama-lang/blob/master/demo... I really need to focus on this…

Hi, what type of board games are you working? I wanna create a makruk game server and don't even know where to start

A number of games, but my favorite that I have a working back-end for is Battlestar Galactica ( https://boardgamegeek.com/boardgame/37111/battlestar-galacti... ), and it is complicated.

I'm currently designing my own deck builder similar to Dominion.

My advice would be to use first make a game without the network, and just have hotseat. Once you have a hotseat game, then the question is how to pull the state out of the client and then be shared between two computers.

The complications arise during the failure modes of the network, and how transactions play between multiple play. Chess is a fairly simple game to get started with (I'm not sure how makruk compares), but modern eurogames tend have a lot of rules that can be changed by pieces or cards. These get... very complicated.

Re: Second-guessing the modern web (2020)

#124
post #61

I'm no fan of React, and I'm building a new back-end and front-end that is probably heretical to... well.. everything. What I have found is that if you have reactivity from your back-end, then front-end reactivity is... easy. My focus is on board games, but the idea generalized pretty well. As an example, my dumb chat room: https://github.com/mathgladiator/adama-lang/blob/master/demo... I really need to focus on this…

Looks like you're trying to reinvent some wheels there. No harm in doing so but just so you know, React (or my preference, a tinier version called Preact) would let you update new chat contents without blowing away all the other InnerHTML content. The way you're doing it now will result in a flicker, and mess with things like highlighted text will unhighlighted when replaced. And that's just with the basic dumping of…

Wait til I tell you about the custom UI system I'm building with canvas.

http://www.adama-lang.org/blog/ui-flow-with-adama

Re: Second-guessing the modern web (2020)

#125

Earlier quoted context omitted.

This is only sometimes true. Other times, cutting the server rendering makes things a million times easier because maybe you're not contacting your database, or you're offloading large per-user objects to the client instead of keeping them in ram for thousands of uniques per minute, or, or ... Some calculations are less heavy on the client side. It's not building the html itself once you know what you need that is he…

> because maybe you're not contacting your database Except you will anyway, to do all those API queries you need to fill the page. That involves multiple handshakes back the server, and yet more server-side resources tied up. > or you're offloading large per-user objects to the client This access happens either way, and will be discarded in short order by any cache, even using the most naive LRU policy.

A lot of assumptions you're making about a hypothetical there.

Re: Second-guessing the modern web (2020)

#126

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 t…

But again, the "normal" isn't that great: the visitor might have just so happened to click a link before using a broken form, but that's not some architectural guarantee that you'll avoid errors. It's just a happy accident that the visitor might have unknowingly triggered an entire app update before using an outdated form.

Re: Second-guessing the modern web (2020)

#127

Earlier quoted context omitted.

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…

If you click on an tag before the JavaScript has loaded and React has hydrated, the browser will do a full page load of the URL that you clicked on. Assuming that new page is also rendered on the server, it should work fine and feel just as good as if it was a traditional server-rendered HTML web site or if you had JavaScript turned off. (Of course, things that do require JavaScript for interactivity, like custom too…

Just to add to the above, this is specifically when your pages are server-side rendered. Hydration is a concept of taking a server-rendered page and making it interactive with Javascript.

You can have your NextJS/React app server-rendered, and then users visiting a page will get the page. Clicking links within the application will use Javascript routing to load the part of the application that needs to be displayed (and prevent the default navigation from clicking said links). I think in practice it's more likely for users to fall back to default navigation which then relies on full server rendering when they have Javascript disabled, than it is because they've clicked before the front-end router has started working.

Also, before this thread I didn't realize React itself could be server-rendered (I thought that was the distinguishing point of Nextjs). Is it common to use non-next React for SSR?

Re: Second-guessing the modern web (2020)

#128
post #50

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…

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…

If you're building a desktop app, just plain C# in visual studio has an extremely powerful GUI (WinForms) that is fairly easy to use. Lots of widgets abs very good charts and graphs that you can zoom-in on and annotate in a million ways. It's miles ahead of Python (saying this as a Python guy). Click Once means installs are fairly simple (assuming a Windows deployment).

Re: Second-guessing the modern web (2020)

#129

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…

Another big issue is the ability to seamless transition parts of your software between different programming models. We just don't have good solutions to this that I know of. The thing with SPAs is that you are probably worse off starting with a traditional server-rendered HTML web site and slowly introducing more and more interactivity, unless you know you won't eventually be better off with an SPA at the foundation…

The web components and the pending state protocol is one of the things I which more people would know about. Listen for change events bubbling up and push down changed values. This does not only apply to single data fields but the entire DOM tree.

Re: Second-guessing the modern web (2020)

#130
post #106

Earlier quoted context omitted.

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.j…

> 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 You're trying to use the literal meaning of "you call it" to make an argument but that argument doesn't support the position you think it does. Yes, React has `ReactDOM.render()`, but did you know Angular.js also has an entry point called `angular.bootstrap()`? Vue has `new Vue()`…

I would say the traditional distinction between a library and a framework, to the extent that the industry has any settled definition for these terms at all, is about who dictates the application architecture and the control flow.

A framework typically establishes a runtime environment and then calls into your code to respond to specific events. Common examples are GUI applications that run an event loop responding to operating system events and web servers where the entry points to your own code are handlers for different requests. In the early days, JavaScript was mostly used similarly, as the entry point to your own JS code tended to be a specific event on a specific DOM node. There might be some code to set things up when your program starts, but once you hand over control to the framework, it decides what the run and when, and your code doesn’t do anything unless the framework asks it to.

A library, in the not-a-framework sense, works the other way around. Your own code ultimately has control and you call into the library when you require specific functionality. The library doesn’t do anything until you ask it to.

So to answer your question, yes, I did know those things, but I don’t think the equivalence between those calls is necessarily appropriate in this context. It’s not just about who calls the function the first time. It’s also about what happens next — whether your own code continues to call the library in a similar way later, or whether you hand over control to a framework once and that deals with everything from then on. Calling ReactDOM.render doesn’t have to be a fire-and-forget operation; it can simply perform a single render and then return having completed its task. You might then call it many further times to rerender that part of your page in response to changes in the data it depends on.

Control will often flow back and forth between your own code and library or framework code. Sometimes this happens on a small scale, like the sorting example I mentioned where you are calling a higher order function and it takes a simple callback function as a parameter. Sometimes it happens on a much larger scale, like calling React to render a component you supply, and then React calling that component’s own render logic, which in turn calls back into React to create child components, and then React calling their own render logic, and so on.

You can certainly argue that the latter starts to resemble a framework, but if you’re only talking about rendering a component tree that is triggered by a call from your own code and returns control to your code again once the rendering has finished, the difference is merely a matter of scale. Surely everyone would agree that the sorting example is a library call, so where do you draw the line? The overall architecture of your application and its control flow is still determined by your own code.

You certainly can use React more like a framework, in the sense that you call into it once to set things up and then hand over control. You can write components that have additional responsibilities like maintaining your application state and fetching data from remote APIs, and you can use hooks (or class-based component state and lifecycle methods) so that interesting events from those other sources will automatically trigger a rerender.

My point is that you don’t necessarily have to design your application in that style just because you’re using React. If you choose not to, then React doesn’t “call you”, it doesn’t permeate your codebase in the way you described before, and it certainly doesn’t exclude the use of architectural patterns like MVC or MVVM.

Post reply on HN