surface VS phoenix_live_view

Compare surface vs phoenix_live_view and see what are their differences.

surface

A server-side rendering component library for Phoenix (by msaraiva)

phoenix_live_view

Rich, real-time user experiences with server-rendered HTML (by phoenixframework)
Our great sponsors
  • Paraxial.io - Bot detection and prevention for Elixir/Phoenix applications
  • Scout APM - Less time debugging, more time building
  • SonarLint - Deliver Cleaner and Safer Code - Right in Your IDE of Choice!
surface phoenix_live_view
6 18
1,638 4,586
2.6% 2.2%
8.8 9.7
1 day ago 2 days ago
Elixir Elixir
MIT License MIT License
The number of mentions indicates the total number of mentions that we've tracked plus the number of user suggested alternatives.
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.

surface

Posts with mentions or reviews of surface. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2021-12-26.
  • Course/Extensive tutorials for Phoenix 1.6?
    2 projects | reddit.com/r/elixir | 26 Dec 2021
    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.
  • Porting files generated by phoenix to surface
    1 project | dev.to | 27 Oct 2021
    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.
  • We Got to LiveView
    19 projects | news.ycombinator.com | 22 Sep 2021
    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

  • Phoenix 1.6.0-RC.0 Released
    3 projects | news.ycombinator.com | 27 Aug 2021
    Have you seen Surface UI? Pretty cool. Collection of LiveView components. https://surface-ui.org/
  • Surface UI – A server-side rendering component library for Phoenix
    1 project | news.ycombinator.com | 1 Apr 2021
  • Letter Square: Post Mortem
    3 projects | dev.to | 3 Mar 2021
    I also did not use "vanilla" LiveView, as I used the Surface library. This is a wrapper around LiveView that brings a whole new syntax to make the experience even more comfortable.

phoenix_live_view

Posts with mentions or reviews of phoenix_live_view. We have used some of these posts to build our list of alternatives and similar projects. The last one was on 2022-04-15.
  • Should I stop trying to learn HTML/JavaScript?
    2 projects | reddit.com/r/learnprogramming | 15 Apr 2022
    It uses JS though, as it is required to open a WS connection and change content without refreshing the page, but that looks like it is abstracted from the user. https://github.com/phoenixframework/phoenix_live_view/tree/master/priv/static
  • Mark Nottingham: Server-Sent Events, WebSockets, and HTTP
    11 projects | news.ycombinator.com | 19 Feb 2022
    > I'm not up to date with the less popular web frameworks. Which frameworks do that?

    One of them is https://github.com/phoenixframework/phoenix_live_view which is a component of Phoenix / Elixir.

    It will render your initial page over HTTP but then when you transition pages or perform actions using various functions it provides you it will send a diff of what's changed over WebSockets. These actions could be limited to only the 1 user using the site, such as clicking different links in a nav bar to transition between page A and B.

    The alternative to this is doing what other frameworks like Rails has done with Hotwire Turbo where they make these types of transitions of actions over HTTP. Turbolinks started to do this back in 2015 or whenever it came out and now more recently with Hotwire Turbo there's ways to only update a tiny area of the page (again over HTTP) but it also optionally supports using WebSockets for when you want to broadcast things to all connected clients, such as updating a counter somewhere or maybe showing a new reply on a blog post, etc..

    Laravel has Live Wire and there's also HTMX which is back-end agnostic which all use HTTP for a bulk of their behaviors to send server rendered HTML over the wire.

  • Which technologies can I use to build online chat?
    5 projects | reddit.com/r/reactjs | 7 Feb 2022
    I think Phoenix even has a templating framework for the front-end, called LiveViewer (https://github.com/phoenixframework/phoenix_live_view). And i believe it uses the built-in websockets to communicate changes on front-end to the server.
  • Phoenix LiveView, but event-sourced
    6 projects | dev.to | 16 Jan 2022
    The context: I'm building a cryptocurrency exchange application. I don't have the business chops to run an actual exchange, so this is just for fun. The application is built in Elixir, using the Commanded framework for CQRS/ES goodness, and Phoenix LiveView because it's the hot new thing that I wanted to learn.
  • How Laravel Livewire works (a deep dive)
    9 projects | news.ycombinator.com | 12 Oct 2021
    I feel that the simplicity of just building on the server and pushing the updates across the wire is where we are heading. So a lot less double up, with regards needing to write both for the server and client. Validation especially will just need to be written once.

    Although I do feel Phoenix Liveview is a better option because they implement sockets.

    Also saw this update today they will allow you to trigger javascript on the client without the sever round trip, it's one of the things people get a bit stuck understanding. Generally they think to pop open a modal or menu requires a round trip to the server but really you should be using Alpine.js or similar for such things. This new pending update remove the requirement of needing a framework like Alpine. https://github.com/phoenixframework/phoenix_live_view/pull/1...

  • Phoenix 1.6.0-RC.0 Released
    3 projects | news.ycombinator.com | 27 Aug 2021
    Slots are on the heex roadmap: https://github.com/phoenixframework/phoenix_live_view/issues...

    I chose to stick to base LiveView in my apps because it works fine (slots are nice but not essential), and I want to avoid too much API churn and learning curve for other devs on the same team. The best Surface features are being gradually refined and merged into LV. HEEx is a great example of that.

  • Using Rust with Elixir for code reuse and performance
    9 projects | dev.to | 19 Aug 2021
    What's more, Phoenix Live View has made building interactive pages simpler than ever. It often removes the need for a complex front-end framework like React or Vue and an associated API.
  • Building a Distributed Turn-Based Game System in Elixir
    8 projects | dev.to | 26 May 2021
    Many great Phoenix LiveView examples exist. They often show the ease and power of LiveView but stop at multiple browsers talking to a single web server. I wanted to go further and create a fully clustered, globally distributed, privately networked, secure application. What's more, I wanted to have fun doing it.
  • Whole stack Rust for Web Applications? Are we there yet?
    6 projects | reddit.com/r/rust | 30 Apr 2021
    Outside of Rust I know of two initiatives that deliver something similar to this one single language to deliver a web app in the front end and backend: - Elixir via live view https://github.com/phoenixframework/phoenix_live_view - Dot net languages via Blazor, usually C#
  • Finding DOM element by data-role in Phoenix LiveView testing
    1 project | dev.to | 23 Apr 2021
    Today I put together one technique I find useful for writing test. That is to use data attributes for finding HTML elements in test. The same idea can apply to JavaScripting, but I focus mainly on Phoenix LiveView testing here because that is the one I have been working on.

What are some alternatives?

When comparing surface and phoenix_live_view you can also consider the following projects:

hotwire-rails - Use Hotwire in your Ruby on Rails app

htmx - </> htmx - high power tools for HTML

Svelte - Cybernetically enhanced web apps

Blitz - ⚡️The Fullstack React Framework — built on Next.js

rust - Rust for the xtensa architecture. Built in targets for the ESP32 and ESP8266

Phoenix - Peace of mind from prototype to production

turbo - The speed of a single-page web application without having to write any JavaScript

react_phoenix - Make rendering React.js components in Phoenix easy

Elixir - Elixir is a dynamic, functional language designed for building scalable and maintainable applications

torch - A rapid admin generator for Elixir & Phoenix

django-unicorn - The magical reactive component framework for Django ✨

livewire - A full-stack framework for Laravel that takes the pain out of building dynamic UIs.