Webscript is an HTML-like Javascript syntax for defining, creating, composing and manipulating DOM elements. It is for creating web applications. It is like HTML but it is Javascript.
- It has zero dependencies.
- It is small. It's size is about 2KB.
See the Webscript Github repository.
So Why Webscript?
- Webscript is much more capable than HTML.
- Webscript is a nicer syntax than Hyperscript.
- Webscript is more flexible and capable than HTML templating languages like HTM and lit-html.
- Webscript works really well with Javasacript because Webscript is Javascript.
- No need for a compiler or special tooling.
You might not believe it or think it at first but HTML and Javascript don't go together well. They started out together and have been together so long that it might seem normal they are used together. Take a step back and think about the solutions that exist to make them work together.
JSX is a compiler on top of Javascript that puts HTML in Javascript. The many templating languages such as used by Vue and other frameworks try to put Javascript or custom programming languages into HTML.
If Javascript and HTML went together, they would just be used together. But they are not just used together. They are forced together this way and that way. They are oil and water. They don't go together.
If you think about it, it makes sense that they don't go together. They are completely different languages with different purposes. HTML is a markup language with a very specific purpose: create static documents that link to each other. Javascript is a general purpose programming language for creating software.
It is a common mistake to think that web pages are HTML. They are not. Web pages are the browser DOM, not HTML. It is possible to create web applications without any HTML by building the DOM up with Javascript. The reason this hasn't happened much is because the native way to do this in Javascript, using the function document.createElement, is terribly inelegant compared to HTML. It is true that HTML is a nice, succinct language for telling the browser what DOM elements to make. As a markup language, that's what it has to offer.
But Javascript is a dynamic and expressive language. This question should be asked: Is it possible to find within Javascript's features a declarative, succinct, clear syntax for telling the browser what DOM elements to create? The answer is, yes. And that is Webscript.
Of course, with Javascript we can go far beyond just telling the browser what DOM elements to initially create. With Javascript we can change DOM elements over time, we can make new DOM elements when the time is right, we can hide them, we can get rid of them and we can compose them in many ways. If our basic tool for creating DOM elements is Webscript, not HTML, we can just work with it, because it is Javascript.
Why Webscript? Because Javascript works best with Javascript and Webscript is Javascript.
Find out more about Webscript.
Follow me on twitter: https://twitter.com/mudgen
Top comments (5)
Thanks for your feedback about these things.
Javascript and Webscript ignore white space, so you can add whitespace if you want to.
Sorry that backticks are a pain to type on a German keyboard. They aren't hard to type on a US keyboard. One idea you might consider is adding a key binding to your programming editor to bind a different key for inserting a backtick to make it easier.
Yes, Webscript is good for making single page applications. So the same SEO optimizations for SPAs apply to SPAs that use Webscript. But Webscript can also be used to generate HTML on the server for server-side rending.
Awesome, Nick.
JSX and Webscript both seem to bridge the JS / HTML divide, but from opposite ends of the spectrum. Webscript is nice because there is no building. It's a direct path into the "mind of the browser".
Have you considered adding a TypeScript? (Or maybe you already have and I overlooked it?) This comes at a cost of introducing build tools, but adds type checking, IDE hinting and security. I think it would be more readable than JSX + TS and might be attractive to the growing TypeScript community.
If you are going pure JS with no build tools, adding a type definition only might an interesting middle ground.
Just some ideas.
When I was learning JS, DOM, etc it was a while before I realized that HTML and JS were (from the browser's perspective) the same thing. I think this is the case with many others. Maybe Webscript can help make that clearer.
Looking forward to seeing what's next!
Thanks Reilly for checking this out!
Originally I started with Typescript for developing Webscript. But Webscript is so small, 2kb without compression, that I find it doesn't really benefit from it and Typescript got in my way. I think adding a type definition is a good idea.
Yea, I hope Webscript helps people understand that webpages consist of the DOM, not HTML, and there is more than one way to build the DOM.
Why not PugJS? (Or, hyperpug)
The main reason for me is that Webscript is not a template engine.