Hacker News Reader

Comment by jasonkester | Hacker News Reader

the DOM was often used to store state.

Every once in a while I'm reminded that I'm mostly disconnected from the way "most" people build things. Thanks for this insight. It finally explains why I hear people talking down about "jQuery developers", if that was something that people actually did.

But wow. I've been building javascript-heavy web stuff since the mid 90's and it had never occurred to me to do that. You have your object model, and each thing had a reference back to its DOM node and some methods to update itself if necessary. All jQuery did was make it less typing to initially grab the DOM node (or create it), and give you some shorthand for setting classes on them.

It also explains why people liked React, which has always seemed completely overcomplicated to me, but which probably simplified things a lot if you didn't ever have a proper place to keep your data model.

I can't imagine I was the only one who had things figured out back then, though. The idea you're talking about sounds pretty terrible.

View on HN

Bare in mind that most people using jQuery weren't writing JavaScript applications. They were writing backend-driven applications with jQuery enhancements, so there was no real concept of frontend 'state' that was separate to the DOM itself. If your frontend code needed to work with 'state' like form values or element attributes you had to read them, and because there could be multiple separate bits of code working with the same form or element you had to write values back to the DOM so the next bit of code had the correct 'state'.

The thing that changed to make frontend development improve dramatically was hash based routing with ajax, and later the introduction of the history API. That caused frontend development to have a need to retain state between 'pages', so then was a need to find a better way to store it than using DOM attributes.

> he thing that changed to make frontend development improve dramatically was hash based routing with ajax...

I think that what's changed is simply that people realized that it's way less messy to use the backend only as a data source (with ajax calls), and leave everything else to the frontend. The cognitive overhead of having the server producing html with some implicit state, then updating that state interactively, and then losing everything again by posting the whole page to the server, was simply unbearable.

When I started building web applications in 2004 I had some experience in writing desktop apps: I simply created a js library to create and destroy UI elements, and wrote "desktop" apps running in the browser.

While I agree in theory, in practice I find that the frontend still has all sorts of warts that don't quite make it a great solution (yet).

I mean, it's better than having to maintain both server- and client-side logic and state (and having to sync all that), and definitely better than the days where we also had to manage DOM diffing manually.

But I still get headaches from the NPM/node ecosystem, the build steps, having to decide whether logic goes on the client, server, or both, and to some extent javascript itself. And you can never fully let go of the server-side of things.

I'm very intrigued by the alternative idea of moving (almost) everything to the backend, and maintaining the dynamic bits by sending all events to the server and sending back diffs based on that which update the page. Phoenix'/Elixir's LiveView made some great progress in this area, and from what I hear other ecosystems are experimenting with the same thing.

It's not a panacea: if you need offline functionality you're gonna have to deal with js and everything that comes with it. But in many projects that's not a deal-breaker, and in practice the approach actually leads to smaller payloads sent between client and server, and significantly simpler codebases.

Keeping the view state in the server is what Java Server Faces did and trust me you don't want to repeat that same mistake.

Here's an interesting response from Elixir's creator (and contributor to LiveView) specifically about JSF:

https://elixirforum.com/t/phoenix-liveview-is-now-live/20889...

I don't know JSF so I can't really argue this point, but I'd really love to hear what you think about the argument Jose put forward and where you might disagree!

I kept a real nasty implementation of this alive for the last two years while building a REST api and React frontend to replace it.

I learned a good lesson, though: no logic in template files! Ever!

I've recentlt started working on a project where they store data / state in the ids of dom objects. Sometimes even something like dash separated strings that need to then be parsed.

I come from having done pretty much no Web development and this seems like a hateful way to do development.

It is, and basically the selling point of modern front end practices like APIs, state managed only in JS, SPAs, etc. Maybe this tech is overused in some cases, but it's vastly better than the "JavaScript Sauce" type development you describe.

I get what you're saying, but anecodtally I can say I've never worked on a codebase like that. The pattern I came across most frequently would use JS values to store state, scoped as tightly to the relevant event handler as possible, e.g.

    $(function(){
      var myState = 123;
      var myElem  = $('<span>' + myState + '</span>');
      $('#myParent').append(
        myElem,
        $('<button text="Increment" />').click(function(){
          myState = myState + 1;
          myElem.text(myState + '');
        }));
    });

Interaction with the DOM was treated as I/O, akin to file or stdio access: for reading, get it into a sensible internal variable as soon as possible; for writing, dump it out as the final step. Using the DOM to hold state seems, to me, akin to holding state in an external file (reading and writing as needed), rather than a variable.

My god, it finally all makes sense!

And this is why I've been developing all my modern web applications as essentially an S3 bucket of flat HTML with vanilla javascript and jquery sprinkled in sitting behind cloudfront, connected to a fast API built of cloud functions / lambdas written in crystal/rust/etc. I use a custom routing system (I have S3 set up to respond with a 200 at the index in the event of a 404, so I have unlimited control over pathing from within my js logic) and I never let node touch anything at all. And I'm super happy about it. Never has it been easier to get things done. I don't have to fight with any system because there is no system to get in my way.

This gives me:

1. 2-4 second deploys

2. full control over assets pipeline (I call html-minifier, etc., manually in my build script)

3. literally serverless -- S3 or lambda would have to go down for there to be an issue (ignoring db)

4. caching at the edge for everything because of cloudfront

5. zero headaches because I don't have to do battle with node or react or anyone's stupid packages

6. (surprisingly) compatibility with googlebot! It turns out that the googlebot will index js-created content if it is immediate (loaded from a js file that is generated by a lambda and included in the document head tag as an external script, for example)

7. full control over routing, so I don't have to follow some opinionated system's rules and can actually implement the requirements the project manager asks me to implement without making technical excuses.

This does not give me:

1. A magical database that has perfect automatic horizontal scaling. Right now there is no magic bullet for that yet. Some come close but eschew the transactional part of ACID, making themselves basically useless for many applications.

And the parent post exactly matches my usage of jQuery :D

Pricing aside (as it's almost unreasonably expansive if your app requires frequent db writes), firestore is indeed "A magical database that has perfect automatic horizontal scaling". But as you have your happy setup on aws it probably makes little sense to switch.

Yeah there are a few in that category also Google Cloud Spanner and the stuff by CitusData. All of them work, but are prohibitively expensive to get started. I've harangued them a number of times about how people aren't going to want to use something they can't scale up from $1/month to $10000/month without migrating any data (that's the whole point of an auto-scaling horizontal service imo), but so far no changes from them. Like why would you design potentially infinite auto-scaling, and then lock it up behind a $90/month minimum fee. They could have been making money all along on those $20/month or $40/month or $5/monthers, who vastly outnumber those who _need_ autoscaling, but what the peace of mind that auto-scaling provides.

> All of them work, but are prohibitively expensive to get started

Firestore has a free tier: https://firebase.google.com/docs/firestore/quotas#free-quota

Hmm I wonder if spanner has more minimum hardware costs or something. Like if they have to provision you at least one standalone atomic clock to get started.

But like that's sort of my point. They could have data default to going into a tiny VPS slice that would be free-tier territory, and then automatically move it to whatever infrastructure spanner requires when the time comes. That could all be seamless. Why keep the seams in?

$90/month is really not that much, it's like an m5.large on AWS which is pretty much the minimum for a medium/high traffic website. Well, I guess the scene might have changed since they introduced t2 unlimited, but that would only take it down to $40/month. Support costs are still there for a $5/month user.

> But as you have your happy setup on aws it probably makes little sense to switch.

TBH I lean more towards google cloud services in general, so as long as they had very good ping times between each other, I'd consider it.

DynamoDB now has ACID transactions across tables.

https://aws.amazon.com/blogs/aws/new-amazon-dynamodb-transac...

> perfect automatic horizontal scaling

Nothing is perfect, but aws aurora serverless auto scales compute and storage for MySQL https://aws.amazon.com/rds/aurora/serverless/

Last time I checked it has a large entry level cost. When will they learn.

Isn't there downtime involved in Aurora's auto scaling?

Does that than really fit the "auto" bit of the term?

About your cloud functions / lambdas: do they return HTML content or "pure" data (as JSON for example)?

If your cloud functions return "pure" data, then the client-side JS is doing the rendering: do you manually create the DOM nodes or do you use some templating engine?

If you’ve ever written a video game, I think it’s quite obvious as well. Video games have a main loop, take input, compute the next state, and then merely render the state to the screen. There is no point in manipulating the "UI". The data flow is very clear.

Of course, your game can run entirely "in memory" without a render function, which is basically what the game server does.

So I guess, many people have figured it out but didn’t transfer the knowledge from one area to the other.

Thanks for the insight, because I also always wondered what’s considered so new about React, although I have to admit that I still wrote my fair share of jQuery Spaghetti code.

> Video games have a main loop, take input, compute the next state, and then merely render the state to the screen. There is no point in manipulating the "UI". The data flow is very clear.

I always thought this is basically the MVC pattern. And it's obviously the only sane way to do things.

Edit: I don't mind the donwvotes, but am I wrong? The MVC pattern simply seems to mandate, at its core, the separation between the model, its graphical representation, and the input from the user. Input -> model -> view. So a game loop where the user input is gathered, the model is updated by calculating the next state, and the view is displayed seems to me an instance of MVC.

Actually that's one way to do things, the two ways being retained mode and immediate mode.

And each has their own use cases and challenges.

Traditionally, however, most well known GUIs (most of the apps people use on the desktop) were done with retained mode libraries (GTK, Qt, Cocoa, and so on).

>So a game loop where the user input is gathered, the model is updated by calculating the next state, and the view is displayed seems to me an instance of MVC.

There's nothing preventing the view being a retained mode UI widget tree -- which is how MVC was commonly implemented iirc.

Though your opinion is mostly right, I think people are downvoting for the sentence "obviously the only same way to do things"

Didn't down vote, but the original mvc was a bit subtler than that - originally dubbed user-model-view-controller - the idea was that the user has a mental model of the domain, and the computer has a concrete data model - and the user can act on a view via controllers to translate changes in their mental model to the underlying data model.

(one example of this, while not very graphical, might be a withdrawal from a bank account;the program stores a transaction - the user sees a "Change" in amount available in the account - in the user's mind there's 300 dollars in the account before withdrawing 100 dollars, and 200 after - but this view is a (beneficial lie - the "account" is merely a sum of transactions).

In short mvc wasn't really about a tight mapping between widgets and internal state of the data model - but about translating between the users idea of the domain model and the implementation.

But certainly implementing mvc in a object/message oriented language like smalltalk leads to data flow of input event > controller translation > model update > view update.

More at:

http://heim.ifi.uio.no/~trygver/themes/mvc/mvc-index.html

I recommend reading the paper, it's short and an easy read.

Before anybody runs away and thinks there's a fundamental insight here, I have to say that all that's really changing is who owns the retained model: application or UI library.

I mean retained by contrast with immediate, as in the early DirectX jargon.

By retained model, I mean the source of truth as to the current state of the UI. Games normally use an immediate mode API, but they still render the UI from a model; it's just that they own the model, whereas with UI toolkits, you generally manipulate a model the UI toolkit maintains and the UI toolkit renders from that model.

Retained mode UIs are much easier to start with. You can get something that looks good up and running very quickly, because you don't need to think through the best representation for your UI - skilled designers and engineers have already done the work, and developed composition and drawing routines so that it all hangs together.

The trouble starts in more sophisticated applications, where the internal model has grown more complex, and UI code is increasingly an exercise in duplicating changes from one model to the other, via reactive techniques like data binding, or more imperatively from events. Having components denormalize state is a recipe for desynchronization bugs.

The problem doesn't totally go away if you move wholesale to immediate mode where the app owns the model, though. There are UI concerns that don't really belong in most application models; things like focus, selection, non-local UI idioms like radio buttons, caret position in text, etc. Doing these things right involves a lot of subtle design. Most app developers are better off handing these concerns to experts who focus on them.

How are these other state concerns you mention (e.g., focus) handles in immediate mode GUIs? Do the components retain those states or do you keep a separate model for those states that needs to interact with the application model? If so, how is that interaction wired up?

S/handles/handled

You can edit your posts after you have posted them

The edit window had already expired.

I would argue that the state of the global model includes some information about the state of a widget (e.g. selected="true") and some state is unique to the widget itself (hover).

The trick here is how do you reconcile those two states when both have a copy of the data. For instance, the <input type="text" /> holds its own state and you hold the value in the global state. When a user types a character into the input, the input hold a copy of the letter in its "value", and the state is updated with the same value, which then triggers the input to compare its state with that of the global state for equality before attempting to render the value in the global state. Tricky stuff.

If I understand correctly, the distinction between immediate mode GUI and retained is that in the former, there aren’t stateful widgets so there is no copy to reconcile.

That's correct. State is handled by the user, which is great for some things(dynamic quantities of elements - no caching layers, just feed it a for loop) and awful for others(maintaining pre-committed state for e.g. a configuration panel with checkboxes, text fields, etc.)

Ultimately the ground truth in both instances is that you have potentially many data models that the UI has to aggregate, and the source model, layout, display properties and hitboxes of elements are usually but not totally related and can change due to many kinds of events. Any formal structure you might come up with is bound to run into exceptions. As a result I tend to have this policy:

* I don't trust the framework

* But I leverage the framework to produce early results, and both immediate and retained modes offer ways of doing that

* I expect long-term maintenance to involve a customized framework design regardless

To me the core problem wasn't with the data model, it's just that a declarative approach to binding events and reactive updates that knockout, vue, react, etc. provide reduces significantly the amount of repetitive, boilerplate code that you need to write. All that searching for nodes, adding handlers and callbacks, then updating the DOM when data model changes is now handled by frameworks. As you've said, this is not really jQuery vs React issue at all, jQuery just provides some nice cross-browser shortcuts. The main problem IMHO in jQuery era was in keeping the binding/callback logic separated from the html templates that define the dom structure itself. In big apps it made it difficult to follow which code binds to what part of UI, and there was no way to prevent someone from binding to the same node you're working on from some completely different part of the app. Now with declarative approach it's all in the same place and it's immediately clear what handlers you have in place on any html element, making refactoring much less stressful.

When I got into front-end coming from Design, jQuery just got huge. Due to lack of senior front-end-devs in the company, my JS was this exact pile of jQuery with state in data-attributes. The things weren't really complex (Modals, Tabs, Form-Validation etc.), so it was never a problem.

Nowadays I'd still do simpler components this way. For anything heavier I'll grab React from the beginning, because of it's enforcement of modularity and state-management.

I'm interested in the way of architecting things you described, since I used to try similar ways, but always ended up state-in-dom. Would you have examples or literature on this?

I started out much the same way, and took that approach for quite a while.

These days I avoid putting state in my markup even for small stuff. I remember some good articles on the topic, but sadly can't find them.

But at its most basic, I just make sure that any jQuery/dynamic component/widget, from the start, is essentially a render function that takes a bunch of data and updates the markup with this data (triggered via some event handler or setInterval(), or something like that). In many cases this doesn't have to be complex or efficient. Sometimes just an .innerHTML() or whatnot is fine. The crucial bit is that I always start with a js data structure and treat it as the single source of truth.

In most cases I just use Preact from the beginning, but I've worked on projects where that wasn't possible and I had to use jQuery or plain javascript. Whatever I used, I usually ended up regretting state in my markup.

If you know you will need the data again store it in some variable, in addition to the dom?

For instance if you have a chat, you could have a list of message objects as a normal variable and also show those messages in the dom.

I mean, I use to store data in my model and have the controller doing the rendering like anyone else that has some kind of experience on how ugly the opposite would become, but to outright demonize state within html seems quite misguided as well

there are things that are massively annoying to do without sneaking a data-uuid and data-type here and there, like drag&drop or specific customer requests - if anyone has ever written a cms, imagine the customer coming and telling "I want this product image in black and white" - if you had data attributes around, it's a css two liners, if you didn't because you're trapped into a either-or mindset, you have to also add the image-bw class on the rendering code with "customer ==" and "product ==" checks

That's just a symptom of Javascript being the entry-level language. You can be sort of productive without ever understanding how anything works.

Where these frameworks really come into their own is when you want to create reusable components and share them outside a team. jQuery did a good job with their plugins back in the day but Angular 2 (and React, and soon native Web Components) so that far better.

I hear the tale of "soon native Web Components" for years and still none in sight yet.

As far as I remember there are some attempts from Chrome and Mozilla but not sure I saw a real cross-platform spec out, so I stopped tracking the news around it really.

Can you provide some references maybe?

https://caniuse.com/#feat=custom-elementsv1 https://caniuse.com/#feat=shadowdomv1

v1 shipped with Chrome 53, Safari 10 and Firefox 63. (And there's a polyfill.)

It's not "soon", it's very much "been in production for a while".

A base class like LitElement https://lit-element.polymer-project.org is all you need to achieve a sort of "react-like" development style (components with unidirectional data flow) WITHOUT build tools() and WITHOUT dom diffing! :)

() if you want to use npm dependencies instead of just plain files with a bundled version of lit, you still need to rewrite import paths, until https://github.com/WICG/import-maps becomes a thing at least. I wrote a tiny dev server that does that: https://github.com/myfreeweb/es-module-devserver

Anyone else get a little excited about that Edge v75?!

Few years ago I just did a 'react + redux in jquery' on a smaller project. A state of app was in a single object (= super easy debug, undo or save), any user action generates a state delta (which properties of state needs changing), and a central dispatcher updates the UI according to state changes. Quick and painless.

> Thanks for this insight. It finally explains why I hear people talking down about "jQuery developers", if that was something that people actually did.

Yes. It seems that most of the frameworks people are so enthusiastic about are invented just to prevent bad developers from writing their awful code. Which they end up doing anyway.

Anecdote: years ago, when he decided moving to Angular.js, my boss justified it with "following best practices". Then he proceeded to rewrite all the application components as controllers quering the context to decide how to behave, and talking to everything else through global events. Took me weeks to rewrite everything in a sane way. (Years later it was decided everything was too slow, and it was rewritten in good vanilla js, with a huge performance boost).

complexity also kept me away from React. The main reason that it got popular is because it's by Facebook and they know how to manipulate people to use certain products over others (that's their entire business). There have always been simpler and cleaner alternatives.

If React was not by Facebook, it would not have gotten popular at all except as a 'cool hack/experiment' - Nobody would have seriously tried to incorporate it into a production application.

As soon as you scratch the surface, you understand that it's one of those tools that tries to take away complexity by adding complexity on top.

The story has gotten more complicated though because now React has so many components and there is all this conveninent tooling and boilerplate around it but still I would never choose it over VueJS.

Anything that comes out of Facebook is just pure manipulation.

Convenience is to be taken with a grain of salt, though. In the node.js world, "is-odd" can be a package, and it can have 926,000 weekly downloads and 22 dependents.

Makes sense, you don't want to write your own tests for handling zero.

is-odd doesn't have any tests for handling zero. What would they be anyway?

What is-odd does is to throw an exception if you pass anything that isn't a safe integer or a string representation of a safe integer. Otherwise it just returns n % 2 === 1 (after converting string to int if necessary)

You don't want to start a religious war between the people who believe zero is special, and the ones who believe it should throw an error if you pass a string, and the people who believe it should attempt to convert the string to an integer, and the people who believe you should either round or truncate when the parameter is a floating point number, and the people who disagree about which direction to round, and the people who can't agree whether you should truncate towards zero or negative infinity.

> should either round or truncate when the parameter is a floating point number

Isn't the parameter always floating point in Javascript? (which does mean a package like isOdd will have to incorporate some level of mysticism...)

Let the fight begin! It goes well with some popcorn.

I can understand how fundamental education teachers don't grasp modern Algebrism and believe that Math is formed by fundamental, sacred definitions. But programmers ought to know better.

And my favorite case - that zero is false. (!!0)

Yeah but point being, if you need to use is-odd, what you probably need more is something tailored to your particular application.

Teach the Controversy [TM]!

https://en.wikipedia.org/wiki/Parity_of_zero#Education

Claims made by students:

    "Zero is not even or odd."
    "Zero could be even."
    "Zero is not odd."
    "Zero has to be an even."
    "Zero is not an even number."
    "Zero is always going to be an even number."
    "Zero is not always going to be an even number."
    "Zero is even."
    "Zero is special."

https://en.wikipedia.org/wiki/Teach_the_Controversy

Just so you know (not just for this comment)--you are my favorite HN user. Everything you post is either funny, quirky, or extremely interesting (mostly all of the above).

To add some positivity, I'll add that I'm also a fan :).

And, to add to this (I'm not being snarky), he could be the father/grandfather of many HNers. I recall one of his comments about how he was doing stuff on computers in 1965.

We need more old coders around!

Thanks, but my age was negative in 1965! (But not very.) Maybe I was taking credit for somebody else's work and forgot to get my story straight. ;)

Old coders never die, they just get frozen until their favorite programming languages come back into fashion.

https://medium.com/@donhopkins/cobol-forever-1a49f7d28a39

I mean, zero is so even, it is not even odd!

lol, zero is even.

Sorry but what complexity are you talking about? React (particularly in the early days) has always had a comparatively small API surface.

You have components with a render method, and in that render method you return other components which you can pass data to via "props" - that's basically react in a nutshell.

I've noticed React is often conflated with the wider ecosystem it is a part of (Webpack, Redux, Babel) - perhaps this is the complexity you are referring to, but to be clear React can be used without any of these things.

And sure React being developed by Facebook couldn't have hurt in terms of it gaining popularity - but the real reason it took off is that in contrast to what you said it removed a huge amount of complexity by alleviating the burden of developers having to manipulate the DOM directly in ad hoc ways. Instead of having to manually add classes, add elements, remove elements, append children, you could just say given this piece of state, give me this.

> Anything that comes out of Facebook is just pure manipulation.

This just shows that your issue lies with facebook the company, which is biasing you against react - the technology.

Sure you could use react without JSX compilation, State libraries etc. But you'd just end up writing more code to do less. If your app isn't complex enough to merit the use of webpack, redux, babel etc etc. it probably isn't complex enough to even worry about DOM performance.

>> I've noticed React is often conflated with the wider ecosystem it is a part of (Webpack, Redux, Babel) - perhaps this is the complexity you are referring to, but to be clear React can be used without any of these things.

I disagree with this. Everyone claims that you can use React without JSX but no one does it. Aside from ugliness, the main reason why no ones does this is because you would be missing the most useful aspect of React which is compatibility and consistency with the rest of the React ecosystem. So you cannot separate React from its ecosystem. All this complexity has become tightly intertwined.

If you use VueJS without a bundler (which is actually feasible), you will be surprised how much simpler and elegant the whole development experience is. Once HTTP servers start supporting static push of scripts, we will not even need bundling in production.

>> the main reason why no ones does this is because you would be missing the most useful aspect of React which is compatibility and consistency with the rest of the React ecosystem. So you cannot separate React from its ecosystem. All this complexity has become tightly intertwined.

This is just plain wrong. Firstly using JSX or not will have 0 impact on compatibility with other libraries in the ecosystem because they are not coded against JSX they are coded against what JSX is compiled down to. The main reason people use JSX is because people like it.

Also you say the complexity has become intertwined but I don't hear any examples of how that is the case?

Do you really believe all of us React users are patsies and you're conveniently one of the smart guys who hasn't fallen for it?

Surely a more reasonable perspective is that React actually solved a real problem, and the fact that there's a big company backing it is actually a benefit because 1) there's a lot of money and experience poured into the project, 2) it's likely to be supported even if the lead dev gets hit by a bus, 3) it's an easier sell to management over <insert alternative by random dev>?

I'm no fan of Facebook the company and product, and I avoid client-side code as much as possible (yay Phoenix LiveView), but I think React is quite neat and made my client-side work easier. I'd also argue that it paved the way for an important shift in how front-end frameworks do their thing, and we're all better off for it.

This is awfully dismissive without sound reasoning, I think. It doesn't take long for anyone working with the old ways outlined above (for example, me five years ago) to see why React was in many ways a step forward, defining what we should expect of any new front-end libraries these days. Also, everything starts out as a cool hack/experiment at some point.

> it's one of those tools that tries to take away complexity by adding complexity on top

It's one of those tools that purposely abstracts unproductive, inefficient complexity that we were not aware of before into a higher-level one, forcing us to be more mindful of how we do things. A matter of tradeoffs, I would say, and there's gotta be a limit to how 'simple' one thing can be. Also, you're conflating React the library with the ecosystem around it.

On a sidenote, all the tooling and boilerplate React came hand-in-hand with was markedly a net positive for me. It was in picking up React, during my career, that I learned why tooling is important, picked up tools like Webpack and grunt, learned myself how to do CI/CD and other stuff.

Reply on news.ycombinator.com