zambal
Hi all,
I just published the first public release of Vaux, a component based and html aware templating library. Recently, I found myself looking for an Elixir templating library, because I wanted to experiment with htmx, a javascript library that I’m sure most here already know about. But for those who don’t, htmx in a nutshell extends html in such a way that it lets you add interactivity and partial page loads to a otherwise static web page. In some way, I think it tries to solve the same problem as Phoenix LiveView, but being purely a client side library, its approach is quite different.
I really like the concept of HEEx templates and Phoenix components, but I guess mostly because of my background that involves mostly dabbling with backend systems, working directly with a simple http server like Bandit or Cowboy has my preference. While I think you techically can just use function components and ignore all other stuff, including Phoenix LiveView in a project feels a bit heavy handed if all you need is html templating. So I thought there’s still some room to fill in the Elixir ecosystem and started building a framework agnostic, html aware templating library.
Originally, my main inspiration for Vaux was Vue templates, as I have used Vue through the years quite a lot and like its simple template syntax. However, I appreciate good editor integration with at least sensible coloring of syntax, so I eventually decided to borrow some syntax from HEEx and take advantage from it’s excellent editor support.
I guess the end result looks a lot like HEEx templates, mixed up with some Vue templating concepts and a couple ideas of my own. Just like HEEx templates,most work is being done at compile time, so I expect performance to be at least in the same order of magnitude. Great care has been taken to provide sensible warnings or errors with correct line number information at compile time in order to catch typos as soon as possible.
The library still needs some work, but should already be pretty usable in its current state. I think the most important functionality that is missing currently is some mechanic for allowing fallthrough attributes (vue lingo, I think this is managed in Phoenix with global attributes) and dealing with style and script elements. style and script elements are currently handled just like any other type of element, but the {...} interpolation syntax doesn’t work well in these contexts.
Hope some find this useful too and would love to have some feedback!
Where Next?
Trending in Announcing
Other Trending Topics
Latest on Elixir Forum
Sponsor Spotlight
Phoenix, LiveView, multimedia pipelines, distributed systems. 400 engineers, Elixir since 2017. Available for hire.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #blog-post
- #phoenix_html
- #iex
- #graphql
- #ai
- #genstage
- #elixirconf-us
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Practical resources that improve the lives of professional developers.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
First 5 of 5 Posts
LostKobrakai
I’d suggest using a different sigil to heex. This will be picked up by the heex formatter, which will then complain that it cannot format the contents, so people won’t be able to use heex and vaux in the same project while using the formatter.
zambal
Thanks for the feedback. Vaux currently requires
vauxas sigil modifier to differentiate itself from HEEx templates, but I guess this isn’t picked up by the formatter. Do you have a suggestion that let Vaux leverage HEEx template editor support, without tripping up formatters?LostKobrakai
Ah, I didn’t see that. Not sure if the formatter can work with that. I had the same problem with hologram though, which used to use sigil_H as well and eventually switched to sigil_HOLO with recent elixir versions supporting multi-character uppercase sigils.
zambal
I see, maybe
~HTMLwill work too if editors are only looking for~H. I take no issue in changing the sigil syntax, but I’d really like to prevent needing to add editor support myself.zambal
A new version of Vaux has been published at hex.pm that allows for variable interpolation in
scriptandstyletags. For example, this means that it’s now possible to write:More information can be found in the sigil_H/2 documentation.