2

Slim and Haml are not an abstraction layer, they are just different (worse in my opinion) syntax for writing HTML and Ruby in the same file. ViewComponent helps you move your Ruby logic into a different file so your ERB can have fewer, simpler Ruby parts. It’s not an abstraction layer either. The reason I write Phlex is because it *is* an abstraction layer for HTML. It’s not that Phlex provides abstractions itself — it mostly doesn’t. The Phlex DSL is essentially one-to-one with HTML. But it provides a mechanism for *you* to write abstractions. Since Phlex templates are just methods and blocks, you can take any chunk of Phlex markup and extract a method. Now you have an abstraction. Want to use that chunk from somewhere else? Extract a component. You don’t have to switch between HTML and Ruby, because it’s *all* Ruby, so you can just use Ruby values, Ruby conditionals, Ruby loops. It’s completely seamless. And native Ruby types are seamlessly integrated without the need for helpers. For example, if you have a `@disabled` boolean in Ruby, you can use it like this and Phlex will handle adding/removing the `disabled` attribute based on its value true or false. input(type: "text", disabled: @disabled) Essentially Phlex makes HTML and HTML attributes *composable*. None of the other solutions do this. And if you don’t realise what that means, you won’t get any value from Phlex. Like if you use Phlex the same way you’d use ERB it won’t be much better than ERB. So while Phlex does provide the same value that ViewComponent provides while also letting you write your template in the same file, it’s more than that. It lets you write templates that are logical compositions of small pieces defined as methods. Beyond this it lets you make components that expose this composability as a public interface. For example, you get this interface by simply defining a `Nav` class with a public method `item`. Nav do |n| n.item(href: "/") { "Home" } n.item(href: "/help") { "Help" } end Now your other code doesn’t need to know about how the nav is implemented. It consumes the small public interface that the component exposed. There is nothing like this in the other tools. Yeah, you can make it happen in ViewComponent but with tons more code and files.

Share this Page