x_component is a component-based HTML template library for Elixir. It uses template syntax and component-based approach similar to Vuejs. This library can replace Phoenix views/templates and phoenix_html in a Phoenix project (details).
- Declarative HTML template syntax close to Vue.
- Compile time errors and warnings.
- Type checks with dialyzer specs.
- Template code formatter.
- Inline, context-aware components.
- Smart attributes merge.
- Decorator components.
- Fast compilation and rendering.
- Optimized for Gettext/Phoenix/ElixirLS.
- Components generator task.
X components HTML rendering shows slightly better results than EEx with Phoenix.HTML.Engine . It was achieved due to safe/unsafe interpolation syntax (instead of {:safe, ...} tuples) and due to more compact HTML output with trimmed whitespaces (example). However, it shows a significantly faster rendering of nested components (templates in case of EEx) due to the inline components compilation:
Comparison:
X inline (iodata) 20.38 K
X inline (string) 14.48 K - 1.41x slower +19.99 μs
Phoenix EEx (iodata) 7.52 K - 2.71x slower +83.99 μs
Phoenix EEx (string) 6.43 K - 3.17x slower +106.39 μs
