İçeriğe geç
Muhammet Şafak
en

Uzmanlık

JavaScript ve TypeScript geliştiricisi — web'i ve mobili aynı API'den besliyorum

Aynı özelliği Laravel API, web arayüzü ve React Native uygulaması olarak üç katmanda birden teslim ettiğimde, işin zor kısmının kod değil sözleşme olduğunu gördüm.

Başlangıç
2008 Başlangıç
yıl
18 yıl
yazı
41 yazı
proje
13 proje

JavaScript & TypeScript ekosisteminde ben

Tam hikâye: Hakkımda

Bu ekosistemdeki kimliğim tek cümleyle şu: ürünün arka ucunu yazan ve o ürünün web ile mobil yüzeyini aynı sözleşmeye oturtan kişi. Tasarım sistemi kurmuyorum; API ile konuşan arayüzü kuruyorum. JavaScript ve TypeScript bu sayfada bir tercih değil, ürünün kullanıcıya değdiği katmanın dili.

Arayüz mimarisinin sistem tarafına değen kısımlarını — sunucu tarafında render kararları, önbellek stratejisi — sade.dev tarafında yazıyorum.

Bu ekosistemde ne teslim ediyorum

Ortak noktaları hepsinin aynı sözleşmeye bağlanması; tasarım sistemi kurmuyorum, API ile konuşan arayüzü kuruyorum.

  • Üç katman, tek sözleşme

    Aynı özellik REST API, web arayüzü ve mobil uygulama olarak birden çıkıyor. Ayrımı katı tutuyorum: web ile mobil birbiriyle hiç konuşmuyor, yalnızca ortak API üzerinden haberleşiyor.

  • Mobil istemci

    React Native ve Expo ile aynı ürünün iOS ve Android karşılığı. Mağazaya gönderme süreci de bu işin parçası.

  • Tip katmanı

    TypeScript API'den arayüze tek sözleşme taşıyor. Sözleşmeyi iki uçta ayrı ayrı yazmak, sözleşmenin olmaması demek.

  • Derleme ve stil hattı

    Geliştirme sunucusunu saniyelere indiren derleme hattı ve utility-first stil katmanı. Araç zinciri değişiyor, bu iki katmanın işi aynı kalıyor.

Zor kısım kod değil, sözleşme

Arayüz tarafında karşılaştığım hataların çoğu arayüz hatası gibi görünüp sözleşme hatası çıkıyor. Bir alanın adı, bir tarihin biçimi ya da bir hata kodunun anlamı katmanlar arasında ayrıştığında sonuç, hepsi ayrı görünen ama aynı kökten gelen bir hata kümesi oluyor. Bu yüzden işe arayüzün nasıl görüneceğinden değil, arka ucun ne söz verdiğinden başlıyorum.

Tek bir kütüphaneye bağlı değilim

Üçü de aynı sorunun farklı cevabı; hangisinin açılacağına ürünün ihtiyacı karar veriyor.

  • Vue tarafı

    Uzun süre burada çalıştım: bileşen tabanlı arayüz mimarisi, yönlendirme ve durum yönetimi. Kaybolmuş bir yatırım değil — iki yaklaşımı karşılaştırabildiğim yer orası.

  • React tarafı

    Ağırlık merkezinin buraya kayması mobil ihtiyaçla oldu; aynı zihinsel modelin web ve mobilde birlikte durması işleri kolaylaştırdı.

  • Sunucu tarafı framework'ten çıkan arayüz

    Modern bir arayüzü sunucu tarafı framework'ün içinden çıkaran ve tarayıcıya inen kodu azaltan yaklaşımlar.

Bir aracı neye göre değiştiriyorum

Bu ekosistemde en uzun süredir izlediğim şey araçların değişmesi — jQuery ile AJAX'tan Gulp'a, Webpack'e, Vite'a. Karar her seferinde aynı sıradan geçti.

01 Ödenen bedel her zaman yapılandırma
Her geçişte ödediğim şey aynıydı: yapılandırma. Aracın kendisi değil, onu çalışır hâle getiren ayar yükü pahalı olan.
02 Geri dönüş bedelden büyük olmalı
Yeni bir aracı, ödediğim yapılandırma bedelinden fazlasını geri veriyorsa alıyorum. Vermiyorsa eski araç yerinde kalıyor.
03 "Daha modern" bir gerekçe değil
Aracın yaşı bir ölçü değil. Ölçü, o aracın bu üründe hangi somut işi ucuzlattığı.
04 Build süresi de bir kalem
Aynı ölçüyü derleyici tarafında da uyguluyorum: build süresi bir maliyet kalemi, bir ayrıntı değil.

Mobil tarafta kendi kurallarını dayatanlar

Web'deki React deneyiminin transfer olacağı beklentim kısmen doğru çıktı: bileşen düşüncesi aynı, geri kalanı değil.

  • Gezinme mimarisi

    Ekran mimarisiyle birlikte kurulan gezinme; web'deki router alışkanlığı buraya olduğu gibi taşınmıyor.

  • Liste render performansı

    Uzun listelerde render performansı, mobil tarafta ayrı ayrı üzerinde çalıştığım başlıklardan biri.

  • OTA ile sürüm yönetimi

    Güncellemenin mağaza turuna girmeden dağıtılabilmesi, sürüm yönetimini kendi başına bir konu hâline getiriyor.

  • Mağaza teslimi

    Gönderim sürecinin kendisi de bu işin parçası — ve uygulamanın kodundan bağımsız bir zanaat.

Neyi yapmıyorum

Erişilebilirlik denetimi, tasarım sistemi kurma ve ileri düzey animasyon işleri benim uzmanlık alanım değil; bunu söylemem gerektiğinde söylüyorum. Arayüz mimarisinin sistem tarafına değen kısımlarını — SSR kararları, önbellek stratejisi — yazdığım yer ise sade.dev.

Bu alandaki son yazılar

Tümünü gör

Bu alanda geliştirdiklerim

Tüm Labs kayıtları

Her araç marka-modelinin kendi kulübü olduğu, ICE ile EV'yi aynı çatıda tutan Reddit-benzeri topluluk platformu; API, web ve mobil paralel yürüyor.

Şu an ne yapıyor

Her araç marka-modelinin kendi kulübü olduğu topluluk platformu; kimlik, içerik, bildirim ve moderasyon akışları tek şemalı API üzerinde yürüyor, web ve mobil istemciler aynı şemayı paylaşıyor. Aracının modeline özel bir topluluk arayan kullanıcı bugün katılabilir.

Web Mobil Laravel PHP PostgreSQL +6 daha
Temmuz 2026 — Eylül 2026

Düğüm-çizgi bir tahtada deterministik hamlelerle ilerleyen, çevrimdışı bir bulmaca oyunu; 36+6 bölümü tek bir TypeScript çekirdeği web ve mobile besliyor.

Şu an ne yapıyor

Düğüm-çizgi bir tahtada 36 bölüm + 6 gizli bölümü, şans ya da refleks olmadan tamamen deterministik hamlelerle çözdürüyor; tek TypeScript çekirdeği web (PWA) ve mobil (iOS/Android) istemcisini aynı anda besliyor. silkward.com üzerinden tarayıcıdan oynanabilir.

Web Mobil TypeScript Next.js React +3 daha
Eylül 2026 — Eylül 2026

Unix'ten oyunlaştırılmış bir komut setiyle çözülen, tamamen çevrimdışı bir gece vardiyası simülasyonu; tek oyun motoru web ve mobilde aynı anda çalışıyor.

Şu an ne yapıyor

Gece vardiyasında yedi olay tipini, Unix'ten oyunlaştırılmış yirmi dokuz komutla (gerçek bayraklar, Tab tamamlama, man dahil) çözdürüyor; web (PWA) ve mobil (iOS/Android) sürümü aynı oyun motorunu paylaşıyor. sysadmincrisis.com üzerinden tarayıcıdan oynanabilir.

Web Mobil TypeScript Next.js React +3 daha
Eylül 2026 — Eylül 2026

Bu alanda üretime çıkan işler

Tüm projeler
Garajdaş mimari şeması — marka düzeyi tek kulüple marka-model düzeyi çoklu kulübü karşılaştıran çözünürlük diyagramı, şemanın tek sahibi Laravel API'sinden web (Next.js) ve mobil (Expo/React Native) istemcilere uzanan oklar, tamamlanan beş MVP fazı ve 97 test rozeti

Garajdaş

Devam ediyor

Founder & Developer

Seviye: Aktif Geliştirme

Garajdaş, her araç marka-modelinin kendi kulübü olduğu, içten yanmalı ve elektrikli araçları aynı çatıda tutan bir topluluk platformudur. Tek bir API şeması web (Next.js) ve mobil (Expo/React Native) istemcisi tarafından paylaşılır, tasarım sistemi tek dosyada tanımlı ve elle senkronlanır. MVP fazları kapandı, API'de 97 test var; platform yayında.

Laravel PHP PostgreSQL +6 daha
Eylül 2026 — Devam ediyor
Regnarium tahtası — altıgen harita üzerinde şehirler, ordular ve kesin hasar sayıları gösteren savaş önizlemesi

Regnarium

Devam ediyor

Designer & Developer

Seviye: Talebe Bağlı

Regnarium, 4X stratejinin keşfet-genişle-üret-alt et döngüsünü tek bir oturuma sığdıran, tarayıcıda çevrimdışı çalışan bir strateji oyunudur. 480 altıgenlik harita azami 60 turda kapanır, savaş zar atmaz ve saldırı öncesi görülen önizleme hesabın kendisidir; hesap, sunucu ve izleme yoktur.

TypeScript Next.js React +6 daha
Eylül 2026 — Devam ediyor
SilkWard tahtası — düğüm-çizgi bir grafta oyuncu ilerlerken düşmanın aynı deterministik kuralla adım attığı ve solver-cli'nin BFS ile bölüm zorluğunu ölçtüğü önizleme

SilkWard

Devam ediyor

Designer & Developer

Seviye: Asgari Bakım

SilkWard, düğüm-çizgi bir tahtada 36 bölüm + 6 gizli bölümü tamamen deterministik hamlelerle çözdüren, çevrimdışı bir bulmaca oyunudur. Tek bir TypeScript çekirdeği web (PWA) ve mobil (Expo) istemcisini aynı anda besler; bölüm zorluğu solver-cli aracının BFS ile bulduğu asgari hamle sayısıyla ölçülür. Bugün silkward.com üzerinden oynanabilir durumdadır.

TypeScript Next.js React +3 daha
Eylül 2026 — Devam ediyor

Birlikte kullandığım teknolojiler

  • TypeScript

    API'den arayüze tek sözleşme taşıyan tip katmanı.

  • React

    Bileşen tarafı.

  • React Native

    Aynı ürünün iOS ve Android karşılığı.

  • Expo

    Derleme, mağaza teslimi ve OTA güncelleme.

  • Vite

    Geliştirme sunucusunu saniyelere indiren derleme hattı.

  • Tailwind CSS

    Utility-first stil katmanı.

  • Node.js

    Araç zincirinin çalıştığı yer.

Sık sorulanlar

7 soru

  • JavaScript'i kaç yıldır yazıyorsun?

    2008'den bu yana, 18 yıldır — PHP ile aynı yıl. İkisi aynı işin iki yüzüydü: sunucuda PHP, tarayıcıda önce jQuery, sonra Vue ve React.

  • Frontend geliştirici misin?

    Tam olarak değil. Ben ürünün arka ucunu yazan ve o ürünün web ile mobil yüzeyini de aynı sözleşmeye oturtan taraftayım. Tasarım sistemini sıfırdan kuran kişi değilim; API'yle konuşan arayüzü kuran kişiyim.

  • Vue mu React mi?

    İkisini de yazdım. Vue tarafında bileşen mimarisi, router ve durum yönetimi (Vuex, sonra Pinia) üzerine; React tarafında hooks, concurrent render ve React 19 ile gelen form actions üzerine yazdım. Bugün mobil işler React Native'i zorunlu kıldığı için ağırlık React tarafında.

  • Mobil uygulama da yapıyor musun?

    Evet, React Native ve Expo ile. Kayıtlı projelerden ikisinin mobil istemcisi böyle yazıldı; biri App Store ve Google Play'de yayında. OTA güncelleme, gezinme mimarisi ve liste render performansı üzerine ayrı yazılarım var.

  • TypeScript kullanıyor musun?

    Evet, ve gerekçesi tek bir yerde toplanıyor: API'den arayüze uçtan uca tip güvenliği. Sözleşmeyi iki uçta ayrı ayrı yazmak, sözleşmenin olmaması demek.

  • Bu alanda kaç yazın var?

    Bu sitede JavaScript ekosistemi etiketli 41 yazı ve 13 proje kayıtlı; en eskisi jQuery ile AJAX, en yenisi TypeScript'in yeni derleyicisi.

  • Araç zinciri sürekli değişmiyor mu?

    Değişiyor ve ben de o zinciri Gulp'tan Webpack'e, Webpack'ten Vite'a taşıdım. Ama her geçişte ödediğim şey aynıydı: yapılandırma. Bir aracın yerine yenisini koymak, ancak ödediğiniz yapılandırma bedelinden fazlasını geri veriyorsa doğru karar.

Birlikte çalışalım

Bu ekosistemde bir işiniz varsa, ne yaptığınızı anlatın; nasıl kurulacağını konuşalım.

Sitede Ara

Yazı, proje ve sayfalarda arama yapmak için yazmaya başlayın.

Esc ile kapat Pagefind ile güçlendirildi