Phoenix LiveView on Poeticoding

Phoenix LiveView LiveComponents

Tue, 23 Nov 2021 16:09:36 +0000

Code

Links

We’ve just started to build our CryptoDashboardLive view, and we already have the feeling that the we are piling up a lot of code into the single CryptoDashboardLive module. It’s not just about the template in the render/1 function, we could easily move it into a .leex file. The risk is to find us with a single massive live view module which handles every aspect of our page, making che code hard to read and maintain. This page already has different parts with different responsibilities, for example: product cards where each one shows its product price, a toolbar with a dropdown to add products to the dashboard…

A nice Dashboard UI

Tue, 23 Nov 2021 15:35:40 +0000

Course Index page

Code

Before going on with LiveComponents and other topics, let’s spend a few minutes on our UI. At the moment products and trades are rendered in a table, using the default phoenix.css.

Intro to Poeticoins Elixir application

Sat, 27 Mar 2021 11:51:14 +0000

Course Index page

Poeticoins GitHub repository: poeticoding/poeticoins

Application Design

Tue, 23 Mar 2021 18:43:56 +0000

Course Index page

In this course we’ll build a Phoenix LiveView app (called Poeticoins) that gets real-time trades from multiple cryptocurrency exchanges and, with LiveView, it displays prices, and other data, on an interactive dashboard.

Since the dashboard just shows the most recent data, we won’t need any database. We’ll see how to use Elixir processes to temporarily keep all we need in memory.

Intro to Cryptocurrency Exchanges

Tue, 23 Mar 2021 16:22:16 +0000

Course Index page

I’ve decided to build this Phoenix LiveView course around a Cryptocurrency dashboard example because Cryptocurrency Exchanges are a fantastic, often public, source of realtime data. Don’t be scared if you don’t know anything about cryptocurrencies or exchanges, I’m going to explain everything we need to start playing with this data.

LiveView click event and offsetX, offsetY coordinates

Thu, 19 Mar 2020 17:05:47 +0000

Phoenix LiveView plays fantastically well with SVG elements, making really easy to render dynamic images, without writing any JavaScript code.

There are different bindings we can use to register and react to user interaction, one of these is phx-click. By adding phx-click="clicked" attribute to an element in our LiveView, when user clicks the element, a "clicked" event is sent to the LiveView process.

Phoenix LiveView JavaScript Hooks and Select2

Wed, 05 Feb 2020 11:48:10 +0000

We’ve already played with Select2 and LiveView, it was before the release of LiveView JS Hooks. To make select2 work with LiveView we had to listen to phx:update generic javascript events, re-initialize select2 and use a workaround to push events from the browser to LiveView.

Understanding Phoenix LiveView: build a Gallery app

Wed, 20 Nov 2019 17:50:13 +0000

Understanding Phoenix LiveView

Setup
The Primitives
Building a Gallery app (this article)

In the previous articles we’ve seen how to setup Phoenix LiveView and built a counter (which is like the “Hello World” code example in the LiveView world). We’ve also taken a look at the live-cycle, inspecting websocket messages, having a glimpse of how the things work under the hood.

The Primitives of Phoenix LiveView

Tue, 12 Nov 2019 16:30:21 +0000

Understanding Phoenix LiveView

Setup
The Primitives (this article)
Building a Gallery app

In the previous article we saw how to setup Phoenix LiveView, in order to have everything we need to build a simple LiveView gallery app.

How to Setup Phoenix LiveView

Tue, 29 Oct 2019 17:18:48 +0000

Updated for LiveView 0.11.0 - 7th April 2020

Understanding Phoenix LiveView

Phoenix LiveView has been released on Hex! Although it’s still not a stable release (at the time of writing 0.11.0), it works really well and it’s packed of cool features.

Using Select2 with Phoenix LiveView

Thu, 11 Jul 2019 15:19:10 +0000

IMPORTANT: It’s now possible to do LiveView JS interop with hooks, which make everything much simpler and smoother! I’ve published an updated version of the article: Phoenix LiveView JavaScript Hooks and Select2.

LiveView doesn’t support JavaScript interop at the moment (but it’s a planned feature). So, let’s see how we can come up with a workaround to make LiveView playing together with a JavaScript library like Select2.

Phoenix LiveView live_link

Wed, 26 Jun 2019 14:45:03 +0000

In the previous article focused on live_redirect, we’ve seen how in Phoenix LiveView we can change the URL without changing the location or refreshing the page. In this way we can keep the URL updated with the current page state, making easier for the user to bookmark or share it.

Phoenix LiveView - Change the URL without refreshing the page

Wed, 19 Jun 2019 16:11:17 +0000

It’s now possible to try the pushState support available in Phoenix LiveView (which, remember, is still in beta)

Add live_link and live_redirect for push state support

What is pushState and why can be useful?

With Phoenix LiveView we can easily update parts of the page without having to change the location, refreshing the page or directly use JavaScript.