Project structure // UI components

Hello,

After coding with ruby on rails 2005-2010 I tried to have fun with web development again by trying to use elixir/phoenix 2016 and again 2018. Both times I lost interest after some time. Not that I switched technology-wise, I completely ditched web development at all, thinking that its still not as advanced as I want it to be.

Recently I realized why (at least the main reason).

First, I really think that phoenix is great. Creating a small web application is done pretty quickly. But maintaining and extending the project is a hard task for me - it gets cumbersome as the project grows.

I want to give you an example: When I need to display the contents of a database table on a web page in a so called data table I create the necessary files and functions and declare all the html+css stuff (and maybe include an additional js framework for some fancy behaviour). That’s simple.

But: In one of the next features I certainly want to display another table that should have exactly the same look & feel. So I am reusing what I created before and do a lot of copy & paste. After a few features I end up having a lot of files that all contain almost the same lines of code, just with small differences. This is the opposite of DRY. And whenever I leave my project for a few days, I have a hard time to recall what happens where and each time I want to change the look & feel I have to change it in several files (of course I always miss some).

While I structure and refactor my elixir code by using functions, my frontend stuff just bloats.

What I need to re-enjoy web development is to be able to create a UI component once and easily be able to reuse it as often as I wish. I just want to drop in a data table and tell it the data source it should display and have some options that determine its behaviour (sortable columns, multi or single selection, paging or infinite scrolling, filters etc.).

Is it just me that this is extremely fatiguing? Or are there already solutions/techniques that I just missed?

[Through the last months I came across many concepts that maybe are what I am looking for, but I just cannot put them in relation and neither appear to be simple to use / have a shallow learning curve:
Web Components
Polymer
VUE/React
Material Components
Phoenix.(Live)Component
Surface
Maybe someone wants to shed some light on these]

3 Likes

I’m a very happy user of Surface. My app is a classic server-side rendered Phoenix app (I only use “dead views” - no LiveView stuff). Here’s the markup for a message template index page:

<App conn={@conn} active_link="Templates">
  <PageTitle text="Message templates">
    <PageTitleLink
      type="primary"
      to={Routes.template_path(@conn, :new)}
      icon="plus"
      label="New"
    />
  </PageTitle>

  <div class="flex flex-wrap p-8 gap-8">
    {#for template <- @templates}
      <div class="flex-shrink-0">
        <TemplateCard conn={@conn} template={template} />
      </div>
    {/for}
  </div>
</App>

Here’s a breakdown of the components:

  • App: the application shell with the sidebar nav; highlights the active link,
  • PageTitle: top bar with the title of the page, optional links and tabbed nav,
  • PageTitleLink: CTA button or a back button,
  • TemplateCard: a clickable card with a preview button.

Bringing component system from SPA frameworks is a game changer for me.

I love Tailwind, but my main gripe with it is that it makes the HTML very hard to read (e.g. plain unstyled form vs fully styled form). Components allow me to encapsulate all the markup that only changes the look.

3 Likes

In addition to the libraries like Surface, Temple, and LiveComponents, you can create your own components using the plain old render/3 function.

From inside your main template, you can render another template:

web/controllers/fruit_controller.ex:

defmodule Web.FruitController do
  use Web, :controller

  def index(conn, _params) do
    render(conn, fruit: GroceryStore.all_fruit())
  end
end

web/templates/fruit/index.html.slim (slime):

h1 Fruit

= render Web.TableView, "table.html", id: "all-fruit", columns: [{"Name", :name}, [{"Rating", :rating}], data: @fruit

web/views/table_view.ex:

defmodule Web.TableView do
  use Web, :view
end

web/templates/table/table.html.slim:

table id=@id
  thead
    tr
      = for {title, _key} <- @columns do
        th= title

  tbody
    = for datum <- @data do
      tr do
        = for {_title, key} <- @columns do
          td= datum[key]

assets/css/app.sass:

@import "components"

table#all-fruit
  @include data-table($padding: 1rem)

assets/css/components.sass:

@mixin data-table($padding: 0.5rem)
  td, th
    font-size: 14px
    padding: $padding

  th
    background-color: blue

So now you’ve got a reusable, parameterized table component to render HTML, and a reusable, parameterized Sass function to render CSS. That should give you a nice combination of reuse and customizability.

3 Likes

This seems like a perfect use for LiveComponents. You can simply replace the “small differences” with assigns, then call that component in several places, each with different assigns as needed.

I just cannot put them in relation and neither appear to be simple to use / have a shallow learning curve

I urge you to give LiveComponents another shot. They are really quite simple once you get the hang of them, and I think they would make your development experience much more pleasant.

2 Likes

Au contraire, it absolutely is not just you. That is in fact the very reason I willingly gave up my “full stack dev” title some 6 or so years ago. It is soul-crushing to reinvent the same things all the time, over and ever again, always with the ever-to-elusive “only 1% different from the previous file or project” mysterious beast that we can’t seem to ever be able to catch, cage and tame forever.

I’ll not comment on concrete solutions because I don’t have them – I am out of the loop for years. I grumble when I have to do anything more than create / edit 20+ lines of .html.eex files. I just hate it. I can do it just fine but I hate it. It got so bad that as recently as ~7 weeks ago when I had a simple task of adding a few controller actions with views and templates I completely froze and it took me 5 days. Not one of my proudest moments for sure.

The mere fact that we can’t manipulate the glue code of our project – meaning 99% of the Phoenix code in our projects – using commands on the terminal is to me insulting. I know we have generators but they only work one way; sure you’ll generate your stuff but do you have a command like mix phx.controller.parameter.add or mix phx.controller.parameter.change_type (which will create/update a boilerplate validation) or such? Of course not.

This is not bashing Phoenix at all. Phoenix seems to be, in my anecdotal and limited experience, one of the best web frameworks out there. This is more a rant against the entire industry…

IMO most of the web glue code – again, Phoenix controllers, views, templates, helpers, but also Ecto schema modules and even migrations – should be editable with special-tailored terminal commands. Our code editors should not be involved. That’s what I’d call productive.

But… yeah. At least in the meantime many young people can get a taste of what it is to belong to the upper middle class by making money through repeating the same incancantions 500 times until they burn out. :003:

(Also, let’s be friends! :heart: You seem to have almost the same gripes as myself and you seem to approach the problem similarly as well.)

4 Likes

I’ll second Surface.
It made FE development bereable to me. I used to hate it, now I just don’t like it.

1 Like

So relatable to me as a young dev :rofl:.

On above :

  1. I hope more people are thinking this way. Is there something being worked upon on these lines?

  2. What would one need to know to make such a thing? A library ? Extension to Phoenix? Or contributing to original Phoenix project? Any leads / must-reads appreciated.

This sounds very much like GitHub - ash-project/ash: A resource based framework for building Elixir applications might be up your alley, though it seems quite API focused at the moment.

1 Like

Appreciate the diligence, thank you.

You would need a homoiconic language, i.e. manipulate code as if it’s data (gross simplification). Not many languages are such. For example, Elixir is not, and LISP is.

It’s not easy to have a context-aware program that rewrites another program. Furthermore, Elixir also doesn’t have a standard – but IMO that’s not a problem because the generated AST by the compiler is fairly stable.

I’d love working on something like this but alas, no free time and energy in the last 2 years.

So , macros in Elixir could accomplish what we are trying to achieve in Homoiconic language, right?

Just that macros might be needed to run in iex shell, rather than bash.

Also, mix might come to rescue, if it can run macros as well as tasks from terminal.

I am thinking somewhat correctly?

Not convinced it can. We need tooling that is able to analyze code. And I am not sure Elixir has that?

I don’t understand “analysing code” part. What does that mean?

Point me to a good link / book / docs ?

Probably Wrangler - Wrangler - an Erlang Refactoring Tool

1 Like

I would rather pet a live scorpion than style one more login form. I crossed my burnout threshold years ago.

Phoenix makes web development tolerable for me, but I foist off as much front-end stuff as I can these days. Why can’t I just build systems in peace?

2 Likes