superchris

superchris

Live-templates - connect a front-end template to a LiveState phoenix channel

live-templates is a library that allows you to drop a template into a static html website that will be connected to a LiveState phoenix channel on the backend. It eliminates the need to develop a custom element (or any other javascript) to build simple LiveState based applications. This is the very first release, so it’s early times, but it is far enough along to prove that the idea is viable and get deployed examples working. I’d love community feedback. This obviously overlaps with LiveView, but uses a somewhat different approach which makes it likely a better fit for cases such as static html websites or PWAs.

Most Liked

superchris

superchris

New version shipped as 0.4.0. Notably additions include:

  • Upgraded to Sprae 9.0.1
  • Declarative event sending eg <button :sendclick="foo"> instead of <button :onclick="sendEvent('foo'">
  • Fully worked CRUD example

Next goal: client side navigation.

superchris

superchris

Those are interesting thoughts. I’m definitely a fan of Lit, but my goal with LiveState and by extension, live-templates is to keep as close as I can to web standards and avoid coupling to any particular implementation (eg Lit) as much as I can. This influenced my thoughts on template implementation as well. Though they are still developing, there are a couple of standards, template instantiation and DOM parts, that are making their way through the standards process and which the template library I chose is based on. This should make it pretty straightforward to swap out if I needed to, and to ditch altogether if templating makes it all the way into the browser.

As far as what you are talking about with heex rendering into lit element templates, this sounds a bit like the idea I was exploring that initially led me to create LiveState in the first place. I initially attempted to get Liveview to render into a custom element. I got some basic examples working with a greatly hacked version of Liveview, but it quickly became clear that it would require something close to a rewrite of Liveview for it to work. In a way, if you squint really hard, you can think of live-template as the very beginning of a possible reimagining or reimplemenation of Liveview, though it is much too soon to say how far it will get.

All that said though, I would absolutely welcome contributions. It is also quite possible I didn’t understand all your ideas, and sometimes seeing things in code makes is easier (at least for me) to grok than words.

superchris

superchris

Oh, and on the subject of PWA: on the next examples I plan to build is a PWA, I’ll add that to the README when I do.

chasers

chasers

@superchris this is very cool!

superchris

superchris

This was my first thought as well, but unfortunately it doesn’t quite turn out to be as simple as that. What I set out to do (and others have as well) is to allow an html author to define their own template in html. In order for this to work, you need to somehow grab the template out of html and evaluate it. This would require you dynamically build a template literal at runtime, which is sadly not a thing AFAIK.

As I mentioned, others have been working on this, including Justin Fagnani one of the main Lit contributors. He came up with Stampino but it has not been maintained. My first template approach was to use a forked version of Stampino. I ran into an issue I thought was with Stampino that in the end was not really a Stampino issue at all, but I had switched to templize already and just kept rolling.

For additional context, here are the Template Instantiation and DOM Parts specs. I think its likely some version of these will emerge that will be the standards based solution, for now there are several “prollyfill” implementations worth checking out.

Where Next?

Popular in Libraries Top

mhanberg
I just released the first version of Temple: an HTML DSL for Elixir and Phoenix! You can read this blog post or the docs for more info...
New
tmbb
I’ve been working on two packages (not on hex.pm yet) to build admin interfaces for phoenix apps: bureaucrat - which contains a bunch ...
New
Crowdhailer
Raxx is an alternative to Plug and is inspired by projects such as Rack(Ruby) and Ring(Clojure). 1.0-rc.1 is now available. To use it re...
New
mbuhot
Leverage Open Api 3.0 (Swagger) to document, test, validate and explore your Plug and Phoenix APIs. Generate and serve a JSON Open API ...
New
archan937
It is a well-know topic within the Elixir community: “To mock or not to mock? :)” Every alchemist probably has his / her own opinion con...
New
danschultzer
In short Plug n’ play OAuth 2.0 provider library. Just set up a resource owner schema with Ecto (your user schema), install the dependen...
New
tmbb
I’ve published the first version of my Makeup library. It’s a syntax highlighter for Elixir in the spirit of Pygments, Currently it highl...
New
martinthenth
Hello everybody :wave: Recently, some of my colleagues talked about database ids and uuids and their problems, and I remembered the pain...
New
bryanjos
Hi, I just published version 0.23.0 of Elixirscript. Most of the changes are around JavaScript interop now that Elixirscript uses the ...
New
versilov
Could not wait for the missing Elixir ML libraries to appear, so, I wrote one myself, taking https://github.com/sdwolfz/exlearn as a foun...
New

Other popular topics Top

rms.mrcs
Hi, I need to transform a list of numbers into a map where the keys are the indexes and the values are the original values of the list....
New
sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
977 41022 311
New
joaquinalcerro
Hi there, I am working with Ecto-Postgresql and I need to call all of the records from a specific table but the table has 40,000 record...
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New
itssasanka
Hi all, Trying to get some more clarity over utc_datetime and naive_datetime for Ecto: https://hexdocs.pm/ecto/Ecto.Schema.html#module-...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
electic
Hi, I am new to Elixir. I am trying to use the DateTime component to insert a date into MySQL however the there seems to be no way to fo...
New
chrisalley
ExUnit now has describe blocks which is a welcome addition coming from RSpec. In the docs, it states that nested hierarchies of describe ...
New
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New
9mm
I am constructing a JSON object (map) and I need to conditionally set a field. I’m trying to write proper elixir-way code… and I’m at a l...
New

Sub Categories:

We're in Beta

About us Mission Statement