Up to here, the Kladde’s prototype gets by entirely without script: HTML says what something is, CSS says how it looks, and forms send
their data to a server. That’s not a shortcoming but intentional. In this module, script is added, but in moderation: only where it makes
a page more convenient, never where the page would no longer work without script. It’s written in TypeScript, and it’s compiled by
dotnet build, just like your C# code and your SCSS.
In this lesson, you set up the tool. By the end, Kladde.Web compiles a first TypeScript file on every build, a type error stops the build, and the generated JavaScript doesn’t end up in the repository.
When a page needs script
The Kladde’s rule is: The page works without script; the script makes it more convenient. The approach is called progressive enhancement: First you build the page so that, with HTML, CSS and the server alone, it can do everything it has to be able to do. Then you lay script over it that shortens the paths.
Why so strict? Because script fails more often than you’d think:
- The file doesn’t load because the network just dropped out on the train or a filter in a company network blocks it.
- An error in a script stops it in the middle of a run, and everything after it no longer happens.
- On a slow phone, the page has long been visible, but the script isn’t running yet. What only becomes operable through script is dead in those seconds.
- Some people and some programs (search engines, accessibility tools, testing programs) read a page entirely without script.
What that looks like in practice:
| Task | Without script | More convenient with script |
|---|---|---|
| Searching contacts | a form with method="get", the server sends the filtered list |
the list filters as you type |
| Checking required fields | required on the field, and the server checks again |
nothing needed: The browser checks required itself |
| Expanding and collapsing text | <details> and <summary> |
nothing needed |
| Counting characters | maxlength limits the input |
a line says how many characters are still free |
| Passing on a link | the address is in the address bar | a “Copy link” button |
Two rows of the table need no script at all. That’s the first question before every line of TypeScript: Can HTML already do it itself?
What doesn’t exist in the Kladde: content that only a script puts on the page; links and buttons made of div elements with a click
event; forms that send only by script. And there’s no framework like React or Angular. The Kladde’s pages are created on the server,
first as HTML files, from module 2.5 on with Blazor. A script complements a finished page; it doesn’t build it.
The Kladde’s house rules sum this up in one rule: JavaScript only as TypeScript with strict, compiled in the build. At most one script
per page, no framework, and the page also works without script.