Skip to content

md-web-app/live-view-goals

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 

Repository files navigation

live-view-goals

collab site... two clients going at once we see the communication.

  1. https://dennisbeatty.com/2019/04/24/how-to-create-a-todo-list-with-phoenix-liveview.html
  2. https://github.com/dnsbty/live_view_todos

validation ...

  1. https://elixircasts.io/phoenix-live-view

mccord talk

explaining why live view can be better than elixir channels and umbrella-project example:
talk: https://www.youtube.com/watch?time_continue=6&v=8xJzHq8ru0M
example: https://github.com/chrismccord/phoenix_live_view_example

setup asdf the right way:


https://www.cogini.com/blog/using-asdf-with-elixir-and-phoenix/
below is the mac instructions, see the link for the linux instructions.

{
  brew install asdf;
  echo -e '\n. $(brew --prefix asdf)/asdf.sh' >> ~/.bash_profile;
  echo -e '\n. $(brew --prefix asdf)/etc/bash_completion.d/asdf.bash' >> ~/.bash_profile;
  { brew install coreutils automake autoconf openssl libyaml readline libxslt libtool; };
  { brew install unixodbc wxmac gpg; brew cask install java };
  { bash ~/.asdf/plugins/nodejs/bin/import-release-team-keyring };
  { asdf plugin-add erlang; asdf plugin-add elixir; asdf plugin-add nodejs; };
  { asdf install erlang 21.3; asdf install elixir 1.8.1; asdf install nodejs 10.15.3; };
  { mix local.hex --if-missing --force };
  { mix local.rebar --if-missing --force };
  { asdf global erlang 21.3; asdf global elixir 1.8.1; asdf global nodejs 10.15.3; };
  { mix deps.get; mix deps.compile; mix compile; mix ecto.setup; };
};

compatability check for elixir and erlang:

https://hexdocs.pm/elixir/master/compatibility-and-deprecations.html#compatibility-between-elixir-and-erlang-otp

live-view breakdown:

proj/lib/demo_web/index.html.eex:
<li><%= link "Thermostat", to: Routes.live_path(@conn, DemoWeb.ThermostatLive) %></li>

proj/lib/demo_web/router.ex:

defmodule DemoWeb.Router do
  use DemoWeb, :router
  import Phoenix.LiveView.Router
  pipeline :browser do
    ...
    plug Phoenix.LiveView.Flash
    ...
  end
  scope "/", DemoWeb do
    ...
    live "/thermostat", ThermostatLive
    ... 
  end

proj/lib/demo_web/live/thermostat_live.ex:

defmodule DemoWeb.ThermostatLive do
  use Phoenix.LiveView
  def render(assigns) do
    ~L"""
    <div class="thermostat">
      <div class="bar <%= @mode %>">
        <a href="#" phx-click="toggle-mode"><%= @mode %></a>
        <span><%= strftime!(@time, "%r") %></span>
      </div>
      <div class="controls">
        <span class="reading"><%= @val %></span>
        <button phx-click="dec" class="minus">-</button>
        <button phx-click="inc" class="plus">+</button>
        <span class="weather">
          <%= live_render(@socket, DemoWeb.WeatherLive) %>
        </span>
      </div>
    </div>
    """
  end
  def mount(_session, socket) do
    if connected?(socket), do: :timer.send_interval(100, self(), :tick)
    {:ok, assign(socket, val: 72, mode: :cooling, time: :calendar.local_time())}
  end
end

proj/lib/demo_web/live/weather_live.ex

defmodule DemoWeb.WeatherLive do
  use Phoenix.LiveView
  def render(assigns) do
    ~L"""
    <div>
      <form phx-submit="set-location">
        <input name="location" placeholder="Location" value="<%= @location %>"/>
        <%= @weather %>
      </form>
    </div>
    """
  end

  def mount(_session, socket) do
    send(self(), {:put, "Austin"})
    {:ok, assign(socket, location: nil, weather: "...")}
  end
end

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published