hubertlepicki

hubertlepicki

Spike - a library that helps you build stateul, server-memory backed forms in Elixir (LiveView / Surface UI)

I have published a library, extracted from one of the closed-source apps, that may help you build complex form without the use of Ecto/changesets.

The library came to existence from the difficulty of creating big, often deeply nested forms, where validations of form fields depend on values of other fields, including fields in children, parent or sibling changesets.

The library consists of 3 parts:
Spike - core library, allows for form creation and manipulation
Spike.LiveView - LiveView bindings
Spike.Surface - Surface UI bindings

A good starting point, if you’re interested how it works, is having a look at my example application, which provides direct links to sources and documentation for each of the individual libraries.

Feedback very much welcome.

Most Liked

hubertlepicki

hubertlepicki

Good question, and not one I was contemplating conciously. I don’t know if it fits my use case. I don’t want to submit whole forms, the idea is to submit individual fields. So, as it is now, each input sends spike-form-event:set-value to the backend, which updates only one form field. The form, as a whole, lives on the server, on the client it’s just a bunch of individual inputs.

I wasn’t making a conscious decision not to use Phoenix.HTML.Form but there are several factors why I figured focusing on individual fields rather than one HTML element

  1. I can spread the inputs / controls throughout the page, not worrying about nesting HTML form tags or even validity of HTML, mixing parent, children and even unrelated forms together

  2. Some of my “forms” are not really forms at all, but “backend structures for the UI” with input element here and there

  3. Changing / submitting the form doesn’t require the whole form to be submitted. Only changed field is submitted to the backend. I guess this could even be improved by just sending diff. I need to look into that as we do indeed have some long text inputs that could use an improvement. But sending one of them, rather than 3, is already an improvement. We don’t yet do that, but we’re looking into collaboration of multiple users on the same form, I think syncing individual inputs rather than whole edits of whole forms is going to be easier.

With 3) there is a possible issue of race condition where some input wasn’t synced yet and user hits “Save”, but I am working this around for now with a slight delay on the “Submit” button and users haven’t reported problems. Something to consider.

LostKobrakai

LostKobrakai

I’d be curious why you didn’t implement Phoenix.HTML.Form to be able to use the existing phoenix helpers to build the markup, just powered by a different system beneight.

Eiji

Eiji

The Spike readme file does not have defined elixir as a code language after ```, so on github it does not have syntax highlight.

How about making 2nd argument of Spike.append/4 and Spike.update/3 optional?

For example Instead of:

  @doc false
  def append(%{ref: ref} = struct, ref, field, params) do
    append(struct, field, params)
  end

  @doc false
  def append(struct, ref, field, params) do
    append_embeds(struct, ref, field, params, embeds(struct))
  end

You could have:

  @doc false
  def append(struct, ref \\ nil, field, params)
  def append(struct, nil, field, params) do
    append(struct, field, params)
  end

  @doc false
  def append(struct, ref, field, params) do
    append_embeds(struct, ref, field, params, embeds(struct))
  end

Do you plan any support for i18n error messages? Just returning %{field_name: "spike.validations.acceptance"} as a result of an extra function would help a lot I think. Also equivalent of Ecto.Changeset.validations/1 would be amazing.

Do you plan to support custom types (like Ecto.Type), so developers does not need to validates multiple times?

Do you have plans for optional ecto support in future creating for example by spike_ecto?

Where Next?

Popular in Announcing Top

tmbb
PhoenixWS - Websockets over Phoenix Channels Source code on Github here: GitHub - tmbb/phoenix_ws: Websockets implemented over Phoenix Ch...
New
ityonemo
Currently just starting out on a new mini-project - getting zig NIFs to run in elixir. https://github.com/ityonemo/zigler The idea here...
New
josevalim
Hi everyone, We would like to announce that Plataformatec is working on a new MySQL driver called MyXQL. Our goal is to eventually integ...
New
Crowdhailer
The latest release of Ace (0.10.0) includes serving content over HTTP/2. I have started writing a webserver to teach my self more about...
New
pkrawat1
Presenting Aviacommerce, open source e-commerce platform in Elixir Aviacommerce is an open source e-commerce platform in Elixir. We at...
New
mtrudel
Bandit is an HTTP server for Plug and WebSock apps. Bandit is written entirely in Elixir and is built atop Thousand Island. It can serve...
New
alisinabh
Hey everyone i’ve developed a library for Jalaali calendar for elixir which supports converting Gregorian dates to Jalaali and vice vers...
New
Hal9000
Here is my first stab at this. README pasted below. https://github.com/Hal9000/elixir_random Comments and critiques are welcome. Thank...
New
trisolaran
Hi! :waving_hand: I would like to present LiveSelect, a little library that I wrote to easily add a dynamic selection input to your LV f...
198 10858 107
New
New

Other popular topics Top

sen
Hi All, I set a environment variables in dev.exs , like below code. when i start server, how can i set the ${enable} value? thanks. d...
New
sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
985 42920 311
New
mcarvalho
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
chrismccord
This release brings a number of exciting features, including integration with the new Phoenix LiveDashboard and Phoenix LiveView. There h...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
saif
Hello everyone, Long time lurker first time poster here. I’ve recently begun working on Elixir full-time again! :raised_hands: It’s been...
New
hariharasudhan94
Lets say I have map like this fetching from my database %{"_id" => #BSON.ObjectId<58eb1a7a9ad169198c3dXXXX>, "email" => ...
New

Latest on Elixir Forum

We're in Beta

About us Mission Statement