surface VS phoenix_live_view

It's very impressive how expressive and flexible the compilers in the BEAMverse are. Elixir extends this rather far, and there are whole utilities such as Surface[1] that are built atop and make heavy use of custom compilers

For more germane blogging and ssg in elixir/beam, I use and recommend the excellent tableau generator[2], by Mitch Hanberg. I use it to power my own personal site[3], and publish the source[4] for anyone who is interested.

[1] https://surface-ui.org/

[2] https://github.com/elixir-tools/tableau

[3] https://pdx.su

[4] https://github.com/paradox460/pdx.su

I should have been more clear that my intent was to create/use a compiler for some kind of component syntax. There are lots of them, from Surface (Elixir), Blade (PHP/Laravel), and JSX (React, Vue, Etc)

There I learned more deeply about LiveView and Surface UI.

I think Surface is the ideal candidate for this. But it doesn’t have the components you are looking for but you can build anything with it. Hopefully, in future we can have set of headless components built using Surface 🤞

I have worked with Phoenix LiveView and Surface-UI for about a year; I would like to share some of the things I learned the hard way.

This is just an idea, but what about implementing using Phoenix.View(via use MyAppWeb, :view in your module)? Then assign I think has access to @conn. Then maybe work some magic to still allow Phoenix.Component syntax - but at this point, this is something I believe is a flow that might be in development. Try investigating / asking in Surface, because that is a lot more similar to React in its approach. In fact, I think Surface is where more aggressive features are pushed out, and ironed-out features get included into Phoenix. This was the case for Phoenix.Component, and HEEX.

This post is intended to get you started with surface provided components. I provided the original code and surface versions so you can compare the differences yourself without installing anything. After installing surface following the installation guide https://surface-ui.org/getting_started add surface_bulma in your mix.exs, this will allow you to use the table component.

I totally get the "Am I doing this the right way?" feeling, especially coming from Rails where everything was so opinionated and wanting to stay idiomatic.

Phoenix, while it does have opinions, is far less opinionated in the sense that it doesn't do it darndest to force you into certain conventions (for example, if your module name doesn't match your file name, Phoenix won't complain). Its generators do try and push you toward using good DDD practices (which is my opinion is a GREAT thing), but of course the generators are completely optional.

I don't have experience writing large LiveView apps but I would say that if you are familiar with any component-based frameworks (like React), I would take a look at SurfaceUI[1]. It simplifies a few "gotchas" in LiveView (though I would say they are very minor gotchas and worth learning about at some point) and gives you a component-rendering syntax more like React. Once you get going, you'll learn that LiveView doesn't have all the headaches that come with bigger React apps (like having to memoize functions or comparing props to avoid a re-render and whatnot). The recent release candidate for Phoenix 1.6 has made strides for a cleaner component syntax, but if you're having trouble with LiveView, Surface might bring some familiarity.

[1] https://github.com/surface-ui/surface

Have you seen Surface UI? Pretty cool. Collection of LiveView components. https://surface-ui.org/

Thanks! This kind of thing was lacking for some time, and with the HEEx engine + function components released a couple years ago, we laid the groundwork for extensible component libs, and the community has put out some great options.

We list half a dozen in the readme, with https://fluxonui.com/ being the most recent, and fully accessible. There is also one inspired by shadcn

https://github.com/phoenixframework/phoenix_live_view?tab=re...

Then there are stack-specific libraries: StimulusReflex for Rails, Phoenix LiveView, Laravel Livewire, Unicorn and Tetra for Django, Blazor for .NET, … and the list goes on.

I came across this pretty interesting library on Hacker News that tries to implement LiveView on the JVM. Link to GitHub.

Hi everyone, I just launched Podsee(https://pods.ee) for podcast listeners, lovers. You can search and listen to podcasts at Podsee. What makes it different is that you can get the AI transcript for an episode.

It started as a side project after I resigned my job one year ago. As a programmer, I love Elixir (http://elixir-lang.org/) and Phoenix LiveView(https://github.com/phoenixframework/phoenix_live_view), and want to make a product with it. So I build Podsee.

I'm planning to add more AI features to it, like summarize the episode audio, episode to comics, etc.

I'd love to invite you all to try out the product and would appreciate hearing your feedback! Thanks!

Phoenix LiveView

"HTML over the wire" generally refers to tech like [0] Liveview, [1] Hotwire, [2] LiveView, [3] Blazor, etc. They aren't about about ditching JS and more about not writing your HTML in JS (and yes, SSR).

[0] https://github.com/phoenixframework/phoenix_live_view

* https://github.com/phoenixframework/phoenix_live_view

Some of the 1.7 stuff has an alert banner that pops up when the connection is broken. I think that could really help.

However I haven't put that in our app as I have seen other issues of flakey connection reconnect issues, and I would hate to make any of those more visible with a flashing notice.

- https://github.com/phoenixframework/phoenix_live_view/issues...