Elixir and Phoenix: Building fault-tolerant, concurrent web applications

Use Elixir and Phoenix to build highly responsive, reliable web applications that scale effortlessly.

Background

In the world of web development, there’s no shortage of choices when it comes to programming languages and frameworks. But when it comes to building highly concurrent, fault-tolerant applications, Elixir and Phoenix stand out from the crowd.

Elixir is a dynamic, functional language designed for building scalable and maintainable applications. It leverages the Erlang VM, which is known for running low-latency, distributed systems, while also being successfully used in web development and embedded software domains.

Phoenix is a web framework built with Elixir that makes building interactive, real-time applications easy and enjoyable. It offers a familiar MVC pattern, a powerful templating engine, and seamless WebSocket integration.

The competition

If you’re considering Elixir and Phoenix, you might ask: “Why not stick with more mainstream options like Ruby on Rails or Node.js?”. A valid question. These frameworks are mature, widely used, and have large ecosystems. However, Elixir and Phoenix offer some unique benefits:

1. Concurrency: Elixir and Phoenix are designed to handle a large number of concurrent users. Phoenix can handle millions of WebSocket connections on a single server.
2. Fault-Tolerance: Elixir applications are designed to handle failures gracefully. Processes are isolated, so if one crashes, it doesn’t bring down the entire system.
3. Scalability: Elixir and Phoenix applications can scale horizontally across multiple nodes with minimal effort.
4. Real-Time Features: Phoenix has built-in support for real-time features via WebSockets and Phoenix Channels.
5. Developer Productivity: Elixir and Phoenix offer a great developer experience with interactive debugging, hot code reloading, and a friendly community.

Getting Started with Elixir and Phoenix

Now that we’ve covered the background and advantages of Elixir and Phoenix, let’s dive into creating a simple web application. We’ll build a basic chat application that demonstrates Phoenix’s real-time capabilities.

Setting Up

First, make sure you have Elixir installed. You can find installation instructions for your operating system in the official Elixir guide.

Next, let’s install the Phoenix framework. Run the following command in your terminal:

mix archive.install hex phx_new

Creating Our Application

With Phoenix installed, we can create a new Phoenix project:

mix phx.new chat_app
cd chat_app

This command creates a new Phoenix project in a directory named chat_app.

Creating a Chat Room

Let’s create a new Phoenix channel for our chat room. Channels are a way to handle in-application real-time communication.

Generate a new channel:

mix phx.gen.channel Room

This command generates the necessary files for a new channel named Room.

Update the lib/chat_app_web/channels/user_socket.ex file to include the new channel:

channel "room:lobby", ChatAppWeb.RoomChannel

Update the assets/js/app.js file to join the channel:

let channel = socket.channel("room:lobby", {});
channel.join()
  .receive("ok", resp => { console.log("Joined successfully", resp) })
  .receive("error", resp => { console.log("Unable to join", resp) });

This JavaScript code joins the "room:lobby" channel when the page loads.

Handling Messages

Update the lib/chat_app_web/channels/room_channel.ex file to handle incoming messages:

def handle_in("new_msg", %{"body" => body}, socket) do
  broadcast!(socket, "new_msg", %{body: body})
  {:noreply, socket}
end

This code broadcasts any incoming "new_msg" event to all connected clients.

Update the assets/js/app.js file to send and receive messages:

let chatInput = document.querySelector("#chat-input");
let messagesContainer = document.querySelector("#messages");

chatInput.addEventListener("keypress", event => {
  if(event.key === 'Enter') {
    channel.push("new_msg", {body: chatInput.value});
    chatInput.value = "";
  }
});

channel.on("new_msg", payload => {
  let messageItem = document.createElement("li");
  messageItem.innerText = `[${Date()}] ${payload.body}`;
  messagesContainer.appendChild(messageItem);
});

This JavaScript code sends a message when the user presses Enter in the chat input, and appends received messages to the DOM.

Running Our Application

To start your Phoenix server:

mix phx.server

Now you can visit http://localhost:4000 from your browser. Open multiple browser windows and start chatting!

Advanced Features

While our chat application demonstrates the basics, Elixir and Phoenix offer many more advanced features for building robust, scalable applications. Here are a few to consider:

Presence

Phoenix Presence allows you to track which users are currently connected to your application in real-time. This is useful for showing “who’s online” or displaying real-time user activity.

defmodule ChatAppWeb.Presence do
  use Phoenix.Presence, otp_app: :chat_app,
                        pubsub_server: ChatApp.PubSub
end

This code sets up Presence in your application.

Ecto and PostgreSQL

Ecto is a powerful database wrapper and query generator for Elixir. It allows you to define schemas, write queries, and interact with your database in a composable, declarative way.

defmodule ChatApp.Message do
  use Ecto.Schema

  schema "messages" do
    field :content, :string
    field :user_id, :id
    timestamps()
  end
end

This code defines a schema for a Message model.

LiveView

Phoenix LiveView is a game-changing library that allows you to create rich, real-time user experiences with server-rendered HTML. It allows you to build interactive, real-time pages without writing any JavaScript.

defmodule ChatAppWeb.PageLive do
  use ChatAppWeb, :live_view

  def render(assigns) do
    ~L"""
    <h1>Welcome to ChatApp!</h1>
    """
  end
end

 

This code defines a basic LiveView.

Conclusion

We’ve only scratched the surface of what’s possible with Elixir and Phoenix. Their focus on concurrency, fault-tolerance, and real-time features makes them a powerful choice for building interactive, scalable web applications.

While Elixir and Phoenix offer many benefits, they also come with a learning curve. Elixir’s functional programming paradigm can be a shift for developers coming from object-oriented languages, and the Erlang VM’s actor model requires a different way of thinking about concurrency.

As with any technology choice, it’s important to evaluate whether Elixir and Phoenix are the right fit for your specific needs. For applications that require high levels of concurrency, fault-tolerance, and real-time features, they can be a powerful choice.

If you’re interested in learning more about Elixir and Phoenix, I highly recommend the official Elixir guides and the Phoenix documentation. The Elixir Forum and Elixir Slack group are also great resources for learning from the community.

Happy coding!