Hacker News Reader

Comment by cubano | Hacker News Reader

So as a 56yo "old school" LAMP-stack monkey, could someone please give me a quick rundown exactly what benefits would investing the mental energy (a non-trivial amount) and time (less an issue) give to someone in my ancient yet comfortable canvas Cons?

For sure next.js is an interesting framework and of course I use plenty of typescript in my projects to keep the UXs from feeling stale, but I have yet to see the overwhelming benefits that going all-in with something like this framework would give me overall, besides just the obvious one that I'm "keeping up with the cool kids"...

One think I do really like here is the way Remix is keeping things on the backend...I'll admit coming from the 1980s I'm much more comfortable working with backend paradigms, so this particular stack has caught my attention more than others and why I am particularly interested in hearing about its direct benefits (besides the obvious ones like "its not PHP" of course)

View on HN

As a 47yo UI Designer and UX/User Centered Design Pioneer (CEO, PM, Business Owner, etc.), I have one rule of thumb towards "Cool JS/CSS/New tech":

I wait for the tech to become "Unavoidable" in Implementation practices.

Aside of "mental load", every new paradigm shift is measured in education/expenses/support time. So waiting for "market validation" is the only valuable option for me. This approach has saved a tons of money for my clients and thousands of hours in support/maintenance.

"Keeping up with the cool kids" is not valuable business decision, you can invest in systemic design knowledge and "proven technology" optimization.

using PHP 5 and xhtml is also a valid strategy imho

Yeah, there will be dragons in this like any other framework, and I'll let other people slay them for free. There is little incentive financially or career wise to get ahead on these things - so I only do it for tech I find genuinely interesting.

I think this sort of thing will be interesting to many, but not me. Seen enough view frameworks (ok this probably is something else, even working out what it is and what problem it solves is a weekends work). Thanks!

About the same age, I just apply it to every "New tech" not only web, other than that, 100% on point.

I think this new wave of server-enabled React is enabling codebases that are better organized than old MVC stacks.

The MVC way was:

  1. Look at the route
  2. Recognize that this route has, e.g. A Header, A Sidebar, and Content
  3. Load the data for the Header, Sidebar, and Content
  4. Pass the data to the templating engine
  5. Use the templating engine to render the route, which likely fans the data for the Header, Sidebar, and Content into individual template files.

Remix highlights that Header, Sidebar, and Content are three separate components. Instead of loading the data all at once (#2 above) and then rendering all at once (#5 above), it allows you to load and render each component individually.

This is what Facebook's Bigpipe was doing in 2010.

https://engineering.fb.com/2010/06/04/web/bigpipe-pipelining...

>> load and render each component individually

you can do that with Suspense. React doc calls that render-as-you-fetch pattern https://reactjs.org/docs/concurrent-mode-suspense.html#appro...

Frameworks are designed for the following (this is obviously an incomplete list):

1. large teams (not just one webmaster, circa 1999)

2. tooling like syntax checking, style enforcement, minification, and transpiling

3. component-based development & reuse; forces smaller files which are easier to lint and test

4. separation of concerns. in the old days there was one Apache www folder and everyone took a big shit in it. javascript was in html files that also contained php, it was snarled mess. frameworks separate that to a large extent (one could argue angular/vue etc went backwards)

5. regression, aka CI/CD: there are actual testing flows today, unlike the 2000s

6. if you've been out for a really long time: reactivity. JavaScript allows getter/setter methods that can update the DOM when a value changes; this includes before/after and around-like methods that can integrate AJAX calls in a VARAIBLE name. e.g., you access the variable and an AJAX call fires and updates your DOM when the data returns with you doing ZERO coding. This is a big step over PHP where you sprinkle magic server commands everywhere, and big step up over Jquery, where you have to target each DOM class/ID, which is tedious.

That being said I maintain a LAMP site, a pure-NodeJS site (get() verbs send back pug templates), and a NuxtJS website. I prefer developing the NuxtJS website (hot loading is sweet), but I can hack the LAMP site in a snap without touching literally everything; the NodeJS website is more aesthetically appealing in terms of architecture, but adding content to it is laborious.

EDIT: I'd go even further and say there is way more of a diaspora today. In the old days you could approach any website and basically understand what was going on in the frontened. Today there are layers upon layers of compiling/transpiling/parsing etc, that creates dozens of bespoke syntaxes. It is maddening, but I chalk it up to the fact that companies hire for the "hot new thing," damn the consequences, because their PMs are youngins too. There's a enormous lack of engineering discipline everywhere you turn. You will find many, many, MANY of the tools fail to even succeed at their own how-to guides because they have no real deep thought behind them.

> JavaScript allows getter/setter methods that can update the DOM when a value changes; this includes before/after and around-like methods that can integrate AJAX calls in a VARAIBLE name. e.g., you access the variable and an AJAX call fires and updates your DOM when the data returns with you doing ZERO coding.

Maybe I'm old but that sounds TERRIBLE. When my code is doing something expensive like a network call, I want to know about it.

Sure, that's one way to look at it.

Another way to look at it is you just removed 300 lines of buggy redundant code into one line that does exactly the same thing but without all the fuss. And now that your code is so small you can understand it better, and test it.

Also, there's this "new" thing called async/await: javascript is built on deferred execution, so you don't block on expensive calls. PHP is a dinosaur.

Reactivity is mostly used for managing the DOM in a natural, non-intrusive way, and my AJAX example is maybe extreme, but a good illustration. I'd say that concept in the frontend is biggest invention since 2010.

> Another way to look at it is you just removed 300 lines of buggy redundant code into one line that does exactly the same thing but without all the fuss. And now that your code is so small you can understand it better, and test it.

Maybe I'm missing something critical here, but the code doesn't go away, does it? You still have to have the AJAX implementation, it's just that instead of the intention-revealing interface of a call to something like fetch you have an intention-obscuring interface of magic properties.

The code still has to live somewhere, even if you've swept it under the rug. But now when you walk across that rug it's real easy to trip.

I believe you are arguing that high level languages shouldn't exist. :)

Did you write the driver that you call when you do HTTP request through a TCP/IP stack? No? You just swept it under the rug!

I kid, but I honestly don't understand your resistance. You don't seem to want to let go of some kind of anchor, referring to it as "magic properties." While I argue you already are letting go at so many other levels.

It is easier to read code that says:

    div
      p The current stock price is {{ stockPrice }}.

And then have code like this in your typescript MV implementation (using VueJS).

    computed: { async stockPrice(): { return await axios.get('/stock?TSLA'); }}

Boom!

Every time the DOM is redrawn this updates, and it is 100% non blocking, easy to read, and trivial to maintain. (I didn't bother with a catch, but you should have an error handler elsewhere for non-transactional dynamics; also didn't index the data object since Axios returns JSON, but that depends on your endpoint that you wrote.)

The HTML (well, Pug, because who writes HTML?) is clean and easy to read; I didn't need to $('domObject').innerHtml() with jQuery; I didn't need to implement a wrapper around 'new XMLHttpRequest();' and I didn't need to block execution -or- write a big messy Promise<> because async/await. 80% of this benefit is a framework (20% is ES5).

Is that really so awful?

And: If you want to be skeptical of frameworks, I thoroughly encourage that because they need more critical eyes on them! Seriously, they need some restraint. There are some deep rabbit holes that devs go down which really turn a great idea into crap.

EDIT: I have to add that if we were working on a project you'd be looking at me funny, because I gripe about frameworks and tooling non-stop. I feel like I'm forced to waste time on so many hacks to utilize the truly brilliant ideas in frameworks. So I take no responsibility if you fall into the framework hole with the rest of us! :)

If the code was buggy, fix the bugs. If the code was truly redundant, you could delete it. I suspect you meant more that it was repeated in several places, in which case, of course refactor it to be more DRY. If you can write an abstraction that provides a consistent mental model and relieves programmer burden, then do it. None of that is in dispute.

My point is rather one of interface design. This is about communication with other developers. Help them out! Give them affordances to make their lives easier. Leave clues so they know what's going on.

A developer coming up to your template that just says {{ stockPrice }} has zero chance of knowing that this is going to secretly issue a network request. If it looks like a field reference, people are going to assume it has roughly the same characteristics as a normal field reference. That's an eminently reasonable assumption -- don't violate it.

Everyone would be surprised to see that take several orders of magnitude longer because it needs to touch the network. Everyone would be surprised to find out that they can't include that field in a template that might possibly be rendered when the user has no network connection. When things do something different from what they look like they're doing, it's surprising.

Don't surprise people. Make life easy for them.

Is this really new though? MVVM .NET apps similarly use getters & setters in this manner, except with XAML.

I've never seen .NET code that has magic properties hiding expensive operations, though my .NET experience is admittedly limited. Is that idiomatic?

Maybe so; it's pretty normal to expect a property setter to perform additional operations, as it's necessary for making data binding more manageable among other things. But using Go to Definition takes me directly to the getter/setter, so imo it's not exactly hidden.

I think it becomes problematic (or more magical) when these network/database/expensive calls are made willy nilly throughout an application, without a dedicated class or layer to aggregate these kinds of operations. If you have things architected correctly, it's not a big deal to trace these kinds of things throughout your app.

Check out Laravel Livewire: https://laravel-livewire.com/ — this is based on a similar concept. (If course, you do need to be using Laravel in the first place!)

Coming across "new stuff" I always ask myself: Where did the complexity go? It definitely didn't go away, so what is it that the glossy page is not showing?

Reply on news.ycombinator.com