Phoenix 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.

Compile Elixir applications into single executable binaries, with Bakeware

Thu, 22 Oct 2020 16:24:50 +0000

Bakeware is a new fantastic tool, built (by Frank Hunleth, Jon Carstens and Connor Rigby) over a weekend for the SpawnFest 2020, which compiles an Elixir, a Scenic or a Phoenix application into single executable binary (yes, like go-lang!). It can be extremely useful to distribute our apps, especially when they are command-line tools or Scenic applications.

Yet Another Guide To Build a JSON API with Phoenix 1.5

Tue, 06 Oct 2020 20:36:16 +0000

We are going to build a polling app step-by-step. It will be similar to strawpoll.me where users can create and vote on polls and see the results in real-time.

In this blogpost we will only create the basic version of this app and in later blog posts we will add more features like authentication, ip blocking, different voting types and more.

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.

Real-time Object Detection with Phoenix and Python

Thu, 16 Jan 2020 18:43:14 +0000

This article is not just about Machine Learning and Object Detection, it’s about Elixir interoperability and how we can take advantage of the Python’s fantastic set of ML libraries, bringing their features into the Elixir world.

We see how to bring YOLO, a state-of-the-art real-time object detection system, in a Phoenix web app.

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.

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.

Add a Progress Bar in the Phoenix File Upload app

Wed, 29 May 2019 12:22:38 +0000

Part 1: Step-by-Step Tutorial to Build a Phoenix App that Supports User Upload
Part 2: Creating Thumbnails of uploaded Images and PDF in Phoenix
Part 3: this article

In the previous two parts we’ve seen how to create a Phoenix application with a multipart upload form, that creates thumbnails of images and PDF.

Creating Thumbnails of uploaded Images and PDF in Phoenix

Wed, 15 May 2019 18:28:04 +0000

Part 1: Step-by-Step Tutorial to Build a Phoenix App that Supports User Upload
Part 2: this article
Part 3: Add a Progress Bar in the Phoenix File Upload app

In Step-by-Step Tutorial to Build a Phoenix App that Supports User Upload we’ve built from scratch a Phoenix application where users can upload and download their files. We saw how to deal with uploads, saving them locally, using Ecto and Postgres database to save file’s details like size, filename, hash etc.

Dealing with long-running HTTP Requests and Timeouts in Phoenix

Wed, 01 May 2019 18:36:58 +0000

Phoenix is fast and highly concurrent and it can process HTTP requests in less than a millisecond. It is our priority to serve the requests as fast as possible, but the reality is that sometimes processing a request can take too long. This forces Phoenix to trigger a timeout and close the connection.

Step-by-Step Tutorial to Build a Phoenix App that Supports User Upload

Wed, 17 Apr 2019 15:00:23 +0000

Part 1: this article
Part 2: Creating Thumbnails of uploaded Images and PDF in Phoenix
Part 3: Add a Progress Bar in the Phoenix File Upload app

There are many ways to let users upload their files to our Phoenix app, including reliable libraries that manage the uploads for us, saving the files securely on cloud storage.

Connecting Elixir Nodes with libcluster, locally and on Kubernetes

Wed, 06 Feb 2019 12:57:02 +0000

In the last few articles we saw how to make our Phoenix chat app distributed; at the beginning with Redis, and after with distributed Elixir connecting the nodes together.

We had just one problem; we had to manually connect to the nodes in the IEX console. This is an issue in production. In this video we will see how to automatically cluster the Phoenix chat nodes using the libcluster library locally, and on a Kubernetes cluster with a dynamic number of nodes.

Distributed Phoenix Chat with PubSub PG2 adapter

Wed, 30 Jan 2019 16:44:08 +0000

In this article we’ll see how to cluster the Phoenix Chat nodes, using a really powerful functionality embedded in BEAM (the Elixir/Erlang VM), for easily communicate between Elixir nodes. We’ll then see how pg2 works and inspect how Phoenix efficiently broadcasts the messages in a distributed chat app.

Distributed Phoenix Chat using Redis PubSub

Wed, 23 Jan 2019 18:21:34 +0000

In the previous article, Create a High-Availability Kubernetes Cluster on AWS with Kops, we have seen how to create a Kubernetes cluster and how to deploy the Phoenix Chat app. The single node configuration worked well, but when we tried to scale out we saw that the messages were not sent to all the browsers.

Create a High-Availability Kubernetes Cluster on AWS with Kops

Wed, 16 Jan 2019 14:58:56 +0000

This article has a bit more of DevOps flavour than the previous articles, focused more on Elixir. In this article I show how to easily run a multi-zone Kubernetes cluster on AWS, where we’ll deploy a Phoenix Chat application.

There are many ways to deploy a Kubernetes cluster on AWS (Amazon Web Services). At the moment, AWS offers EKS, Elastic Kubernetes Service, which helps us deploy and manage our Kubernetes clusters. It costs $0.20/hr, which is $144/month: that’s not cheap actually, especially if we want to run a small cluster. And it’s not just about the cost: I find EKS still too young, preferring kops over it.