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?

egze

egze

That looks super nice. I’m curious how you would build a form, where the structure is provided at runtime. My common use-case lately is receiving a JSON-Schema and rendering a form dynamically.

Similar to this: GitHub - json-editor/json-editor: JSON Schema Based Editor

hubertlepicki

hubertlepicki

Answering your questions,

  1. Spike.append/update default param is great idea, opened an issue and is now on my todo list.
    Make 2nd argument for Spike.update and Spike.append optional · Issue #6 · hubertlepicki/spike · GitHub

  2. I18n great idea, opened issue
    Support gettext for error messages · Issue #2 · hubertlepicki/spike · GitHub

  3. The casting & validations are something I need to rethink. This has been put together very quickly to make it work, and uses Vex and Tarams libraries. Tarams already steals code from Ecto, I believe, so you can define own types. But I do need to rethink both of these decisions in long term.

  4. spike_ecto no, the way I use these forms are entirely in-memory and then, after form is “valid” I feed the valid form to a workflow that performs some actions. Doing ecto inserts / updates / removes manually does not bind the database schema to UI, which I think is an antipattern :slight_smile:

I suspect my main focus shortly will be the performance improvements Improve performance of very large forms · Issue #1 · hubertlepicki/spike · GitHub It’s not a big problem in the app I use it in, as the “large” forms maybe have dozens of child records but there is no good reason it shouldn’t support thousand or more child forms. Currently the updates are doing very naive walkthrough of the graph and this can be and should be improved.

Where Next?

Popular in Libraries Top

oltarasenko
Dear Elixir community, After a year of development, bug fixes, and improvements, we are proudly ready to share the release of Crawly 0.1...
New
seancribbs
Today I released a new dialyzer Mix task as the dialyzex package! At the time we started writing this task, the existing dialyzer integra...
New
woylie
I released Doggo, a collection of unstyled Phoenix components. Features Unstyled Phoenix components. Storybook that can be added to...
New
markmark206
simple_feature_flags is a tiny package that lets you turn features on or off based on which environment (e.g. localhost, staging, product...
New
nikokozak
Hello all, I’ve been working on Svonix - a library for quickly integrating Svelte components into Phoenix views. It’s a much-needed succ...
New
mindok
What is ContEx? A pure Elixir server-side data plotting/charting library outputting SVG. It has nice barcharts in particular and works g...
New
New
mbuhot
EctoJob A transactional job queue built with Ecto, PostgreSQL and GenStage Available on Hex.pm: ecto_job | Hex Docs: API Reference — ec...
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
New

Other popular topics Top

senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New
Tee
can someone please explain to me how Enum.reduce works with maps
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
hariharasudhan94
I would like to know what is the best IDE for elixir development?
New
qwerescape
Is there a way to get the call stack or stack trace at any point in the code? Not from exceptions, but an expression that returns how the...
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
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
belgoros
I’m not a pro in using Regex and can’t figure out why the following behaviour happens, especially if we take into account the difference ...
New
vrod
I am using the Starship cross-shell prompt – it seems pretty nice, but I get some errors: [WARN] - (starship::utils): Executing command ...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New

Sub Categories:

We're in Beta

About us Mission Statement