[HN Gopher] LiveBeats: Building a social music app with Phoenix ...
___________________________________________________________________
LiveBeats: Building a social music app with Phoenix LiveView
Author : theanirudh
Score : 137 points
Date : 2022-02-02 14:22 UTC (8 hours ago)
(HTM) web link (fly.io)
(TXT) w3m dump (fly.io)
| chrisweekly wrote:
| This is fantastic. Thank you for building it, open sourcing it,
| and sharing it here!
| aej wrote:
| 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.
| m8s wrote:
| 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
|
| 2. Kurt Mackey talking about Fly.io before Chris joined the
| company: https://podcast.thinkingelixir.com/56
|
| And in case anyone is interested, this is the Phoenix Framework
| homepage: https://www.phoenixframework.org/
|
| What a time to be a software engineer, Phoenix + Elixir +
| Liveview + Tailwind + Fly.io is just so, so exciting.
| chrismccord wrote:
| 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
| ctvo wrote:
| Hey Chris. Great demo. It got me interested enough in Elixir to
| order a book. Does LiveView work well bi-directionally? For
| example, is there a demo of implementing Google Docs in it?
| Curious about the whole class of issues there vs. broadcasting
| changes from a single publisher -> many consumers.
| chrismccord wrote:
| Livebook, which is an elixir code notebook built with
| LiveView includes collaborative editing with presence, so it
| absolutely can be used in that domain. LiveView is built on
| phoenix channels, so it's all bidirectional communication.
| The client can send events from JavaScript. We use js hooks
| for the pings in LiveBeats for example:
| //js Hooks.Ping = { mounted(){
| this.handleEvent("pong", () => { let rtt =
| Date.now() - this.nowMs this.el.innerText =
| `ping: ${rtt}ms` this.timer = setTimeout(() =>
| this.ping(rtt), 1000) })
| this.ping(null) }, destroyed(){
| clearTimeout(this.timer) }, ping(rtt){
| this.nowMs = Date.now() this.pushEvent("ping",
| {rtt: rtt}) } } //liveview
| defp handle_event("ping", %{"rtt" => rtt}, socket) do
| {:halt, socket |>
| rate_limited_ping_broadcast(socket.assigns.current_user, rtt)
| |> push_event("pong", %{})} end
| mcintyre1994 wrote:
| Check out livebook.dev, it's pretty mindblowing! It's like
| Jupyter but for Elixir, and fully collaborative. It's about
| as close to Google Docs as I've seen.
| conradfr wrote:
| 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
| ...
| ashton314 wrote:
| Just wow. This is so cool!
|
| I watched your presentation some years ago when you first
| demoed Phoenix LiveView. I think I and all my work buddies put
| our personal projects on hold waiting for a beta to come out so
| we could play with it! It's been fun to see this project mature
| so well.
|
| Are the things happening with this little project here or with
| LiveBook what you had in mind when you made LiveView? Or have
| projects more manifested themselves as you've been able to
| prove out the capabilities of LiveView?
|
| Anyway, thanks for making web development fun again!
| wolfgang000 wrote:
| Some small sugesstions When a file upload finish is not very
| clear that It finished, maybe you can change the color of the
| bar(or add an icon) to signal that it finished
|
| also, I don't know if it was just me but the upload popup
| didn't work only the drag and drop one.
|
| apart from that very cool project I also am an elixir developer
| but haven't had the chance to test liveview but it looks very
| good
| chrismccord wrote:
| Good suggestions. There is indeed a bug on chrome when
| clicking on the file link vs drag and drop. Something about
| dispatchEvent("click") vs .click(). Will fix in a bit!
| mcintyre1994 wrote:
| 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? 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 wrote:
| 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.
| chrismccord wrote:
| LiveBeats is hotlinking https://fly.io/ui/images/<region>.svg
| and Kurt updated a few of the US region images to be more
| specific vs blanket flag. The browser on the right is chrome,
| with the cached old image, and left is safari with the new
| one :)
| simplify wrote:
| 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 wrote:
| 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.
| [deleted]
| ewuhic wrote:
| 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 wrote:
| 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 wrote:
| Using LiveView doesn't in any way equal to writing spaghetti
| mixing presentation with logic.
| prophesi wrote:
| 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 wrote:
| Looks amazing
| losvedir wrote:
| 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
| theanirudh wrote:
| 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
| Sinidir wrote:
| The blog site keeps randomly scrolling by itself when i ahve
| darkreader on.
| akoutmos wrote:
| 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]
| bicx wrote:
| 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.
| RoddaWallPro wrote:
| 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!
| conradfr wrote:
| 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.
___________________________________________________________________
(page generated 2022-02-02 23:01 UTC)