Hacker News Reader

Comment by userbinator | Hacker News Reader

I know there seem to be two rather large groups on HN, one for proliferation of JS and one against, but at the very least if someone from the latter visits your site, please show something better than an entirely blank page.

(I'm speaking of the demo, not the actual site describing it --- although I thought it would be hosted with itself.)

As for the idea of turning static content sites into client-side JS-rendered apps, that gets a strong disapproval from me. Why? It's needless complexity (instead of generating the HTML once and storing it on the server, every single visitor has to regenerate it on their machine), bad for accessibility, and very much against the principle of the Web that information should be easily linkable and retrievable. I can understanding using JS to do "app-ish" things that wouldn't be possible with static pages, but this is reinventing the wheel and making it square.

View on HN

> As for the idea of turning static content sites into client-side JS-rendered apps, that gets a strong disapproval from me. Why? It's needless complexity (instead of generating the HTML once and storing it on the server, every single visitor has to regenerate it on their machine), bad for accessibility, and very much against the principle of the Web that information should be easily linkable and retrievable.

Yep, and the worse offender seems to be Quora that seems to have its main page receive all its data from java script (which as a side effect makes scrolling annoyingly slow). But it's probably on purpose since they are preventing copy/pasting so it's impossible to quote text from their website without linking to them in some way.

Thanks for all the feedback! Yeah, this is definitely next on the list of bugs to fix. I definitely respect your opinion. I really looking a way to accomplish this problem from a different perspective using just client-side technologies. It would have been nearly impossible to accomplish this without the aid of Javascript unfortunately (besides just having static HTML of course but that wouldn't be any fun would it!)

> an entirely blank page

That's only true if you use 'view source'. If you open up dev tools, all of the elements are rendered in full and live updated as they change.

Client-side rendered apps are quickly becoming every-where rendered apps. They can now work isomorphically, on the desktop, and on mobile.

> every single visitor has to regenerate it on their machine

This is a false premise. For server-side view rendering, the view is tightly coupled to the data. The majority of the payload will be made up of dynamically generated (and non-ideal for caching) HTML structure. When all the user really needs is data.

Rendering apps on the client-side allows fetching partials and content data piecemeal, which is ideal for caching. Views can be cached at the HTTP layer, directly in the app, or both. This will be especially useful once HTTP/2 (ie connection persistence) are in common use.

-----

We're moving past the days of the static web. Especially, now that it's trivial to pull data from many different sources on the client-side.

What really never make sense was rendering the view on both the server-side and client-side (often times using 2 view template engines). Fortunately, that practice is becoming less common.

Where do we stand on the whole SEO issue at hand? I recall Google experimenting with it a few years ago but have not heard much back since.

Google has been able to handle javascript in pages for a while now: http://searchengineland.com/tested-googlebot-crawls-javascri...

Unfortunately Facebook, Twitter, slack, and others can not ... Yet?

Maybe that's not directly SEO but it is indirectly. Good open graph data makes links, at least on Facebook, arguably more compelling which makes them more likely to be clicked and/or shared which may lead to better SEO

I don't think any "physical web" scanners do right now unfortunately, for example https://github.com/dermike/physical-web-scan (or search for mobile apps called "physical web"). This completely banjaxed my attempt to make an all front end internet beacon recently.

But this is a static site generator. It says so in the title. For dynamic content client & server site rendering makes sense. But there are still many uses for static sites. Blogs, manuals, tutorials pages like Wikipedia, they could and should be rendered once.

> The majority of the payload will be made up of dynamically generated (and non-ideal for caching) HTML

For a blog or CMS this is probably not the case. The majority of the page is going to be the same for all users. Maybe you have something at the top of tbe page showing the user is logged in, and admin links to edit it, but that's probably about as dynamic as you will get.

> Rendering apps on the client-side allows fetching partials and content data piecemeal, which is ideal for caching

Yes.. but why? 99% of websites aren't going to have enough traffic that this would cause load issues on the server. On the client the browser probably does a better job of caching pages than you could.

For something more complicated that a blog or CMS you need to think about security. It's not a trivial task to cache something and securely serve it to only people who have an active session and are authorised to view it.

  > They can now work isomorphically, on the desktop, and on
  > mobile.

So can plain HTML. Without any needless scripting.

  > We're moving past the days of the static web.

We are not. Maybe you are, we can wait till you come back.

  > Especially, now that it's trivial to pull data from many
  > different sources on the client-side.

HTML is even more trivial.

HTML (or more specifically HTML+css, and how they interact with and render in the browser) are anything but trivial. javascript (the language, not the JIT) is relatively simple in contrast

client side rendering + json apis on the server are the holy grail of openness (esp with an MIT licensed client)

Building a webpage node by node from within Javascript does not lessen the complexity of HTML and CSS, it simply adds to it. You're doing the exact same things - creating DOM nodes with attributes - but with yet another level (or 5) of indirection.

The point is, generate views ONLY on the client.

Excess layers of indirection come when you try do view generation on both the server and the client.

Many server frameworks currently follow this approach. Generate the view scaffold using templates on the server-side. Then request partials asynchronously on the client and generate additional views client-side using a completely different framework.

Shifting all of the view generation to the client frees up the back-end devs to focus all of their time/effort on the important part. Building and scaling the data infrastructure.

Not to mention, shifting the view layer client-side reduces resource requirements on the back-end.

The previous generation of front-end SPA frameworks frankly sucked in terms of performance, leading to a bad user experience. There were 2 primary reasons why. All data persistence/binding happened directly on the DOM, and all execution was handled on the main execution thread.

The latest generation greatly improves the experience by using new techniques such as data persistence/diffing via the virtual DOM, and handling all non-rendering logic on a background worker thread.

Exactly. Have fun trying to do feature detection for compatibility purposes on the server-side based on user agent strings.

Because... those never lie. /s

Yes, you can use HTML/CSS rendered views on mobile but they pale in comparison to native UIs.

The latest app frameworks decouple client-side application logic from the view rendering layer. Meaning you can use the same application logic on your web app as you use on mobile EXCEPT the view on mobile will be rendered natively. Not through a hacky, slow, inconsistent embedded web view. Native native.

If the approach is successful as the framework devs expect, mobile app development (and the app ecosystem as a whole) will go the way of the dinosaur.

Pulling data from many sources on the server requires proxying requests to third parties and providing inline caching of the responses for performance reasons. Despite the fact that the source you're proxying to likely already implements their own caching strategies.

Have fun addressing bugs caused by cache invalidations when you're dealing with multiple caching layers.

Not to mention the increased memory/computation footprint incurred from hosting the equivalent of a database view of an entire third party service on your backend.

Or, you could just request the data directly on the client side.

That's what I mean when I say 'reduced complexity.' Unless you consider setting up CORS whitelisting and some AJAX requests to be really difficult. Then, carry on.

Caching cannot help you with initial page loads, which is probably important when you have a content focused sites.

Rendering the content via JavaScript is slower than just having it in your HTML. It's true that JS execution has become insanely fast, however, initial JS execution is not as fast, because it requires that JIT to kick in. Even if JS execution becomes infinitely fast, you still have to work with the DOM, which is horribly slow and there are no known ways to make it fast. Google, Yahoo and others have prove with hard numbers that users care about speed, even when we are talking about milliseconds.

I highly recommend doing some research on how browsers and caching actually work before falling into the pit of false belief.

To be fair to him, he did specifically mention isomorphic, in which case the js is running on both sides and the idea is that initial load delivers server-generated markup, giving the user content immediately then doing all the databinding later.

Also, tricks like that are what users generally recognise as speed - similarly Twitter's optimistic xhr submission appears to work instantly, then goes off and actually does it's thing retrospectively.

Fwiw I think a fully client side js cms app is a moderately rubbish idea for a variety of reasons, but js rendering of dynamic content absolutely has merit.

It's a little more nuanced than slamming somebody's 'pit of false belief' because they like client view rendering. :)

> We're moving past the days of the static web.

As much as I like site generators and I'd find this a good idea for some purposes I wouldn't state it is a replacement for static sites generators.

> > an entirely blank page

> That's only true if you use 'view source'. If you open up > dev tools, all of the elements are rendered in full and > live updated as they change.

If one attempts to view the demo with client side javascript turned off - one gets a completely blank page. The very point to a static site generator is the word "static" which is generally taken to mean that the actual rendering of the content requires only HTML rendering (no javascript (or php or ??) code execution, server side or client side).

Even with js turned on, I get a mostly blank page. It chokes on String.prototype.endsWith, which is an ES6 feature not supported by my very-slightly-out-of-date version of Safari.

If you want to render your blog in client side js AND use fresh-from-the-oven js features, the least you can do is include a polyfill.

Thanks for pointing this out. Going to be adding a polyfill for that!

Right, this is exactly why I'm avoiding using the word "static". I began by using that term but have strayed away from it for several reasons.

React basically invalidates your argument.

Render the client on the server, then push the rendered markup and the client state to the browser where the client takes over again.

This paradigm is fundamentally different from the Angular1-style "render everything in the browser" and "maybe pre-render on the server, then discard that on page load" approach. If anything, it's closer to the traditional "render everything on the server, then apply enhancements in the browser" approach of the pre-SPA days.

Angular2 is following the exact same approach. Although the isomorphic bits aren't production ready yet.

Basically Angular2 renders a completely interactive view that captures any user events that occur while the app is bootstrapping in the background. Once the app is loaded, the events are replayed to make the user experience consistent.

React and Angular2 are fundamentally just different flavors of the same underlying infrastructure. React is more de-centralized and composition based. Angular2 is more centralized, monolithic, OOP, architecture based.

They have even eluded during presentations that the 2 core dev teams have been in direct contact to work out some technical details.

From what I've heard, Ember.js uses these same approaches. Kinda makes me question how much of this started with Ember and was later adoped by React and Angular.

This kind of mindset is the entire reason I wrote "The Sad State of Web Development"

Needless over engineering for displaying text on a page.

Big proponent of JS myself.

I totally agree with you here.

Reply on news.ycombinator.com