Search⌘ K

Building Real-time Applications with Phoenix & Elixir

0%

1.Getting Started with Phoenix

An Overview of Phoenix Layers of a Real-Time System Types of Scalability Achieving Real-time in Elixir Quiz on Phoenix Overview

2.Powering Real-time Applications with Phoenix

Creating a Simple WebSocket Connecting Our First WebSocket Loading Our First WebSocket Testing WebSocket Connection Upgrading WebSocket Connections Maintaining WebSocket Connections Predecessor to WebSockets WebSockets and Phoenix Channels Quiz on Powering Real-time Phoenix Applications

3.First Steps with Phoenix Channels

What are Phoenix Channels?Understanding Channel Structure Implementation of a Channel Channel Error Handling Dynamic Topics PubSub Receive Messages Send Messages Channel Clients JavaScript Client Quiz on Phoenix Channels

4.Restrict Socket and Channel Access

Why Restrict Access?Add Authentication to Sockets Different Types of Tokens Add Authorization to Channels Use Authentication from JavaScript When to Write a New Socket Quiz on Socket and Channel Access

5.Dive Deep into Phoenix Channels

Design for Unreliable Connections Use Channels in a Cluster Customize Channel Behavior Deduplicate Outgoing Messages How to Write Tests Testing Our Wildcard Channel Testing DedupeChannel Wrapping Up Quiz on Deep Concepts of Phoenix Channels

6.Avoid Performance Pitfalls

Measure Everything Collect Measurements using StatsD Keep Channels Asynchronous Build a Scalable Data Pipeline GenStage-powered Pipeline Adding Concurrency and Channels Measuring our Pipeline Test Our Data Pipeline The Power of GenStage Quiz on Avoiding Performance Pitfalls

7.Build a Real-time Sneaker Store

Introduction From Product Requirements to a Plan Setting Up the Project Render Real-time HTML with Channels (Back-end)Render Real-time HTML with Channels (Front-end)Update a Client with Real-time Data Run Multiple Servers Verify Multiple Server Behavior Wrapping Up Quiz on Building a Real-Time Application

8.Break Your Application with Acceptance Tests

Introduction The Power of Acceptance Testing Break Our Application Like a User (Part I)Break Our Application Like a User (Part II)Break Our Application Like a Server (Part I)Break Our Application Like a Server (Part II)Automate Acceptance Tests with Hound Write Automated Acceptance Tests Wrapping Up Quiz on Breaking an Application with Acceptance Tests

9.Build a Real-time Shopping Cart

Introduction Planning Our Shopping Cart Setting Up Our Project Scaffold Our Shopping Cart Channel (Part I)Scaffold Our Shopping Cart (Part II)Build Our Shopping Cart Channel Add Items to Our Cart Synchronize Multiple Channel Clients Add Real-time Out-of-stock Alerts Acceptance Test the Shopping Cart (Part I)Acceptance Test the Shopping Cart (Part II)Wrapping Up Quiz on Building a Real-time Shopping Cart

10.Track Connected Carts with Presence

Introduction On Track with Phoenix Tracker Use Tracker in an Application Phoenix Tracker vs. Presence Scaffold the Admin Dashboard Track Shopping Carts in Real-Time Update Shopping Carts in Real-time Assemble the Admin Dashboard Wrapping Up Quiz on Tracker and Presence

11.Deploy Our Application to Production

Introduction Achieve Scalability with Load Balancing Cluster Your BEAM Nodes Together Wrapping Up Quiz on Deploying an Application to Production

Project

Build a Group Chat Application Using Elixir

12.Manage Real-time Resources

Introduction Manage Our Application’s Memory Effectively Inspect a Running Application Wrapping Up Quiz on Managing Real-Time Resources

13.Hands-on with Phoenix LiveView

Getting Started with LiveView Build a LiveView Product Page Write Tests for a LiveView Wrapping Up Quiz on Phoenix LiveView

14.Single-page Applications with React

Manage Channel State in React Write Channels as Components Hands-on with React React Native Channels Quiz on Single-page Applications with React

Project

Create Drag and Drop Web Components by Using Phoenix LiveView

15.Wrap Up!

The End of Our Journey

16.Appendix

Installing Phoenix

Building Real-time Applications with Phoenix & Elixir

Setting Up the Project

Learn how to initialize our sneaker store.

We'll cover the following...

Setting up the project base
Try it yourself

Setting up the project base

We’ll need the project base to start this chapter. We should copy the base project into a working folder.

After setting up the project base in a folder that we can work from, we can verify that everything is working by running the test suite.

Shell

mix deps.get && mix ecto.setup && mix test
Compiling 2 files (.ex)
Generated sneakers_23 app
...............

Shell

npm --prefix assets install
Finished in 0.1 seconds
15 tests, 0 failures

Finally, let’s test that the web view is working correctly. We use the following commands to seed the database and then start the server.

Shell

mix ecto.reset && mix run -e "Sneakers23Mock.Seeds.seed!()"
iex -S mix phx.server

When we ...