Earlier quoted context omitted.
I’ve been developing for the web since, well not quite 30 years ago (PHP isn’t even 30!), but let’s say 25 years ago. I’ve used so much different tech in those years that I have a pretty good sense of it, and I even contributed to the development of both PHP and React. And you are totally off base. Modern frameworks are far superior for building modern web apps than older serverside tech. Demands have changed and so…
While I completely agree with you (and also think that the grandparent post was a bit inflamatory), the argument here is not that newer technologies aren't better. The argument is that the techniques themselves were "forgotten" and are now being rediscovered. This is easily verifiable by people claiming that the term "Server Side Rendering" can't be retroactively applied, even though it unambiguously means what PHP u…
Fresh – Next-gen web framework
381–390 of 463 posts
Re: Fresh – Next-gen web framework
#382Earlier quoted context omitted.
Part of why I like React (especially with Typescript) is basically that I like JSX/TSX as a templating language. I much prefer working in a full language (with JSX as relatively light syntactic sugar on top) that can leverage existing tooling and typechecking, instead of a de novo template language with its own syntax for control flow constructs jammed in, that doesn't usually have great editor support or typecheckin…
> that can leverage existing tooling and typechecking, instead of a de novo template language with its own syntax for control flow constructs jammed in, that doesn't usually have great editor support or typechecking for integrating with the rest of the server-side code. This is exactly what I find frustrating about go templating. I lose autocomplete and type hints.
Re: Fresh – Next-gen web framework
#383Earlier quoted context omitted.
Hydration only makes sense when you have a vdom that you have to "synchronize" with the initial state of the page (the html you got from the server). The act of performing this synchronization is what hydration is about (notice that this includes setting up event handlers too). What you do here is to reconcile the in-memory representation (vdom) with the actual contents of the page (the dom). In the jquery aprroach t…
So it's the same approach to generating html, except the part that belongs to client side (event/ui-state) is irrelevant to backend _anyway_. If you separate javascript code into 2 main parts, 1) what's only related to generating html 2) what's only related to DOM API, you get jQuery approach where on the back end javascript is just yet another backend language?
The point is that you don't do this. You do:
const App = () => {
// Client-side counter
const [count, setCount] = useState(0);
useEffect(() => {
setTimeout(
() => {setCount(count+1)},
1000
);
}, [count, setCount]);
// HTML-rendering part
return (
Count: {count}
);
}
The framework (next, fresh, whatever) grabs this and generates:- Some sort of "bundle.js" that contains the component (as well as the framework to render it).
- An "index.html" that contains "Count: 0" (and references the above bundle).
- When the "bundle.js" is loaded, it runs the App component in the browser and reconciles the in-memory vdom with the browser's dom (that has the div because it came in the .html)
- From then on, the component runs normally (i.e.: the counter keeps increasing and you see it increase on the screen).
In vanilla-land, you would:
- Write "Count: 0" in an index.html that also loads a "counter.js"
- Write the counter.js file with something like:
document.addEventListener('ready', () => {
const count = document.getElementById('count');
let value = 0;
setInterval(() => {
count.innerText = value++;
}, 1000);
});
Less code, you don't need frameworks, hydration nor anything similar and it's probably much more performant.However:
- If you want to change the counter's initial value, you have to update both the html and the js file
- If another dev adds some element with id="count" to the html the whole thing breaks.
- If you want to modify the generated html structure, you have to edit both the html and js file
- When the logic gets more complex, you will have to implement it both in your backend-code-that-generates the html as well as in the js
That is, even though it doesn't seem like it in a simple example such as this one, the developer ergonomics of having a vdom are much better when things get hairy. The million dollar question then becomes "how can we achieve a performance and code-size similar to the vanilla approach while keeping the ergonomics of the vdom".
Re: Fresh – Next-gen web framework
#384Earlier quoted context omitted.
I'm not an Uncle Bob fan by any stretch of the imagination, but he wrote a somewhat famous article about this phenomenon: http://blog.cleancoder.com/uncle-bob/2014/06/20/MyLawn.html With each new wave - we get people that either lack the time, the willpower or the conditions to understand what came before them (the ground they're standing on), and this is how we end up rediscovering things every 2-3 years. It's much…
Others have responded to the technical deficiencies in your comment. I’ll just say it’s a bit rich to be telling the developers of React - “all this can be done with a server side rendered PHP”. The developers of React are well aware of what PHP can do, because they work at a company with one of the largest PHP (-ish) codebases in the world. Almost all pages on Facebook were completely server rendered, but they’re gr…
Re: Fresh – Next-gen web framework
#385Earlier quoted context omitted.
I'm really sad that this sort of attitude is common in Hacker News. I am not a huge fan of JS, but what I hate about this is not that it's critical of JS, but that it's clearly just a knee-jerk cynical reaction. This framework in question is not doing what PHP/Ruby frameworks were doing. Whether what it's doing is a good idea or not is neither here nor there, it's just simply that you aren't understanding what it is…
The fact that you think it’s materially different is amusing. The only “magic” here is injecting JS shims to handle bidirectional syncs for certain components (“islands” in their parlance). That is also something we’ve had for a very long time, though admittedly it was kludgy as hell two decades ago (ajax polling, SSE, long-polling, comet, etc).
Re: Fresh – Next-gen web framework
#386Re: Fresh – Next-gen web framework
#387Earlier quoted context omitted.
Others have responded to the technical deficiencies in your comment. I’ll just say it’s a bit rich to be telling the developers of React - “all this can be done with a server side rendered PHP”. The developers of React are well aware of what PHP can do, because they work at a company with one of the largest PHP (-ish) codebases in the world. Almost all pages on Facebook were completely server rendered, but they’re gr…
The funny thing is as far as I know they still use PHP to render React (via embedded javascript interpreter) on the server.
Re: Fresh – Next-gen web framework
#388Earlier quoted context omitted.
So it's the same approach to generating html, except the part that belongs to client side (event/ui-state) is irrelevant to backend _anyway_. If you separate javascript code into 2 main parts, 1) what's only related to generating html 2) what's only related to DOM API, you get jQuery approach where on the back end javascript is just yet another backend language?
> If you separate javascript code into 2 main parts The point is that you don't do this. You do: const App = () => { // Client-side counter const [count, setCount] = useState(0); useEffect(() => { setTimeout( () => {setCount(count+1)}, 1000 ); }, [count, setCount]); // HTML-rendering part return ( Count: {count} ); } The framework (next, fresh, whatever) grabs this and generates: - Some sort of "bundle.js" that conta…
vdom keeps being mentioned, but it doesn't matter here because it's implementation detail, other frameworks will do it differently.
I don't see it's ended up being different than js as yet another backend language with a separate js for volatile state on ui.
Re: Fresh – Next-gen web framework
#389Earlier quoted context omitted.
Not really, Fresh already powers several websites https://deno.land/ , so it definitely has production use.
Ryan Dahl described it that way. He said it’s not something they’re really promoting or planning to utilize long term.
Re: Fresh – Next-gen web framework
#390Earlier quoted context omitted.
> If you separate javascript code into 2 main parts The point is that you don't do this. You do: const App = () => { // Client-side counter const [count, setCount] = useState(0); useEffect(() => { setTimeout( () => {setCount(count+1)}, 1000 ); }, [count, setCount]); // HTML-rendering part return ( Count: {count} ); } The framework (next, fresh, whatever) grabs this and generates: - Some sort of "bundle.js" that conta…
So js framework separates the render function which renders html and the client-side only part (count event) for you. This akin to what I said earlier. The same missing piece here is effect (e.g. http) that actually transfer state from client to sever and persist to storage. The business logic for client-only is not going to be exactly business logic for behind-the-wall rules. Some may be shared but that's not really…