Best Practices from LiveBeats App

TwistingTwists · February 3, 2022, 7:52am

This is a thread to note down things/best practices encountered in LiveBeats App as I explore the source code.

fly-apps/live_beats/blob/master/lib/live_beats_web/controllers/user_auth.ex#L29

      
        
            def on_mount(:ensure_authenticated, _params, session, socket) do
              case session do
                %{"user_id" => user_id} ->
                  new_socket = LiveView.assign_new(socket, :current_user, fn -> Accounts.get_user!(user_id) end)
                  %Accounts.User{} = new_socket.assigns.current_user
                  {:cont, new_socket}
            
            
    %{} ->
                  {:halt, redirect_require_login(socket)}
              end
            rescue
              Ecto.NoResultsError -> {:halt, redirect_require_login(socket)}
            end
            
            
defp redirect_require_login(socket) do
              socket
              |> LiveView.put_flash(:error, "Please sign in")
              |> LiveView.redirect(to: Routes.sign_in_path(socket, :index))
            end
            
            
@doc """

Found this usage of rescue/1

I’ve been meaning to handle Ecto errors myself. So this comes in handy for next time.

cvkmohan · February 3, 2022, 7:59am

Nice exercise @TwistingTwists

TwistingTwists · February 4, 2022, 9:58am

Who is current user in liveview app ? (even during redirects) More than just :fetch_current_user plug

https://github.com/fly-apps/live_beats/blob/master/lib/live_beats_web/controllers/redirect_controller.ex#L9

This has conn.assigns.current_user - without worrying that current_user might not exist.

above is possible because of plug :fetch_current_user here → https://github.com/fly-apps/live_beats/blob/master/lib/live_beats_web/controllers/redirect_controller.ex#L6

TwistingTwists · February 4, 2022, 10:08am

OneLiner For loop

https://github.com/fly-apps/live_beats/blob/master/lib/live_beats_web/live/live_helpers.ex#L494

Never seen a for loop like this before.

Practical render_slots

https://github.com/fly-apps/live_beats/blob/master/lib/live_beats_web/live/profile_live.ex#L22

Message passing other component from present one - JS.push

https://github.com/fly-apps/live_beats/blob/master/lib/live_beats_web/live/profile_live.ex#L25
“switch_profile” is in player_live.ex
https://github.com/fly-apps/live_beats/blob/master/lib/live_beats_web/live/player_live.ex#L208

Pattern Matching - via two variables in function - elegant

matching if current user is same as profile user or any other case.

https://github.com/fly-apps/live_beats/blob/master/lib/live_beats/accounts.ex#L93

TwistingTwists · February 4, 2022, 10:22am

I think I should write @docs in a forked repo instead, no?

RudManusachi · February 4, 2022, 11:25pm

First of all, thank you for this initiative!

https://github.com/fly-apps/live_beats/blob/master/lib/live_beats_web/live/live_helpers.ex#L494

Never seen a for loop like this before.

I’d recommend to post a “permalink” to the line in the commit. That file was changed 7 hours ago. And looks like the link doesn’t point to the place you meant to.

dorgan · February 5, 2022, 2:23am

Protip: if you press Y while seeing a github file it replaces the url at the address bar with a permalink so you can copy that instead of scrolling and clicking copy permalink

TwistingTwists · February 5, 2022, 4:28pm

Will take care.

Added comments in this forked repo for consistency!

sergio · February 5, 2022, 5:36pm

Excellent thread. Pinging @slouchpie so we can comb through this lots of good nuggets!

TwistingTwists · February 6, 2022, 4:38am

Explain for loop :

for a for {key, %{metas: metas}} <- presences, into: %{} do

what does into: do?

as explained by @kartheek - from elixir-lang

must remember : A comprehension is made of three parts: generators, filters, and collectables.

kartheek · February 6, 2022, 4:44am

it collects into %{} in this case

The codefrom live_beats app is transforming presences - adding users and meta to every key in the presences. Final result will be %{key1 => %{metas: <..>, user: <..> }, key2 => %{metas: <..>, user: <..> }}

TwistingTwists · February 6, 2022, 5:14am

Simple GenServer Implementation

Songs Cleaner

TwistingTwists · February 7, 2022, 11:19am

put_change pattern for validation and casting in Ecto

see this file for put_user, put_stats etc

TwistingTwists · February 7, 2022, 4:27pm

Can someone explain this link component?

<.link> defined here has a method={:delete}

which is using this definition here (as I understand so far) .

How does this :delete work?
do we need it even after we specify a call to :sign_out in href?

Dabsy · February 7, 2022, 5:19pm

Worth noting nested for loops and :reduce / :uniq options too

# psuedo, may be incorrect
for bar <- foo, bazz <- bar, !is_nil(bazz) && !is_nil(bar), reduce: [], uniq: true do
 acc -> acc ++ [bar + bazz]
end

execJS

github.com

fly-apps/live_beats/blob/337931e21e46de2a1d5e02d1855e380a57ec9945/assets/js/app.js#L10


      
          import "phoenix_html"
          import {Socket} from "phoenix"
          import {LiveSocket} from "phoenix_live_view"
          import topbar from "../vendor/topbar"
          
          let nowSeconds = () => Math.round(Date.now() / 1000)
          let rand = (min, max) => Math.floor(Math.random() * (max - min) + min)
          let isVisible = (el) => !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length > 0)
          
          let execJS = (selector, attr) => {
            document.querySelectorAll(selector).forEach(el => liveSocket.execJS(el, el.getAttribute(attr)))
          }
          
          let Hooks = {}
          
          Hooks.Flash = {
            mounted(){
              let hide = () => liveSocket.execJS(this.el, this.el.getAttribute("phx-click"))
              this.timer = setTimeout(() => hide(), 8000)
              this.el.addEventListener("phx:hide-start", () => clearTimeout(this.timer))

This function executes rendered JS commands

github.com

fly-apps/live_beats/blob/819d5ecc9850ff8f49013f3151213a4419ab44a2/lib/live_beats_web/live/live_helpers.ex#L28


      
          end
          
          def profile_path(%Accounts.User{} = current_user, action) do
            profile_path(current_user.username, action)
          end
          
          def profile_path(%MediaLibrary.Profile{} = profile, action) do
            profile_path(profile.username, action)
          end
          
          def connection_status(assigns) do
            ~H"""
            <div
              id="connection-status"
              class="hidden rounded-md bg-red-50 p-4 fixed top-1 right-1 w-96 fade-in-scale z-50"
              js-show={show("#connection-status")}
              js-hide={hide("#connection-status")}
            >
              <div class="flex">
                <div class="flex-shrink-0">
                  <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-red-800" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">

mcrumm · February 7, 2022, 7:23pm

Check out the Phoenix.HTML docs for Link.link/2– You can override the default (:get) link method. You can also provide a data-confirm attribute to prompt the user before following the link. This is all ancient UX stuff that you get when you include phoenix_html.js.

Almost certainly, but take a look at router.ex to be sure. You don’t want to put destructive actions behind a GET method (especially a public one) otherwise any request to the path will trigger the destructive action. Imagine a search engine spidering your delete links– it’s not ideal.

TwistingTwists · February 15, 2022, 7:27am

easier config management - especially - when you have a lot of configs

Config management - see examples mentioned above the code

TwistingTwists · February 15, 2022, 11:01am

attach function in LiveBeats - needs explanation

defined here

used here

I do read the documentation in the cdoe. But what does attaching two modules mean? I see the code is using :telemetry to perform attach and execute handle_execute.

I am not well versed with :telemetry hence unsure about whats’ happening.

handle_execute broadcasts messages. via PubSub. Then why do we need telemetry?

@mcrumm @chrismccord please?

en86 · February 15, 2022, 11:31am

Going through this LiveBeats code has been very helpful!

I have a question on memory management. For assigns created in a mount function, it’s simple to use temporary_assigns to clear data that doesn’t need to be tracked.

But what happens when within a LiveView, you create assigns in your HEEX template? For example, within the ProfileLive render function, there is the following code:
<.icon name={:code}/>

.icon is just a standard Phoenix component. Obviously it’s trivial in the case, but is the name assign now in memory being diff tracked with no way of having it cleared from memory since it wasn’t set in the mount function?

en86 · February 15, 2022, 11:47am

Reading through the docs now, my understanding is that it is diff tracked (and hence saved in memory).

So maybe for big chunks of data that don’t need to be tracked, best practice is to set in a mount function (and release with temporary_assigns) or pass it as a slot?