Components organisation: UI vs business components

[edouard-per-angusta]

Hi there! I've searched but couldn't find any suitable answer.

How do you organise your components so you can easily distinguish components by type?

• UI components: Button, Breadcrumb... (application agnostic)
• model-related components: User Card, Project Planning...
• concern-related components (shared between models): for example a Positionable List component usable by any model including the Positionable concern (with a position integer attribute).

We've tried to split components in dedicated directories but I'm not sure this is the best way to handle them:

- app
  - components
    - ui
      - breadcrumb
      - button
      breadcrumb.rb
      button.rb
    - models
      - user
        - card 
        card.rb
      - project
        - planning
        planning.rb
    - concerns
      - positionable
        - list
        list.rb

What do you do on your projects?

[boardfish]

Over at @raisedevs, we're rolling Atomic Design. We currently aim to have all five levels of Atomic Design covered by components, with a module namespace for each - #618 ought to make it easier to do that once it's solved.

There are some components that aren't really designed to be reused, so in those cases, they get namespaced under the view they're used in.

I appreciate the idea of concern-related components, but I don't see an obvious place that they'd play into this. I suppose they'd be molecules, most often.

[edouard-per-angusta]

I've read about atomic design a long time ago. Time to read it again then 😛

[boardfish]

By the way, Rails views and layouts are already the pages and templates layers of Atomic Design - but you'll probably want to replace both of those with components for full encapsulation.

[jrochkind]

Does anyone have a good demonstration example of replacing Rails layouts with view components? I am not sure if I understand the best way to do that.

[boardfish]

All you need for a layout component is to specify the content slot, e.g. <div><%= content %></div> in the most minimal case.

If you want to entirely replace layouts, you'll need to render with the layout components you make every time. Right now, that's unwieldy, but I think there was some discussion in #618 about how components can go on to supersede ordinary views at all levels. At present, I'm rendering the layout components from within Action View layouts.

It may still be helpful to make a reusable root layout component that just provides your assets, then as many visual layouts as you need that are based on that, especially if you have things like landing pages without footers or navbars.

[jrochkind]

Thanks, I think I understand <div><%= content %></div>, but then to render using the component, you actually have to do:

render LayoutComponent.new do
    IndividualComponent.new
end

Every time? In addition to having to repeat this, it's a little bit "backwards" from how Rails conceptualizes it, putting the LayoutComponent center-stage, and with the actual "main" component as an argument to it -- "please render the layout component, oh and have it wrap an IndividualComponent", as opposed to rails' render "individual_component", layout: "layout_component" which centers the "main" component "Please render the individual component, oh and wrap it in a layout component please".

I may just open up a new Q&A for this, probably shouldn't hijack this one. It's something I've been trying to figure out as I convert one of my apps more fully to ViewComponent. Including with regard to rails "partial layouts".

[joelhawksley]

https://viewcomponent.org/best_practices.html#two-types-of-viewcomponents is our official guidance on this topic ❤️