AlpineJS is quickly gaining traction, and I wanted to see what is it like to use it. To have something to compare it with, I developed the same app in AlpineJS and Pascal (yes, this is not a typo).
What is AlpineJS?
AlpineJS is a minimal declarative and reactive UI framework. Is has a very low overhead, is very fast and small, and perfect for embedded or lightweight applications. If you have not heard about AlpineJS before, I suggest you check out this article first.
What is Pascal?
The end result
We will develop a simple TODO app that allows you to add tasks to the list and mark them as completed. I try to keep things as simple as possible, as neither Pascal nor AlpineJS were developed with complex web apps in mind. By the way, can you guess which one is displayed on the screenshot above?
To do it, I used pas2js, a Pascal -> ES2015 compiler. It produces correct JS code from Pascal sources and provides libraries for JS/Pascal interop, as well as exposes the browser API. I will not go into implementation detail, as this article is not a tutorial in Pascal and I do not think you want to learn it. Here is the source code:
index.html has the source code for the webpage that loads
Todo.js is the compiled
Todo.pas. I also used Bootstrap 4 to simplify styling. To see it in action, clone the repo or view the live version.
The Pascal code I wrote is very far from ideal and is barely optimized. What it does have, though, is type safety. Additionally, unlike in Typescript, type safety is guaranteed at compile time and run time.
Here is the code listing:
You can see that AlpineJS lets us define the business logic directly in HTML. Also, there is no compilation/transpiling phase as no special syntax is used. All AlpineJS does is add 13 custom attributes to HTML elements and 5 global variables. To see it in action, clone the repo or view the live version.
Some of the attributes that you can see in the code are
x-bind. For those who work with AngularJS and/or Vue, this should look familiar to you. For more info, you can refer to AlpineJS docs, it is really short.
What did I learn
That the solution to every problem out there is Pascal. Just kidding. I really liked AlpineJS and started to really appreciate reactive/declarative programming, as they really solve the UI problem way better than imperative/procedural solutions. This does not mean that it is a one-size-fits-all tool, though. There always will be cases to use both and a good software developer should be able to tell one from another.
You might also be surprised to learn that the Pascal version was faster. The load time was roughly 270ms for the Pascal version and 350ms for the AlpineJS one. The payload size was the same at 7KB, so I am guessing that AlpineJS does more work under the hood.
Thank you for reading, I hope you found this article interesting. Let me know in the comments if you would like me to explain in greater detail the Pascal implementation or suggest another ancient/esoteric programming language.