Comment by duchenne | Hacker News Reader

Comment by duchenne | Hacker News Reader

Parent Full thread

How do you guys achieve this in practice?

I made my home page without javascript, and it is blazing fast. But as soon as I try to make something more complicated I bumped into practical problems.

- Components. I want to have the same navbar on all my pages, but I don't want an un-maintainable copy-pasted code on all my pages.

- Data. I need to display some data that is different for each user. How do I embed it in my webpage without ajax calls?

- Dev tools. I need debugging / bundler / source maps.

Some possible solutions could be:

- PHP. It has components through "require". You can embed the data easily. But, I do not know good dev tools: If I debug the javascript in the chrome dev tools, can I edit directly the php script? Can I minify/babel the output of the php code? And I cannot use the same php code on both front-end and back-end.

- Vue-SSR. Nice one-file components. Data can be provided within express. I can re-use the same code on the front-end. I have not tried yet, but it seems very interesting.

- EJS. It has require and data from express. It is very simple too use. But the tooling is lacking: no source map.

I try to go minimal javascript. There are two main ways you can limit javascript: static site generation or a rendering via a backend language.

Solutions

Use a templating engine with a backend language. My goto is jinja. For example you create a nav template and then include that template in your larger templates. You can then render different templates depending on the given route or file.

Alternatively use a static site generator. I use pelican. The static files are generated upon deployment from markdown for content, scss for css, templates for html, etc. There are plugins for using minifiers.

For user specific data, You can give the user a randomly generated session id cookie generated via a backend language. The backend language generates further pages based on information retrieved from the session id cookie. The session id would correspond to state in some database. Async data loading cannot happen without client side javascript.

- Dev tools: Write tests. the backend language would have developer tools such as a debugger. Generally you can run a dev server which allows to to drop a breakpoint upon failure. (backend frameworks can support this) Alternatively, you can change the rendered HTML via a debug flag (for local testing).

For PHP, The HTTP server serves the rendered files from the backend language's application server / module therefore you normally wouldn't be able to directly edit the backend code via a web browser.

Err, isn't everything you are worried about also served quite well by all server-side rendering frameworks since forever?

I legitimately cannot understand your issue.

You just probably know things that I don't know. That's why I am asking.

Which SSR framework do you prefer?

Just a stupid question. Why would you need a bundler for plain HTML?

I agree on everything else, but I kinda tripped on that and I'm not sure what you're actually looking for.

If you have a solution to avoid using a bundler altogether, that would be great. Personally, I would use it for:

- compression of html/css/images.

- css compatibility with old browsers.

- source map / auto-refresh during development.

- For any even slightly complicated app, you still need at least a bit of javascript. So, you need babel, minification, source maps, and so on...

Reply on news.ycombinator.com