I have recently started to learn about how to build web pages in a modern javascript everywhere kind environment. This is what I have found.

So I have recently got very excited about cellular automata and all of the weird questions they pose. To be able to investigate this, I wanted to make something that is accessable to as many people as possible, so making a web-app that would allow people to play around with these worlds sounded like a good Idea.

The fact that there was a rust tutorial on building 'Conways Game of Life' seemed like an utter coincidence, as it essentially built exactly the code that I would have built anyway, just in such a way that it would run on a webpage using wasm along with other web-ish things.

So I really kind of like wasm, because it gives me a pretty high performance and simple virtual machine in every browser that runs computationally intensive code fast. It also get's access to the users GPU and rust supports that via a wasm compatible library called wgpu. So I could use my existing website to collect my thoughts and notes about my experiments and then actually just ship code to whoever was viewing that site that would be able to execute the experiment that I was talking about right in front of them.

Now if there is anything that might be a powerful way to communicate an insight or an observation to someone, then actually doing the experiment right in front of them is definitely high up that list. If I however want to do this, then I want to do it in a privacy preserving and minimal way. Yes I ship javascript, but at least I would be shipping all of it from one machine and not using a CDN (something I am currently doing due to a lack of skill in this respect). I'd also not collect any user data and simply ship a program to the browser for it to run it.

Now to do that, I need to integrate everything with the static HTML that I am producing using my current static site generator zola, but I have no Idea how to. I noticed that the rust uses something called webpack to 'build' the application, meaning somehow integrating the wasm code generated by the rust compiler with the javascript code that has all the fancy api and DOM access that is needed to actually get the browser to render anything.

After spending the last two days working through the webpack tutorial (i think I have never written this much javascript before) I am slowly understanding how modern web applications are built and how the people think that build them. I have made some observations:

  • Code reuse is a thing: everything has dependencies on the one or other node package. Also secretly microsoft runs the internet as they run the repositories behind node (and github) which in turn is where all of the code comes from that runs on/with the internet.
  • Compilers, compilers, compilers: It seems like javascript was not the best language ever designed, also due to the shear size of the developer community and variety of coding styles, there are many tools to help with all kinds of things, also many different tools that do different things. The key to understanding what they do is that essentially all of these tools are some sort of transpiler that takes code that includes some extra information like typescript and transpiles it into plain javascript before sending it off to the browser.
  • Browser compatibility is annoying: Due to a pretty wide variety of browsers, a lot of work may be needed to allow code to run on multiple different browsers. This work is encapsulated as polyfill libraries, but can also technically be done by transpiling the javascript from one API to a different one (assuming that the features are the same). This is especially true, when one consideres the wide variety of browser-versions that exist in the wild.
  • Stuff that is not needed on the webpage, should not be sent to the client, as that would waste unnecessary bandwidth. Sure for a small page that might not mattre but for sites like facebook, every byte that does not need to be sent is valuable. This is why this code is minified meaning, that the code is compiled such that it is valid, but uses the shortest representation possible. This shortens variable names, removes unnecessary whitespace and so on.
  • Websites are designed by teams of people, some work on the HTML and the styling, some other people work on the functionality instead. This all needs to be combined into a set of files that is eventually sent to the client. This means that people need a way to organize code over various organizational units and a standardized way of combining everything.

Doing all the above by hand is definitely possible but unpractical in the best of circumstances. Especially looking at the last point simply shouts build system at me. And with a build system we tend to get a package manager. This time we are transpiling and bundling instead of compiling to machine code (even though that also might be called transpiling by the more theoretical linguist). This is where tools like babel, webpack and the like come in to play. They are the compiler and build system of the modern web application. They also allow non javascript code to be written as long as it can be compiled to javascript, allowing developers to program in their favorite dialect/programming language as long as a js compiler exists for it. There are other tools out there but these seem like fairly popular choices.

In the same way this transpilation can be done for javascript, it can also be done for css allowing for css-like languages to offer features like syntax for simple overrides or explicit inheritance. Stuff that may be in the newest version of CSS but definitely was not in provious versions.

With build tools like webpack it is possible to 'compile' dependencies into our output (aka static binary for all the low level hardware folks), removing the need for loading stuff over a content delivery network and reducing the dependency on outside infrastructure. It also allows for reformating the code to allow for 'chunking' which allows the code to be loaded in parallel, speading up build times.

Having learned all this, I am going to try and use webpack to build the static assets for my experiment toolkit and will hopefully have something to show for it soon. I'll need to include everything in a docker based build pipeline, as I hope that this can be served as a static site. If I get better, I may also start customizing the style of this site into something more unique.

Hope this helped with orientation. Cheers.