Ask HN: Good resource on writing web app with plain JavaScript/HTML/CSS?

It depends on the thing you want to create. The browser UI controls are limited at best, keep your expectations low.

Writing Vanilla JS is error-prone unless you are very disciplined, writing "Vanilla" CSS is OK for the most part, Vanilla HTML is fine. It's best to use some tooling, but there are dozens to choose from.

> Web app > Do I really need Node?

Do you need a back-end? If so, doesn't need to be written in JS.

React / Angular are for SPAs- single page web apps- load once and you've got the entire client.

No reason it needs to be this way. Just serve the page from the back-end.

Also perfectly fine for it to be an SPA. You can use React, which has some nice features for managing the page lifecycle.

Preact is a much lighter weight React.

Svelte and htmx are both nice alternatives.

Check this out: https://github.com/1Marc/modern-todomvc-vanillajs

Start here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fo...

Once you throw a few input elements and a submit button into an html file, you can use the network tab in your browser's "Web Developer Tools" or "Inspector" to see how the form submission looks over the network.

You will need some kind of stack on the server to interpret the submission and do something, like stash it in a database or maybe in your case just append a string to a file. I like Node and use nothing but its built-ins for creating servers and writing to my filesystem.

Speaking of built-ins, python and php can be good too, they can create and interface with sqlite databases out of the box.

So I don't have an exact direction to point you but feel for you re: crap medium articles. I found it worth paying $25 to https://teamtreehouse.com/ to choose from the many tutorials there, lots of intro content of good quality.

PHP. One file on a shared host for not too many headaches

You can definitely create and make a form, ala previous generation of web apps.

Sadly web components APIs are bizarre and unused by most web developers: https://dev.to/richharris/why-i-don-t-use-web-components-2ci...

I purposely wrote my home page (https://langworth.com) with plain, vanilla JavaScript, which features both WebGL and plaintext clients for a server-side text adventure game, because I wanted to remind myself that it's not that difficult to build something interactive and fun without miles of modern front-end tooling.

It started as a single page but I eventually broke it out into a few files for organization. The WebGL parts are lengthy and boilerplate-y because, well, that's GL for you. https://github.com/statico/langterm

I remember when Java EE came about. They had something called "Petstore Demo" running, and documented in articles. Isn't there anything like that for Node.js/js/html/css ?

You don't need framework. You can create classes, make api requests (axios), add 3rd party libraries in vanilla.

The only thing you have to watch out for if you are making a public app (but I think you are doing internal) is security- in vanilla you must implement protection yourself (xss, content secuirity policy etc.) and most modern frameworks already either implement that or make it easier to do.

If I were you, I'd use Node/express with server side rendered templates. It's pretty straightforward for a simple project that needs a backend.

Me and other contributors are writing and maintaining "Web app from scratch" scripts for popular frameworks here:

https://github.com/no-gravity/web_app_from_scratch

The idea is to have a self-explanatory shell script for each framework, which turns a fresh Debian installation into a running web application with routing, templates and user accounts.

So far, we have Django, Flask, Laravel and Symfony. In various stages.

If you look into the scripts, you see that they are pretty much tutorials in code form. Reading one of them shouldn't take more than 10 minutes. After that, you know exactly what your web app does.

    apt install -y python3-django

    python3 -m venv .venv
    . .venv/bin/activate
    python3 -m pip install django

I was in the same boat with wanting to just learn plain HTML/CSS/JavaScript.

Mozilla docs didn't quite do it for me but I swear by W3SCHOOLS website.

I also found this guy's website helpful: https://gomakethings.com/

I think the author is on HN; he swears by plain JS.

For me I just wanted to write a simple cross platform app, I decided Dart/Flutter was the way to go in the end.

I guess you will just end up writing your own framework in the end. There is a reason web framework exist - they all satisfy different needs in the domain of web development. Like routing, content update, state handling, event handling and so on. If you don’t need any of that, great, you can just learn and write plain html, css. So LMGTFY https://dev.to/jordanholtdev/how-to-create-a-web-page-with-h...

Cheers

> To me, the browser is the UI framework

It's not. It's a haphazard collection of hacks and one-off solutions that first grew organically, then not at all, then got taken over by bizarre corporate interests.

> I don’t know what’s a good source to actually get a web app running locally that I can eventually deploy online.

You need the backend part for this that handles for submission. For the frontend you need a static web page with just HTML and CSS.

So I would stop looking at JS to keep your sanity, and look at a simple PHP or Python or Ruby framework/lib that will give you the scaffolding to handle form submissions and templating to create an HTML page. Like Sinatra.

Since you already do .net I presume, you can go ahead and do that in ASP.net :)

For simple web "app" like form and form processing where you are not using dynamic reload of page elements, you can drop JavaScript and go with PHP + HTML + CSS. Use vanilla procedural PHP with sane splitting in functions / files. This stack is good enough for simple web apps, but also good for a little more complicated like for example task list etc. You can optionally sprinkle it with some vanilla JavaScript for dynamic parts, like showing disappearing error messages.

Gotta do https://scrimba.com/

I like to use Bootstrap for CSS, because I'm not a designer and I want a graceful experience on all devices. Plain JS can easily be thrown in there. You can also just use the default HTML form submission behavior. Bootstrap offers some helpful validation styles for client side form verification.

Unfortunately, to remove CSS bloat from your completed Bootstrap template you need to use a node based script. Check "Purge CSS", although there is another one.

No need to get into bloated SPA frameworks or JS on the backend. From my side JS is just a necessary evil for webdev. Prefer to keep it in the browser where it is required. For the backend, choose a sane language you are comfortable with.

Using a WASM blob + canvas/WebGL as a client is another option which is increasingly appealing. You still need some JS glue, but you're free from some of the browser madness. Depending on how you build your client, you maybe able to recycle it into a standalone binary.

If you're coming from the WPF and winforms world IMHO you actually should find and use a framework. Find something that has a bunch of pre built components like cards, dialogs, buttons, etc. already styled and ready to go. You could go for something complex like react and a component library in its world, or go with something that is (mostly) CSS like bootstrap or bulma.

I say this because where you're coming from you're used to plopping down a dialog and throwing components like forms and buttons and such on it. With plain HTML and CSS it is much, much more free form and you can easily be paralyzed by choice or indecision with how to design or even just how to layout components. With a framework like bootstrap you're given layout primitives like a grid and higher level components like a navigation bar, menus, etc. which are much closer to what you're used to from C# and windows.

Want to make browser-only webapps without node.js, bundling, building, transpiling and all that stuff?

This experimental view library might interest you: https://github.com/jehna/longwood

It's usable with plain in-browser Javascript, no other tools needed. You can split your frontend to components and do conditional rendering logic just as with any templating library.

I recommend using Micronaut + Thymeleaf, its simple, easy and fast in both performance and developer productivity. Vanilla HTML, CSS and Javascript is fine. The best part by using Micronaut is that the documentation is really really good.

I do also think a single PHP file is maybe the easiest option.

You said app, which means you'll likely need some sort of backend. Express is pretty simple to get started with. These examples work out of the box and give you a simple starting point: https://expressjs.com/en/guide/routing.html

Then you can layer on HTML, frontend JS, and CSS. With modern typescript you can definitely write pure JS and be "fine".

That said, after a while once you grok how it all works, I would try React.

> Do I really need Node?

As an alternative, you could look at using a vercel template with some sort of out-of-the-box cloud database. These are super simple to get started, although they go against your goal of not using frameworks for the most part. https://vercel.com/templates

I don't know of a readymade resource except checking the usual places (W3Schools, MDN, LinkedIn Learning, Codecademy, Udemy, etc.), but just wanted to address some of your points...

> Coming from WPF and Winform, I find web development to be unnecessarily complex

The web is actually quite a bit lower-level than that, sadly. Winforms (at least when I last used it in the late 90s...) was actually really nice in comparison, especially when you use it with Visual Studio. Web has nothing quite like the built-in GUI editor in VS, except maybe something like Adobe Dreamweaver -- which is an approximation of a browser's renderer, not an actual pixel-perfect layout engine.

If you're looking to "compose" a web app out of UI widgets -- dropdowns, buttons, menus, etc. -- you might want to consider going one level of abstraction higher and using something like Bootstrap or UIKit or SemanticUI. These are NOT Javascript-extending frameworks the way React or Angular are, they're just collections of very useful UI primitives with sane defaults. You can typically use these just by dropping in a couple <script> and <link rel="stylesheet"> tags (meaning you're staying well within "vanilla" HTML/CSS/JS).

> a simple web app, no React, Angular or any of that. That can’t be too hard right? I’m sure in large scale, that stuff has its place, but I don’t need it.

Actually even for a small app, the right framework can make it quite a bit simpler than vanilla JS. But I won't preach here since you're specifically not interested.

> To me, the browser is the UI framework.

It's not though =/ HTML by itself isn't very useful; it doesn't do interactive things at all without either Javascript or some sort of backend that you POST to. CSS lets you have hover states and dropdowns but it's still not real interactivity.

So you have to choose... do clientside logic (entirely doable in vanilla JS, just tedious as heck and error-prone) or offload it to a backend server of your choice (using whatever language or framework you want; there are many).

> I don’t know what’s a good source to actually get a web app running locally that I can eventually deploy online.

Over the last ten years or so, we've gone from "deploying" web apps to actually needing to "build" them first, kinda like compilation/transpilation + bundling + tree-shaking (size optimization) all in one. But by and large you shouldn't need to do that (have a buildchain) if you're writing vanilla HTML + JS + CSS. That usually just leaves you with a bunch of files that the browser runs directly.

To run them locally, you can spin up a simple web server (something like Apache or Nginx, with or without Docker or Lando or other such containerization services) or if it's really simple enough, just open the file directly in your browser.

To host them online, you just have to upload them anywhere -- the old ways of SFTP still work, or these days there might be Git-based plain HTML hosts (I'm not sure; it's not so common a need). If you're feeling lost as to where to host your files, check out Nearlyfreespeech.net, Google App Engine, Cloudways, Hetzner, DigitalOceans, etc. You can always manage your own S3 instances too and deal with CDNs and DDoS etc. on your own, but why...? No need to reinvent that wheel.

> Do I really need Node?

No. Node is a server-side/backend runtime for Javascript. It replaces things like PHP or Ruby or Java on the backend. If you're making a vanilla JS web app for browsers, you do NOT need Node... unless you are deliberately choosing to make your backend in Javascript too!

The reason Node is sometimes used for frontend web frameworks is just that it keeps the ecosystem in one language, so the frameworks themselves and build tools and developer tools etc. often depend on note. But once the web app is built, it is deployed to the web as regular file...

I fully agree with your sentiment. In case you need some tutoring, please don't hesitate to contact me here. I have 20+ years of experience in software engineering and webdev and I believe current state of web-development is completely screwed up.