Web components are easy now (it’s just the web)

(And back to regular programming with my humble apologies for interrupting the flow of drivellous technodetritus with trivial matters of social justice.)

I’m a web noob. I recently wrote a web app. It is a single-pagey progressivish thing and I learned much web development. Some thoughts…

One aspect I really enjoyed was using web components. You may be surprised to know I am not talking about Polymer or Angular or React or any of those shudder-inducing frameworks. They seem far too heavy, restrictive and prescriptive for me. For my web components I use a thing called Vue.js.

I don’t even use Vue how the authors recommend it. I don’t create .vue files, and run the source through some tranformer to compile these, where the compilation is just splitting and chopping files. Oh I understand the pattern. It’s not a new idea to come up with the brilliant leap that “Oh fuck it, throw the whole MVC in a single place together.” and I even agree with the premise, e.g. PyGTKHelpers does a similar thing for GTK with it’s Delegate type.

But surely that “place” should just be the HTML document and the javascripts and the css’s? I really should repeat that sentence, because I am so passionate about it.

We have ways of defining markup, for example: HTML. Pure plain HTML. Tried, tested, supported on all the browsers (last I checked).

Then we have another awesome mechanism for importing javascripts in the HTML spec. Again, all the browsers support it.

I think you can see where I am going with this. I believe that if you organize your app reasonably, with the right files in the right places, you don’t need to define new files with weird file types. Nothing new. No JSX. No transpiling. No copying or whatever.

It’s the web dammit, I should be able to start a local web server and just point my browser at it. Rollup and Browserify and Webpack (which I can’t stop calling “We B’ Pack”) seem like amazing tools, but forget that shit for my tiny app. Especially during development refresh the page → see the changes should always work.

I put my templates in my HTML file, and I load them from Javascript. That’s all. Works every time.

How? Consider:

That’s what I think it should look like. I create a template that is my component, and I ask for it a bit later by using it as a shiny new tag. Like I said. No external files, separate formats. Essentially nothing new to learn here.

Of course the component above won’t work without some accompanying Javascript, but what I learned, and what I want to make sure all not-really-into-web-development people out there know is that the amount of Javascript you really need is below, then you add your functionality to it:

Whaaaaat? Right. Just HTML and Javascript as the web intended it. And that sample would be shorter if it didn’t have state handling and dynamic content.

I’m not so naive to think that one day I won’t need to separate my work into files as it becomes unbearably complex, but I would much rather split them into new HTML, js and css files. I am pretty sure Vue has me covered, but the web platform itself certainly does. Also, I don’t mind big files at all — I have a good text editor and I know how to use it.

So what did I learn?

• I used a thing as a library. It made no assumptions about anything else in my app. Framework bad, library good.
• Ali loves the web.

Thanks for reading.