Ulaşım
- Adres:Batıkent Mh. 8910 Sk. 6. Etap 1H No: 18 Yeni Toki Eyyübiye / Şanlıurfa (Yeni Alım Satım Karşısı)
- Telefon:0 (545) 528 88 93
- eMail: info@alestaweb.com
Elixir Phoenix LiveView, JavaScript yazmadan gerçek zamanlı web uygulamaları geliştirmenin en şaşırtıcı yolunu sunuyor. Phoenix LiveView real-time yaklaşımı, sunucu taraflı rendering ile anlık UI güncellemelerini bir araya getirerek React ve Node.js alternatifi olarak güçlü bir seçenek haline geldi. Alesta Web ekibi olarak Elixir Phoenix LiveView 1.1'i derinlemesine inceledik ve bu kapsamlı başlangıç rehberini hazırladık. Erlang VM'nin gücünü keşfetmeye hazır mısınız?
Elixir Phoenix LiveView, iki güçlü teknolojinin birleşimidir. Elixir, Erlang Sanal Makinesi (BEAM VM) üzerinde çalışan, Ruby benzeri söz dizimine sahip fonksiyonel bir programlama dilidir. Phoenix ise Elixir üzerine inşa edilmiş üretken ve yüksek performanslı web framework'üdür.
Phoenix LiveView real-time bileşeni, 2019'da duyurulduğunda web geliştirme dünyasında büyük yankı uyandırdı. Soru basitti: Her UI etkileşimi için JavaScript yazmak zorunda mıyız? Cevap: Hayır! Alesta Web ekibi Elixir Phoenix LiveView'u incelediğinde şunu gördü: WebSocket tabanlı bir bağlantı üzerinden sunucu, yalnızca değişen HTML parçalarını istemciye gönderiyor ve tarayıcı bu diff'i uyguluyor.
WhatsApp 2 milyar kullanıcıya Erlang/BEAM ile hizmet veriyor. Discord başlangıçta Python + Erlang kullandı, sonra Elixir'e geçti. Elixir Phoenix LiveView bu devasa ölçeklenebilirlik mirasından yararlanır. Alesta Web'de yüksek eşzamanlılık gerektiren projeler için Elixir'i değerlendiriyoruz.
Elixir Phoenix LiveView'un mimarisini anlamak, neden bu kadar güçlü olduğunu kavramak için kritiktir. Phoenix LiveView real-time yaklaşımı üç aşamada çalışır.
# LiveView Lifecycle:
# 1. mount/3 → İlk yükleme (stateful process başlar)
# 2. render/1 → HTML template render edilir
# 3. handle_event/3 → Kullanıcı etkileşimi
# 4. handle_info/2 → PubSub mesajları
# 5. handle_params/3 → URL parametre değişimi
# Tipik LiveView akışı:
# Browser → HTTP GET → Server renders initial HTML (SEO friendly!)
# Browser → WebSocket upgrade → Persistent connection
# User clicks button → Event over WebSocket → Server updates state
# Server → renders diff → sends minimal HTML patch → Browser applies
# Neden verimli?
# - Yalnızca değişen HTML parçaları (diff) iletilir
# - Tüm state sunucuda (client sıfır state yönetimi)
# - Erlang lightweight process per connection (milyonlarca bağlantı)
# - JavaScript sıfır: sadece phoenix_live_view.js (~50KB) yeterliElixir Phoenix LiveView her bağlantı için bir Erlang prosesi başlatır. Bu prosesler iş parçacığı değil, çok daha hafif yapılardır. Tek bir sunucu 2-3 milyon eş zamanlı LiveView bağlantısını handle edebilir. Alesta Web için bu, gerçek zamanlı bildirimler veya canlı veri akışları için ideal demektir.
Elixir Phoenix LiveView projesini sıfırdan kurmak, Phoenix CLI sayesinde dakikalar içinde tamamlanabilir.
# 1. Elixir kur (macOS)
brew install elixir
# Linux (Ubuntu/Debian)
wget https://packages.erlang-solutions.com/erlang-solutions_2.0_all.deb
sudo dpkg -i erlang-solutions_2.0_all.deb
sudo apt update && sudo apt install esl-erlang elixir
# Windows: https://elixir-lang.org/install.html#windows
# Elixir versiyonunu kontrol et
elixir --version
# Elixir 1.18.x (compiled with Erlang/OTP 27)
# Hex paket yöneticisi
mix local.hex
# Phoenix installer
mix archive.install hex phx_new
# Phoenix versiyonunu kontrol et
mix phx.new --version
# Phoenix installer v1.7.x# LiveView dahil yeni proje (varsayılan olarak gelir)
mix phx.new alestaweb_live
# Proje dizinine gir
cd alestaweb_live
# Bağımlılıkları yükle ve DB oluştur
mix deps.get
mix ecto.create
mix ecto.migrate
# Geliştirme sunucusunu başlat
mix phx.server
# Tarayıcıda: http://localhost:4000
# LiveView ile interaktif shell
iex -S mix phx.serveralestaweb_live/
├── lib/
│ ├── alestaweb_live/ # Business logic (contexts)
│ │ ├── accounts.ex
│ │ └── blog.ex
│ └── alestaweb_live_web/ # Web katmanı
│ ├── live/ # LiveView modülleri
│ │ ├── page_live.ex
│ │ └── counter_live.ex
│ ├── components/ # Reusable components
│ ├── router.ex
│ └── endpoint.ex
├── priv/
│ └── repo/migrations/
├── assets/ # CSS, JS (minimal)
├── config/
└── mix.exs # BağımlılıklarElixir Phoenix LiveView ile ilk gerçek zamanlı bileşeni yazmak, Elixir'in ne kadar zarif bir dil olduğunu gösterir. Phoenix LiveView real-time sayaç örneğiyle başlayalım.
defmodule AlestawebLiveWeb.CounterLive do
use AlestawebLiveWeb, :live_view
# mount: İlk yüklemede çalışır
def mount(_params, _session, socket) do
{:ok, assign(socket,
count: 0,
site: "alestaweb.com",
last_updated: DateTime.utc_now()
)}
end
# render: HTML template
def render(assigns) do
~H"""
Alesta Web Sayaç - Phoenix LiveView Real-Time
Site: <%= @site %>
<%= @count %>
Son güncelleme: <%= @last_updated %>
"""
end
# handle_event: Kullanıcı etkileşimleri
def handle_event("increment", _params, socket) do
{:noreply, update(socket, :count, &(&1 + 1)) |> assign(:last_updated, DateTime.utc_now())}
end
def handle_event("decrement", _params, socket) do
{:noreply, update(socket, :count, &(&1 - 1)) |> assign(:last_updated, DateTime.utc_now())}
end
def handle_event("reset", _params, socket) do
{:noreply, assign(socket, count: 0, last_updated: DateTime.utc_now())}
end
endscope "/", AlestawebLiveWeb do
pipe_through :browser
live "/", PageLive, :index
live "/counter", CounterLive, :index
live "/dashboard", DashboardLive, :index
endİlk Elixir Phoenix LiveView bileşeniniz hazır! Hiç JavaScript yazmadan gerçek zamanlı sayaç çalışıyor. Alesta Web projelerinde bu yaklaşım UI mantığını büyük ölçüde basitleştirdi.
Elixir Phoenix LiveView 1.1'de form işleme, Ecto changeset ile entegre olarak güçlü ve temiz bir yapı sunar.
defmodule AlestawebLiveWeb.ContactLive do
use AlestawebLiveWeb, :live_view
alias AlestawebLive.Contact
alias AlestawebLive.Contact.Message
def mount(_params, _session, socket) do
changeset = Contact.change_message(%Message{})
{:ok, assign(socket, form: to_form(changeset), submitted: false)}
end
def render(assigns) do
~H"""
Alesta Web İletişim Formu
<.form for={@form} phx-change="validate" phx-submit="submit">
<.input field={@form[:name]} label="Ad Soyad" />
<.input field={@form[:email]} type="email" label="E-posta" />
<.input field={@form[:message]} type="textarea" label="Mesaj" />
<.button type="submit">Gönder
<%= if @submitted do %>
Mesajınız alestaweb.com ekibine iletildi!
<% end %>
"""
end
def handle_event("validate", %{"message" => params}, socket) do
changeset = Contact.change_message(%Message{}, params) |> Map.put(:action, :validate)
{:noreply, assign(socket, form: to_form(changeset))}
end
def handle_event("submit", %{"message" => params}, socket) do
case Contact.create_message(params) do
{:ok, _message} ->
{:noreply, assign(socket, submitted: true)}
{:error, changeset} ->
{:noreply, assign(socket, form: to_form(changeset))}
end
end
endElixir Phoenix LiveView'da phx-change="validate" ile her tuş basışında anlık validasyon yapılır. Tüm bu gerçek zamanlı geri bildirim JavaScript yazmadan sağlanır. Alesta Web form projelerinde bu yaklaşım geliştirme süresini %40 azalttı.
Phoenix LiveView real-time uygulamalarının en güçlü özelliklerinden biri PubSub sistemidir. Birden fazla kullanıcıya anlık güncellemeler göndermek son derece kolaydır.
defmodule AlestawebLiveWeb.DashboardLive do
use AlestawebLiveWeb, :live_view
alias Phoenix.PubSub
@topic "alestaweb:notifications"
def mount(_params, _session, socket) do
if connected?(socket) do
# WebSocket bağlantısı kurulduktan sonra abone ol
PubSub.subscribe(AlestawebLive.PubSub, @topic)
end
{:ok, assign(socket, notifications: [], user_count: 0)}
end
def render(assigns) do
~H"""
Alesta Web Canlı Dashboard
Aktif kullanıcı: <%= @user_count %>
Canlı Bildirimler
<%= for notif <- @notifications do %>
<%= notif.message %> - <%= notif.time %>
<% end %>
"""
end
# PubSub mesajı alındığında
def handle_info({:new_notification, notif}, socket) do
{:noreply, update(socket, :notifications, &[notif | &1])}
end
def handle_info({:user_count, count}, socket) do
{:noreply, assign(socket, user_count: count)}
end
end
# Başka bir yerden broadcast (controller, background job vb.)
defmodule AlestawebLive.Notifier do
alias Phoenix.PubSub
def broadcast_notification(message) do
notif = %{message: message, time: DateTime.utc_now()}
PubSub.broadcast(AlestawebLive.PubSub, "alestaweb:notifications", {:new_notification, notif})
end
endElixir Phoenix LiveView'un gizli silahı, altında yatan Erlang BEAM sanal makinesidir. Bu mimari, Phoenix LiveView real-time uygulamalarına benzersiz özellikler kazandırır.
# 1. Supervision Trees - otomatik crash recovery
defmodule AlestawebLive.Application do
use Application
def start(_type, _args) do
children = [
AlestawebLive.Repo,
AlestawebLiveWeb.Endpoint,
{Phoenix.PubSub, name: AlestawebLive.PubSub},
# Crash eden worker otomatik yeniden başlar
AlestawebLive.BackgroundWorker
]
# :one_for_one: Crash eden sadece o process yeniden başlar
Supervisor.start_link(children, strategy: :one_for_one)
end
end
# 2. Hot Code Reloading - sıfır downtime deploy!
# Üretimde kodu değiştir, bağlantılar kesilmez
:sys.suspend(pid)
:code.load_file(MyModule)
:sys.resume(pid)
# 3. Dağıtık sistem - birden fazla node
Node.connect(:"app@server2.alestaweb.com")
Phoenix.PubSub.broadcast(AlestawebLive.PubSub, "topic", message)
# Tüm node'lara otomatik iletilir!
# 4. Benchmark: Phoenix 2M req/s (Node.js ~100K req/s)
# (ApacheBench ile, basit endpoint)Erlang VM'nin Elixir Phoenix LiveView'a kazandırdığı en büyük avantaj: bir process crash ettiğinde tüm uygulama etkilenmez. Bu "let it crash" felsefesi, Alesta Web gibi yüksek kullanılabilirlik gerektiren projeler için idealdir.
Elixir Phoenix LiveView ile Node.js + React stack'ini karşılaştırmak, her birinin güçlü ve zayıf yönlerini ortaya koyar. Alesta Web her iki teknolojiyi de aktif projelerinde kullanmaktadır.
# Elixir Phoenix LiveView vs Node.js/React
# CONCURRENCY
# Phoenix LiveView: BEAM VM, 2M+ eş zamanlı bağlantı/sunucu
# Node.js: Event loop, single-threaded, ~50K bağlantı
# REAL-TIME
# Phoenix LiveView: WebSocket built-in, PubSub, Channels - NATIVE
# Node.js + React: Socket.io veya WebSocket ayrı kurulum gerekir
# JAVASCRIPT
# Phoenix LiveView: SIFIR özel JS (sadece alpine.js opsiyonel)
# React: Her şey JS/TS, state management, bundling gerekir
# FULL STACK COMPLEXITY
# Phoenix LiveView: Elixir/Elixir/Elixir (backend + realtime + UI logic)
# Node.js + React: iki ayrı dil ekosistemi (sunucu + istemci)
# ÖĞRENME EĞRİSİ
# Phoenix LiveView: Fonksiyonel paradigma, yeni söz dizimi → Zorlu
# React: Geniş topluluk, bol kaynak → Kolay
# PAKET EKOSİSTEMİ
# Phoenix LiveView: Hex (küçük ama kaliteli), npm yok
# Node.js: npm (devasa, kalite değişken)
# NE ZAMAN HANGİSİ?
# Phoenix LiveView: Real-time dashboard, chat, canlı takip, finansal veri
# Node.js + React: SPA, mevcut JS ekibi, npm ekosistemi kritikse
# ALESTA WEB SONUCU:
# Phoenix LiveView → Real-time ve yüksek yük gerektiren projeler
# Next.js + React → SEO odaklı ve içerik ağırlıklı sitelerElixir Phoenix LiveView öğrenme eğrisi diktir. Fonksiyonel programlama, pattern matching ve Erlang OTP kavramları önceden bilinmiyorsa birkaç haftalık yatırım gerekebilir. Alesta Web olarak bu yatırımın uzun vadede karşılığını verdiğini gözlemledik.
# Öğrenme yolu önerisi (Alesta Web ekibi):
# 1. Elixir Getting Started Guide (elixir-lang.org)
# 2. "Programming Elixir 1.6" - Dave Thomas kitabı
# 3. "Programming Phoenix LiveView" - Bruce A Tate
# 4. Exercism Elixir track (exercism.org/tracks/elixir)
# 5. fly.io blog - Elixir production dersleri
# Hızlı test: Elixir IEx shell
iex
# Elixir'in temeli: immutability
x = [1, 2, 3]
y = [0 | x] # [0, 1, 2, 3] - x değişmedi
IO.inspect(x) # [1, 2, 3] - immutable!
# Pattern matching
{:ok, result} = {:ok, "alestaweb.com"}
IO.puts(result) # "alestaweb.com"Elixir Phoenix LiveView ile gerçek zamanlı web uygulamaları geliştirmeye hazırsınız! Alesta Web ekibi olarak bu teknolojinin sunduğu JavaScript-az geliştirme deneyimi, Erlang VM'nin inanılmaz eşzamanlılık kapasitesi ve Phoenix LiveView real-time yeteneklerinin modern web projelerinde nasıl fark yarattığını bizzat deneyimledik. Erlang/Elixir ekosistemi sizi bekliyor!
Faydalı Linkler:
© 2026 AlestaWeb - Tüm hakları saklıdır.