React is the world’s most popular front-end framework. It is very robust and rich in features, but that may be a little too much for smaller projects. This is where AlpineJS comes into play. It is smaller, faster, and easier to learn than React, which makes it perfect for specific purposes.
What is React?
I am sure you know perfectly well what React is, but do not skip this section just yet. I am going to use these definitions to compare React and AlpineJS, to figure out exactly what problems do they solve.
React, as Facebook puts it, is a JavaScript library for building user interfaces. This is it. React is not a framework, it is not a library for building applications or websites. It is a library to build interfaces. The rest of the features comes from both third-party libraries (like redux), first-party libraries (like react-native), or native bindings (Browser APIs or Android/IOS APIs). So for the purposes of this article, I will consider only the interface-building capabilities of React.
So, how does React build interfaces? It does so by converting JSX code into vanilla JS code (technically, the transpiler does that), using this code to build a Virtual DOM, and applying it to the actual DOM using a sophisticated reconciliation algorithm.
While this sounds confusing, this is a highly optimized process, which takes moments to complete. Moreover, with the introduction of async rendering, the performance will improve even further.
What is AlpineJS?
AlpineJS is also a library for building user interfaces. It boasts “reactive and declarative nature of big frameworks like Vue or React at a much lower cost”, but how exactly does it live up to its promise?
The secret is that AlpineJS does not use a Virtual DOM, operating entirely in the actual DOM instead. You skip the transpiling step, the rendering process, and the reconciliation algorithm altogether. I think this is a fascinating hack and am very excited about it.
Not only it is simple under the hood, but it is also very simple to use. There are only 13 directives (think props) and 5 magic properties (think hooks, but not quite). The docs for the entire library fit into its readme on Github.
Since you operate with AlpineJS from DOM, you write your logic code directly in HTML, not requiring JS files at all. This is a controversial practice, but I am still in favor of it.
Why should you choose AlpineJS?
- AlpineJS is perfect for small, lightweight projects. The most obvious example is simple UI elements, such as dropdowns, drawers, modals, and so on. Small footprint (5KB vs 34.8KB in React) and the simplicity of the library will let you move faster and keep your customers happy.
- AlpineJS can be easily integrated into any existing website/app just by importing the script. This means you can introduce client-side rendering to your legacy server-side rendering websites (ASP.NET, WordPress, etc) with little to none changes to the codebase.
- Both AlpineJS and React are designed to build interfaces, but AlpineJS does it more straightforward, in my opinion.
- You will love it. If you feel like you have been working just with React for a while and need some fresh air, give AlpineJS a shot.
Why you should not choose AlpineJS?
- You know for a fact that you are building a big, production-oriented project. AlpineJS is very fun to use, but it is not designed with large projects in mind (in fact, just the opposite).
- You need mobile support. React has React-Native, AlpineJS does not. It is that simple.
- Both AlpineJS and React are designed to build interfaces, but React can be extended to build anything (even VR experiences), while AlpineJS cannot (for now).
- You do not like to develop or learn new stuff. While React has a huge community, corporate involvement, and it was around for quite some time, AlpineJS is new on the block. It does not have a library written for everything, nor a tutorial explaining how to solve every problem you encounter. If you develop in AlpineJS, you have to rely on yourself much more than while you develop with React.
Are there any projects written in AlpineJS?
While I could not find any, there are some cool demos written in Alpine. Here are the CodePens to check out:
Code examples
Now I will show you a few examples so you can have an idea of what the development in AlpineJS looks like.
Data binding
The task is simple: ask the user for his name and greet him. React:
AlpineJS:
Events
Here is how React handles various events:
AlpineJS:
Conditional rendering
This is how you will do conditional rendering in React:
AlpineJS:
In the examples, you could see that Alpine has fewer lines of code in every single one. This trend continues as you grow, but only to some point until React reusability features (reusable components) kick in and do their part.
How do I get started?
There are two ways to start. If you want to be comfortable trying it out and read a tutorial first, the Alpine Toolbox has an excellent digest. If you want to dive right into development and start building a project, this repo has a starter kit (think create-react-app, but for Alpine)
Closing notes
Thank you for reading, I hope you liked this article. Let me know in the comments what do you think about AlpineJS and what cool projects did you use it for!