https://github.com/delta1/phx-live-demo
Phoenix LiveView dashboard demo
https://github.com/delta1/phx-live-demo
ecto elixir liveview phoenix pubsub
Last synced: 2 months ago
JSON representation
Phoenix LiveView dashboard demo
- Host: GitHub
- URL: https://github.com/delta1/phx-live-demo
- Owner: delta1
- Created: 2019-07-17T12:24:59.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-07-19T17:26:56.000Z (almost 5 years ago)
- Last Synced: 2025-03-29T08:24:18.352Z (3 months ago)
- Topics: ecto, elixir, liveview, phoenix, pubsub
- Language: Elixir
- Homepage: https://github.com/phoenixframework/phoenix_live_view
- Size: 634 KB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# LiveDemo
## Phoenix LiveView dashboard demo
> **tl;dr** LiveView dashboard that updates from changes in the database, triggered by [PubSub](https://hexdocs.pm/phoenix/1.1.0/Phoenix.PubSub.html#functions)
**What is this?**
A simple demo of [Phoenix LiveView](https://github.com/phoenixframework/phoenix_live_view) functionality for a "live dashboard".
When "items" in the database are changed, the dashboard updates without reloading the page.
Below we have the standard [phx.gen.html](https://hexdocs.pm/phoenix/Mix.Tasks.Phx.Gen.Html.html) scaffold on the left, and a LiveView on the right.
As we create, modify or delete the items, they are updated automagically in the LiveView.
**How can I try it out?**
- Clone the repo
- Install dependencies with `mix deps.get`
- Create and migrate your database with `mix ecto.setup`
- Install Node.js dependencies with `cd assets && npm install`
- Start Phoenix endpoint with `mix phx.server`
Visit [`localhost:4000`](http://localhost:4000) from your browser for the live view, and [/items](http://localhost:4000/items) for the items crud scaffold.
**How does it work?**
- Once LiveView is setup in your project ([docs](https://github.com/phoenixframework/phoenix_live_view/blob/master/lib/phoenix_live_view.ex), [tutorial](https://elixirschool.com/blog/phoenix-live-view/#getting-started)), you can define a module to `use LiveView`, and then implement `render/1`, `mount/2`, and `handle_event/3` functions to control your live view.
- In this specific example, the [`render`](lib/live_demo_web/live/live_view.ex) function just renders the simple live template. The `mount` function retrieves the items from the database and then subscribes to the PubSub topic. The 2 `handle_event` functions are used from the live view when creating or updating an item. The `handle_info` function re-fetches the database items to supply them to the live view.
- When items are updated in the database using the [`Items`](lib/live_demo/items.ex) context, we call PubSub.broadcast on the same topic which notifies the live view to update.