🏗️ Building Nex: The Dilemma of HTMX vs. LiveView - We Need Your Input!

[gofenix]

TL;DR: I am rethinking the core engine of Nex. Should I stick to the lightweight HTMX roots, or embrace the power of Phoenix LiveView?

---

Hey everyone! 👋

As I continue to build Nex (aiming to be the Next.js for Elixir), I've hit a major architectural crossroad. In the spirit of Building in Public, I want to share my internal debate with you and ask for your feedback.

🧩 Where I Am Now

Currently, Nex is designed as a micro-framework powered by Plug, Bandit, and HTMX.

I built a custom state management system (Nex.Store) using ETS to give you "stateful" components over stateless HTTP.
It works like this:

1. User clicks a button.
2. HTMX sends a POST request.
3. You update the state in ETS.
4. You manually return the new HTML fragment.

It's simple, lightweight, and efficient. But...

🤔 The Friction Point

While building apps with Nex, I noticed a mental gap.

Coming from React or Phoenix LiveView, I am used to a declarative model: "Change the state, and the UI updates automatically."

In the current Nex implementation, you have to explicitly tell the framework what HTML to send back every time.

• Update the count? -> Return the <button> fragment.
• Update the list? -> Return the <ul> fragment.

It feels a bit... manual. And syncing the client-side DOM with the server-side state can get tricky for complex UIs.

💡 The Idea: "Nex as a LiveView Wrapper"

I am considering a pivot: Making Phoenix LiveView the default engine for Nex.

Imagine Nex becoming an opinionated, zero-config wrapper around LiveView.

• You still get File-system Routing (src/pages/users/[id].ex).
• You still get Zero Setup (no router.ex, no app.js, no endpoint.ex).
• BUT, you get the full power of LiveView:
  • Real-time WebSocket connection.
  • Automatic DOM diffing (change state -> UI updates).
  • Rich ecosystem (PubSub, Uploads, Streams) out of the box.

The Trade-off

Strategy	Pros	Cons
Current (HTMX)	Lightweight, simple HTTP model, low memory usage per user.	Manual UI updates, higher latency (HTTP round-trips), less "magic".
Proposed (LiveView)	Great DX (React-like mental model), real-time by default, powerful.	Heavier dependency (phoenix), higher server memory usage (WebSockets).

🗣️ I Need Your Voice

I am building this for YOU. Which direction excites you more?

1. Keep it Simple: "Stick to HTMX! I want a lightweight alternative to Phoenix. If I wanted LiveView, I'd just use Phoenix."
2. Make it Powerful: "Yes! I love LiveView but hate the boilerplate. Give me a Next.js-like experience for LiveView!"
3. Hybrid?: "Can we have both? Let me choose per page!"

Please drop a comment below. Your feedback will directly shape the v0.3.0 release! 👇

[clsource]

I would recommend using DataStar since LiveView is already associated with Phoenix and Websockets.

So having an alternative using SSE instead of websockets is a nice option to have that could make this framework be something to consider when making new applications. SSE is a technology for realtime events available since 2006, but most solutions went with websockets.

Also consider that using SSE is not bound to Datastar, is a simple protocol so any JS frontend can be used if they follow the protocol.

• Phoenix: Framework for LiveView (Websockets)
• Nex: Framework for DataStar (SSE)

[gofenix]

Thanks for the recommendation! I'm actually researching solutions in this area right now. I'll take a deeper look at DataStar and Nex implementations and compare them with LiveView for real-world project scenarios. If you have any best practices or lessons learned from experience, I'd love to hear them!

[c4lliope]

Lines of Code in phoenixframework/phoenix_live_view

❄ calliope@chesapeake:  …/phoenix_live_view   main     23:20 
➜ loc
(cloc)> cloc --exclude-dir=node_modules,_build,deps .
     366 text files.
     351 unique files.
      16 files ignored.

github.com/AlDanial/cloc v 2.06  T=0.48 s (728.9 files/s, 258960.8 lines/s)
-------------------------------------------------------------------------------
Language                     files          blank        comment           code
-------------------------------------------------------------------------------
JavaScript                      81           1595           1470          31150
Elixir                         135           7581           5929          26852
Elixir Script                   71           5150            320          23308
JSON                             5              0              0           8539
TypeScript                      21            875            745           6349
Markdown                        20           1044              8           3263
YAML                             5             85              7            395
HTML EEx                        10              0              0             24
EEx                              3              0              0              5
-------------------------------------------------------------------------------
SUM:                           351          16330           8479          99885
-------------------------------------------------------------------------------

Lines of Code in bigskysoftware/htmx:

❄ calliope@chesapeake:  …/htmx   master     23:35 
➜ loc
(cloc)> cloc --exclude-dir=node_modules,_build,deps .
     551 text files.
     419 unique files.
     238 files ignored.

github.com/AlDanial/cloc v 2.06  T=0.37 s (1128.4 files/s, 216279.9 lines/s)
-------------------------------------------------------------------------------
Language                     files          blank        comment           code
-------------------------------------------------------------------------------
JavaScript                      87           3830           7474          32792
Markdown                       190           5278             46          16764
JSON                             3              0              0           8822
HTML                            84            178              6           2204
XML                              1              0              0            878
SVG                             39             23              4            862
CSS                              1             91             13            485
TypeScript                       2             28             30            257
Ruby                             1              4              0             44
Bourne Shell                     3             14              9             41
TOML                             4             14             20             41
CSV                              1              0              0             32
YAML                             2              3              1             18
Text                             1              1              0              4
-------------------------------------------------------------------------------
SUM:                           419           9464           7603          63244
-------------------------------------------------------------------------------

Lines of Code in starfederation/datastar:

❄ calliope@chesapeake:  …/datastar   develop   23:34 
➜ loc
(cloc)> cloc --exclude-dir=node_modules,_build,deps .
     210 text files.
     151 unique files.
      63 files ignored.

github.com/AlDanial/cloc v 2.06  T=0.11 s (1428.0 files/s, 149221.7 lines/s)
-------------------------------------------------------------------------------
Language                     files          blank        comment           code
-------------------------------------------------------------------------------
JSON                            33              0              0           8313
TypeScript                      38            376            278           3350
Markdown                        25            308              3            700
YAML                            13             79             82            434
Go                               4            100             40            429
Bourne Shell                     5             81            158            349
JavaScript                       4             33             28            144
Gradle                           2             25             15            122
XML                              4              0              1             85
DOS Batch                        1             21              2             71
Text                            15             16              0             62
Properties                       3              0             11             23
TOML                             1              3              2             15
HTML                             1              0              0             10
CSS                              1              1              0              8
SVG                              1              0              0              1
-------------------------------------------------------------------------------
SUM:                           151           1043            620          14116
-------------------------------------------------------------------------------

[c4lliope]

I'm surprised how big LiveView is - more JavaScript & Typescript lines than HTMX!

...and then ALL of datastar manages to be less than half the size of the .js from either of the others. Plus, seems like the logic (.js, .ts) of datastar only gobbles up 3500 lines! Looking good for datastar based on these numbers.