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?

Pascal is an imperative, procedural programming language, first introduced in 1970, 50 years ago. Its most popular implementations are Turbo Pascal and Delphi. It was used to develop drivers, operating systems and desktop applications (like Photoshop). Now, you might think it is unwise to develop web applications in Pascal and compare them to the ones written in JavaScript, and you will be absolutely correct. In this article, I wanted to contrast some traits of AlpineJS and reactive programming in general, and comparing them to an ancient, imperative language makes it a lot easier. Also, it is very fun to do.

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?

Pascal implementation

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. 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.

AlpineJS implementation

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-data, x-model, @click, x-text, x-for, and 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.

Closing notes

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.

Resources

• Into to AlpineJS
• AlpineJS repo
• pas2js docs
• Pascal version repo
• AlpineJS version repo