Skip to content

Latest commit

 

History

History
108 lines (87 loc) · 3.55 KB

ROUTEX_AND_PHOENIX_ROUTER.md

File metadata and controls

108 lines (87 loc) · 3.55 KB

How Routex and Phoenix Router Work Together: A Blueprint for Understanding

All code on this page is for illustration purpose only. It is incorrect and should not be used.

Understanding how Routex, its extensions, and Phoenix Router work together can be tricky. To make it clearer, let's use an analogy.

Imagine you're a real estate developer planning to build several houses. You have a general vision for the houses (your route definitions in route.ex) and some specific ideas about their style and features (your Routex configuration).

# routes
/products
/products/:id

# config
alternatives: %{
    "/fr" => %{name: "French"},
    "/es" => %{name: "Spanish"}
}

Routex is the architect. It takes your vision (route definitions) and preferences (Routex config) and creates detailed blueprints.

Routex extensions are the architect's specialized tools. These tools allow the architect to refine and customize the blueprints. Without them, the architect could only create basic, unmodified plans.

# input
[
%Route{path: "/products"}
%Route{path: "/products/:id"}
]

# output after transformation by Alternatives extension
[
%Route{path: "/fr/products",      metadata: %{name: "French"}},
%Route{path: "/fr/products/:id",  metadata: %{name: "French"}},
%Route{path: "/es/products",      metadata: %{name: "Spanish"}},
%Route{path: "/es/products/:id",  metadata: %{name: "Spanish"}}
]

Once the blueprints are finalized, they're handed off to the construction company: Phoenix Router. Phoenix Router builds the actual houses (your routes) according to the architect's precise specifications. The blueprints are perfectly formatted for Phoenix Router, ensuring a smooth construction process.

# note: incorrect pseudo code

if match?("/fr/products"      ), do: ProductLive, :index, metadata: ["French"]
if match?("/fr/products/" <> id), do: ProductLive, :show,  metadata: ["French"]
if match?("/es/products"      ), do: ProductLive, :index, metadata: ["Spanish"]
if match?("/es/products/" <> id), do: ProductLive, :show,  metadata: ["Spanish"]

This explains the first key concept:

Routex generates blueprints from your route definitions and configuration, ready for Phoenix Router to build the actual routes.

Because Routex is the architect, it has intimate knowledge of the house designs. This allows it to create perfectly matching accessories, like custom-designed sunshades or smart garage doors. These are additional features that enhance the houses built by Phoenix Router, adding convenience and functionality.

# generated convenient functions
defmodule Helpers do
  def alternatives("/products") do
    [
      %Route{path: "/fr/products", name: "French"},
      %Route{path: "/es/products", name: "Spanish"}
    ]
  end
end

# your usage
This page is available in:
for alt <- Helpers.alternatives("/products") do
 <.link navigate={alt.path}>{alt.name}<./link>
end

# output
This page is available in:
<a href="/fr/products">French</a>
<a href="/es/products">Spanish</a>

This leads to the second key concept:

Routex also creates helpful accessory functions that you can use with the houses (routes) built by Phoenix Router. These functions streamline common tasks and improve the overall experience.

Conclusion

Phoenix Router and Routex, along with its extensions, form a powerful partnership that empowers you to build any route in your web application. Routex expertly designs the intricate pathways of your application's URLs, while Phoenix Router flawlessly constructs them, ensuring a smooth and efficient user experience.