4 ms·

LiveBeats: Building a social music app with Phoenix LiveView

174 points by theanirudh 5y ago

Sinidir 5y ago
The blog site keeps randomly scrolling by itself when i ahve darkreader on.
akoutmos 5y ago
I have been using LiveView for over a year now in production applications, and I must say...it has been a breath of fresh air when developing web applications. The amount of product that you can deliver per unit time is unmatchable (in my opinion of course). The ceiling for what you can accomplish with a single tech stack (Elixir in this case) has definitely been lifted considerably. Demo applications such as this show exactly what is possible in this tech stack and should make you question whether you need to make that leap to an SPA. At some point you will possibly need to lean on an SPA tool like Vue or React, but I think that point is now further away with tools like LiveView (Elixir), Hotwire (Ruby), and Livewire (PHP).
- deleted 5y ago
  [deleted]
losvedir 5y ago
Oh, great, I'm glad to have the LiveBeats app source available to browse now! LiveView is so interesting, but also so different from what I'm used to, that I often find myself feeling like a novice again wondering where to put files and how things are supposed to work. I've been using LiveBook as a resource, but it's kind of a crazy app that might not be reflective of normal use. With esbuild and tailwind as easy to install hex libraries, and phoenix_live_view 0.17's new JS module, you can get pretty far without having to get into npm at all! And of course, if you need to use, e.g., react, you can always start using it and the full npm ecosystem like the "bad old days", but it's nice to not have to reach for it immediately. edit: Having just now watched the video, I'm pretty blown away! Very cool, and very impressive that you can do this without a full-on SPA. [0] https://github.com/fly-apps/live_beats https://github.com/fly-apps/live_beats
conradfr 5y ago
Coincidentally I also released recently a LiveView side project (that got zero traction on Show HN ;) that involves uploading audio files. People are often afraid about the latency but I must say although visitors from all over the world used it I got no feedback about any lag. I'm looking into their code how the flash is displayed as a toast notification that auto close after a while, as I kind of couldn't think of a simple solution to do that.
chrismccord 5y ago
Phoenix / LiveBeats author here – happy to answer any questions about Phoenix, LiveBeats, or Fly.io. We had a ton of fun building this. It's way more fun to see where folks are connecting to and what kind of pings they get than I would have thought. I also just put out a screencast showing how easy it is to deploy a new phoenix instance on another continent and watch it cluster together with the rest automatically: https://www.youtube.com/watch?v=JrqBudJd2YM&feature=youtu.be https://www.youtube.com/watch?v=JrqBudJd2YM&feature=youtu.be
- conradfr 5y ago
  Hi Chris, Is there any chance this[0] could be reopened? The problem I have with a JS hook is that if you do a "socket |> push_event() |> push_redirect()" the hook is actually destroyed before writing the cookie. Currently I'm using "Process.send_after(self())" to delay the redirect, it's not that ideal. [0]https://github.com/phoenixframework/phoenix_live_view/issues/313 https://github.com/phoenixframework/phoenix_live_view/issues...
- mcintyre1994 5y ago
  That video is really cool, it's so impressive how the Elixir/Phoenix/Fly combination works together. Just for context could you give an idea of what that app would cost to run at the scale you're demoing there per month? I think it's 7 DB instances + 7 DB volumes + 5 app instances + 5 app volumes at the end of that video, but not sure what instance sizes etc. you're looking at for this. Also totally random question - how come the flag for the chrismccord user is different for the two users at 9:25 https://youtu.be/JrqBudJd2YM?t=565 https://youtu.be/JrqBudJd2YM?t=565? Is that just something in your app, or is there something in Fly reporting at a different granularity? I'm not familiar with the flag in the left window so might be missing something obvious!
  - mrkurt 5y ago
    You can run LiveBeats on the smallest instances. You end up needing 2 small VMs and 2 10GB disks per region. So it costs about $6.80 per region to get started. ~$150/mo to run in all our regions with the small VMs. Most apps only need 3-6 regions to get really great performance. The interesting thing about adding regions is that it also scales capacity horizontally. The way we route traffic means we can max out a region then spillover to the next one. And the way LiveBeats uses disks, each new region adds 10GB of song storage too. Chris gets this stuff for free so he put way bigger CPUs and disks on the databases than they really need. ---Edit--- I did that wrong. It's ~$6.80 per region. Not ~$13.60 per region.
theanirudh 5y ago
Chris McCord, who built this app (and author of Phoenix) talked about it on the Thinking Elixir podcast. Excited to learn that many of the learnings that he got when building this app will make its way into Phoenix LiveView. https://podcast.thinkingelixir.com/84 https://podcast.thinkingelixir.com/84
m8s 5y ago
Man, how cool is this. I don't think people really understand just yet what fly.io is doing with Phoenix/Elixir and how it is changing deployment and scaling for multi-region, real-time apps. At this point, I'm just trying to figure out something worth building to take advantage of this technology! A couple links have been mentioned already, but I'll add two more that got me really excited about Phoenix + Fly: 1. Chris McCord talking about joining Fly.io and all the cool stuff they're working on: https://podcast.thinkingelixir.com/62 https://podcast.thinkingelixir.com/62 2. Kurt Mackey talking about Fly.io before Chris joined the company: https://podcast.thinkingelixir.com/56 https://podcast.thinkingelixir.com/56 And in case anyone is interested, this is the Phoenix Framework homepage: https://www.phoenixframework.org/ https://www.phoenixframework.org/ What a time to be a software engineer, Phoenix + Elixir + Liveview + Tailwind + Fly.io is just so, so exciting.
- jamil7 5y ago
  Very cool stuff, I haven’t properly looked into it since it was more a programmable proxy type produce a few years ago. But I’m planning on moving a smaller client’s backend off Heroku and onto fly since it would be about a third of the price to run and likely way faster but just as easy for a not-really-backend person like me.
aej 5y ago
This is really impressive. If I were tasked with building an app with a similar feature set in another language or runtime Id have to bring in a whole set of technologies and infrastructure that would make it challenging. The killer feature of Elixir (and Phoenix/LiveView) is not just that you can do all this in the same app writing backend code, its that the scalabilty characteristics of the runtime mean that you can push it really far once you are live. Im excited to read through some of the codebase as a good example of a LiveView app.
simplify 5y ago
Love the effort fly.io is putting into supporting Phoenix. Reminds me of the early Heroku days when they were focused on making Rails as easy to deploy as possible. Betting on Phoenix is definitely the right call.
- tptacek 5y ago
  It's great for us, because Elixir and Phoenix do such a good job of exercising all the features of the platform. But just to be clear, there's nothing really Elixir-specific about Fly.io! You can run pretty much anything here.
bicx 5y ago
In my previous position at a fintech, I built out our customer support toolkit in LiveView, and it worked extremely well. It's not as structured as some frameworks, so you need to spend some time deciding on your own internal architecture, but once I got going, I was very productive.
chrisweekly 5y ago
This is fantastic. Thank you for building it, open sourcing it, and sharing it here!
ewuhic 5y ago
Am I the only one who is not impressed by the LiveView? 2 things that bother me: 1) It seems most of these walk-throughs omit the process of actually designing the application architecture ("structure") so copy-pasting what had already been well-thought over feels organic; 2) Once you're faced with a more complex (production mission critical) task, the automagic starts to fade and you're back to the good ol' business logic and ui programming.
- mrkurt 5y ago
  I just built my first LiveView app in anger last month. I don't really what you mean, though. If it helps, I built my app the same way I would have built a Rails app: 1. Create a migration and some files to map DB tables back to my app 2. Create views and wire them up to the database The automagic was 80% of the automagic in Rails. LiveView isn't giving me automagic, exactly, it gives me a way to interact with the browser. One reason I may not understand what you're saying is: I didn't design my application architecture. I started with a small part and just built the rest incrementally.
- nesarkvechnep 5y ago
  Using LiveView doesn't in any way equal to writing spaghetti mixing presentation with logic.
- prophesi 5y ago
  The reason they "omit" the process of designing the app architecture is that running `mix phx.new` does that for you. Or `mix phx.gen.live` for an existing Phoenix project. Coding a LiveView Phoenix project is identical to coding a non-LiveView Phoenix project, except the module that handles rendering your pages now has additional functionality out-of-the-box.
princevegeta89 5y ago
Looks amazing
RoddaWallPro 5y ago
This is great! Thank you for building a more complete reference app. I went to visit some friends before Christmas and one night we used a website to play poker at a bar without bringing betting chips to the bar (site gives you a unique URL for a room, people can join the room & choose a name, then lets you bet from your chip count & withdraw from the total pool if you win, & displays that info "live" to everyone, super simple & convenient!). The site was cool, but buggy as hell and laggy as hell and didn't really do what I thought it should do to make it easy to play poker, and I'm gonna build one for my friends and I to use that works the way I think it should. Phoenix w/ LiveView (especially running on fly) is the _perfect_ set of tools to use to build it, and this ref app will be really helpful for me. Appreciate it!
deleted 5y ago
[deleted]
Karupan 5y ago
Before LiveView came around, I didn't realise how much I hated building a SPA for very little dynamic interaction in the UI. One can of course sprinkle jQuery/Web Components and get stuff done, but for a server rendered app, LiveView has just enough magic to make sense of it as a server rendered component. And the blog posts that the Fly team puts out on Elixir/Phoenix is just awesome. All that remains is just finding a project to try it out!

174 points by theanirudh 5y ago

The blog site keeps randomly scrolling by itself when i ahve darkreader on.

I have been using LiveView for over a year now in production applications, and I must say...it has been a breath of fresh air when developing web applications. The amount of product that you can deliver per unit time is unmatchable (in my opinion of course). The ceiling for what you can accomplish with a single tech stack (Elixir in this case) has definitely been lifted considerably. Demo applications such as this show exactly what is possible in this tech stack and should make you question whether you need to make that leap to an SPA. At some point you will possibly need to lean on an SPA tool like Vue or React, but I think that point is now further away with tools like LiveView (Elixir), Hotwire (Ruby), and Livewire (PHP).

deleted 5y ago
[deleted]

losvedir 5y ago

Oh, great, I'm glad to have the LiveBeats app source available to browse now! LiveView is so interesting, but also so different from what I'm used to, that I often find myself feeling like a novice again wondering where to put files and how things are supposed to work. I've been using LiveBook as a resource, but it's kind of a crazy app that might not be reflective of normal use. With esbuild and tailwind as easy to install hex libraries, and phoenix_live_view 0.17's new JS module, you can get pretty far without having to get into npm at all! And of course, if you need to use, e.g., react, you can always start using it and the full npm ecosystem like the "bad old days", but it's nice to not have to reach for it immediately. edit: Having just now watched the video, I'm pretty blown away! Very cool, and very impressive that you can do this without a full-on SPA. [0] https://github.com/fly-apps/live_beats https://github.com/fly-apps/live_beats

conradfr 5y ago

Coincidentally I also released recently a LiveView side project (that got zero traction on Show HN ;) that involves uploading audio files. People are often afraid about the latency but I must say although visitors from all over the world used it I got no feedback about any lag. I'm looking into their code how the flash is displayed as a toast notification that auto close after a while, as I kind of couldn't think of a simple solution to do that.

chrismccord 5y ago

Phoenix / LiveBeats author here – happy to answer any questions about Phoenix, LiveBeats, or Fly.io. We had a ton of fun building this. It's way more fun to see where folks are connecting to and what kind of pings they get than I would have thought. I also just put out a screencast showing how easy it is to deploy a new phoenix instance on another continent and watch it cluster together with the rest automatically: https://www.youtube.com/watch?v=JrqBudJd2YM&feature=youtu.be https://www.youtube.com/watch?v=JrqBudJd2YM&feature=youtu.be

conradfr 5y ago
Hi Chris, Is there any chance this[0] could be reopened? The problem I have with a JS hook is that if you do a "socket |> push_event() |> push_redirect()" the hook is actually destroyed before writing the cookie. Currently I'm using "Process.send_after(self())" to delay the redirect, it's not that ideal. [0]https://github.com/phoenixframework/phoenix_live_view/issues/313 https://github.com/phoenixframework/phoenix_live_view/issues...
mcintyre1994 5y ago
That video is really cool, it's so impressive how the Elixir/Phoenix/Fly combination works together. Just for context could you give an idea of what that app would cost to run at the scale you're demoing there per month? I think it's 7 DB instances + 7 DB volumes + 5 app instances + 5 app volumes at the end of that video, but not sure what instance sizes etc. you're looking at for this. Also totally random question - how come the flag for the chrismccord user is different for the two users at 9:25 https://youtu.be/JrqBudJd2YM?t=565 https://youtu.be/JrqBudJd2YM?t=565? Is that just something in your app, or is there something in Fly reporting at a different granularity? I'm not familiar with the flag in the left window so might be missing something obvious!
- mrkurt 5y ago
  You can run LiveBeats on the smallest instances. You end up needing 2 small VMs and 2 10GB disks per region. So it costs about $6.80 per region to get started. ~$150/mo to run in all our regions with the small VMs. Most apps only need 3-6 regions to get really great performance. The interesting thing about adding regions is that it also scales capacity horizontally. The way we route traffic means we can max out a region then spillover to the next one. And the way LiveBeats uses disks, each new region adds 10GB of song storage too. Chris gets this stuff for free so he put way bigger CPUs and disks on the databases than they really need. ---Edit--- I did that wrong. It's ~$6.80 per region. Not ~$13.60 per region.

theanirudh 5y ago

Chris McCord, who built this app (and author of Phoenix) talked about it on the Thinking Elixir podcast. Excited to learn that many of the learnings that he got when building this app will make its way into Phoenix LiveView. https://podcast.thinkingelixir.com/84 https://podcast.thinkingelixir.com/84

m8s 5y ago

Man, how cool is this. I don't think people really understand just yet what fly.io is doing with Phoenix/Elixir and how it is changing deployment and scaling for multi-region, real-time apps. At this point, I'm just trying to figure out something worth building to take advantage of this technology! A couple links have been mentioned already, but I'll add two more that got me really excited about Phoenix + Fly: 1. Chris McCord talking about joining Fly.io and all the cool stuff they're working on: https://podcast.thinkingelixir.com/62 https://podcast.thinkingelixir.com/62 2. Kurt Mackey talking about Fly.io before Chris joined the company: https://podcast.thinkingelixir.com/56 https://podcast.thinkingelixir.com/56 And in case anyone is interested, this is the Phoenix Framework homepage: https://www.phoenixframework.org/ https://www.phoenixframework.org/ What a time to be a software engineer, Phoenix + Elixir + Liveview + Tailwind + Fly.io is just so, so exciting.

jamil7 5y ago
Very cool stuff, I haven’t properly looked into it since it was more a programmable proxy type produce a few years ago. But I’m planning on moving a smaller client’s backend off Heroku and onto fly since it would be about a third of the price to run and likely way faster but just as easy for a not-really-backend person like me.

aej 5y ago

This is really impressive. If I were tasked with building an app with a similar feature set in another language or runtime Id have to bring in a whole set of technologies and infrastructure that would make it challenging. The killer feature of Elixir (and Phoenix/LiveView) is not just that you can do all this in the same app writing backend code, its that the scalabilty characteristics of the runtime mean that you can push it really far once you are live. Im excited to read through some of the codebase as a good example of a LiveView app.

simplify 5y ago

Love the effort fly.io is putting into supporting Phoenix. Reminds me of the early Heroku days when they were focused on making Rails as easy to deploy as possible. Betting on Phoenix is definitely the right call.

tptacek 5y ago
It's great for us, because Elixir and Phoenix do such a good job of exercising all the features of the platform. But just to be clear, there's nothing really Elixir-specific about Fly.io! You can run pretty much anything here.

bicx 5y ago

In my previous position at a fintech, I built out our customer support toolkit in LiveView, and it worked extremely well. It's not as structured as some frameworks, so you need to spend some time deciding on your own internal architecture, but once I got going, I was very productive.

chrisweekly 5y ago

This is fantastic. Thank you for building it, open sourcing it, and sharing it here!

ewuhic 5y ago

Am I the only one who is not impressed by the LiveView? 2 things that bother me: 1) It seems most of these walk-throughs omit the process of actually designing the application architecture ("structure") so copy-pasting what had already been well-thought over feels organic; 2) Once you're faced with a more complex (production mission critical) task, the automagic starts to fade and you're back to the good ol' business logic and ui programming.

mrkurt 5y ago
I just built my first LiveView app in anger last month. I don't really what you mean, though. If it helps, I built my app the same way I would have built a Rails app: 1. Create a migration and some files to map DB tables back to my app 2. Create views and wire them up to the database The automagic was 80% of the automagic in Rails. LiveView isn't giving me automagic, exactly, it gives me a way to interact with the browser. One reason I may not understand what you're saying is: I didn't design my application architecture. I started with a small part and just built the rest incrementally.
nesarkvechnep 5y ago
Using LiveView doesn't in any way equal to writing spaghetti mixing presentation with logic.
prophesi 5y ago
The reason they "omit" the process of designing the app architecture is that running `mix phx.new` does that for you. Or `mix phx.gen.live` for an existing Phoenix project. Coding a LiveView Phoenix project is identical to coding a non-LiveView Phoenix project, except the module that handles rendering your pages now has additional functionality out-of-the-box.

princevegeta89 5y ago

Looks amazing

RoddaWallPro 5y ago

This is great! Thank you for building a more complete reference app. I went to visit some friends before Christmas and one night we used a website to play poker at a bar without bringing betting chips to the bar (site gives you a unique URL for a room, people can join the room & choose a name, then lets you bet from your chip count & withdraw from the total pool if you win, & displays that info "live" to everyone, super simple & convenient!). The site was cool, but buggy as hell and laggy as hell and didn't really do what I thought it should do to make it easy to play poker, and I'm gonna build one for my friends and I to use that works the way I think it should. Phoenix w/ LiveView (especially running on fly) is the _perfect_ set of tools to use to build it, and this ref app will be really helpful for me. Appreciate it!

deleted 5y ago

[deleted]

Karupan 5y ago

Before LiveView came around, I didn't realise how much I hated building a SPA for very little dynamic interaction in the UI. One can of course sprinkle jQuery/Web Components and get stuff done, but for a server rendered app, LiveView has just enough magic to make sense of it as a server rendered component. And the blog posts that the Fly team puts out on Elixir/Phoenix is just awesome. All that remains is just finding a project to try it out!