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
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
-
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
-
Some of my “forms” are not really forms at all, but “backend structures for the UI” with input element here and there
-
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
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
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?
Popular in Announcing
Other popular topics
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
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance









