Phoenix - Overview

Phoenix web framework had been there since a while and it caught my attention with it’s LiveView feature. The framework is built on top of Elixir and the BEAM VM is designed for highly concurrent, distributed systems.

This means Live view and sockets are gonna be really feasible with Phoenix.

Getting Started

We need to install Elixir

brew install elixir

and then install Phoenix using mix.

mix archive.install hex phx_new

Mix is the build tool for Elixir and Phoenix uses mix to create new projects and manage dependencies.

Creating a new project

phx.new is the command to create a new Phoenix project.

mix phx.new todo_app --database sqlite3

This will create a new project with the name todo_app and use sqlite3 as the database.

Project Structure:

assets: Contains static assets like CSS, JS, and images.
config: Contains configuration files for the project.
lib: Contains the application code.
priv: Contains private data like database migrations.
test: Contains test files.
mix.exs: Contains the project configuration.

Application Structure

lib/todo_app: Contains the application code.
- lib/todo_app/application.ex: Contains the application configuration.
- lib/todo_app.ex: Todo Context
- lib/todo_app/todo/task.ex: Task Schema
lib/todo_app_web: Contains the web-related code.
- lib/todo_app_web/controllers: Contains the controllers.
- lib/todo_app_web/components: Contains the components.
- lib/todo_app_web/endpoint.ex: Contains the endpoint configuration.
- lib/todo_app_web/router.ex: Contains the router configuration.

To start the server, we can run

cd todo_app
mix phx.server

This will start the server and we can access the app at http://localhost:4000.

Create a new controller

Phoenix follows the MVC pattern and we can create a new controller using the phx.gen.html command.

mix phx.gen.html Todo Task tasks description:string

the syntax is mix phx.gen.html <context> <schema> <plural> <fields>

This will create a new controller, view, and template for the Task schema.

The command will create

Context: lib/todo_app/todo.ex
Schema: lib/todo_app/todo/task.ex
Controller: lib/todo_app_web/controllers/task_controller.ex
View: lib/todo_app_web/views/task_view.ex
Html files: lib/todo_app_web/templates/task_html/*

Routing

Phoenix uses the router.ex file to define routes.

We can define all available routes for todo tasks in the router.ex file.

scope "/tasks", TodoAppWeb do
    pipe_through :browser

    get "/", TaskController, :index
    get "/new", TaskController, :new
    post "/", TaskController, :create
    get "/:id/edit", TaskController, :edit
    patch "/:id", TaskController, :update
    delete "/:id", TaskController, :delete
end

This will define routes for the TaskController to handle the index, new, create, edit, update, and delete actions defined in the controller.

The html for each can be modified in the lib/todo_app_web/templates/task_html directory.

Conclusion

Overall phoenix offers a lot of features and it’s a fun framework to explore. Features like live view are really interesting to explore and it’s a great framework.

Getting Started#

Creating a new project#

Project Structure:#

Create a new controller#

Routing#

Conclusion#