Modern web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimi, ba\u015far\u0131n\u0131n anahtarlar\u0131ndan biri haline geldi. Sayfa yenilemelerini en aza indirerek veya tamamen ortadan kald\u0131rarak ak\u0131c\u0131 bir etkile\u015fim sunmak, kullan\u0131c\u0131lar\u0131n uygulaman\u0131zda daha fazla zaman ge\u00e7irmesini sa\u011fl\u0131yor. Peki, Rails gibi geleneksel sunucu tarafl\u0131 render motoruyla bu SPA (Single Page Application) benzeri deneyimi nas\u0131l yakalayabiliriz? \u0130\u015fte tam da bu noktada, \u00f6zel elementler (Custom Elements) devreye girerek Rails uygulamalar\u0131n\u0131za sat\u0131r i\u00e7i d\u00fczenleme (inline editing) g\u00fcc\u00fc kat\u0131yor. Bu makale, Rails backend’ini modern frontend yetenekleriyle birle\u015ftirerek kullan\u0131c\u0131lar\u0131n\u0131za kesintisiz bir deneyim sunman\u0131z i\u00e7in size ad\u0131m ad\u0131m rehberlik edecek.<\/p>\n
G\u00fcn\u00fcm\u00fcz dijital d\u00fcnyas\u0131nda kullan\u0131c\u0131lar, uygulamalardan y\u00fcksek h\u0131z, kesintisizlik ve sezgisellik beklemektedir. Eskiden bir veriyi d\u00fczenlemek i\u00e7in ayr\u0131 bir sayfaya y\u00f6nlendirilmek veya bir modal a\u00e7mak kabul edilebilirken, art\u0131k bu t\u00fcr duraklamalar kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan birer engel olarak g\u00f6r\u00fclmektedir. Kullan\u0131c\u0131lar, sosyal medya platformlar\u0131ndan e-ticaret sitelerine kadar her yerde an\u0131nda geri bildirim ve h\u0131zl\u0131 etkile\u015fim aray\u0131\u015f\u0131ndad\u0131r. \u0130\u015fte bu beklentiler, sat\u0131r i\u00e7i d\u00fczenlemeyi sadece bir “ek \u00f6zellik” olmaktan \u00e7\u0131kar\u0131p, adeta bir “zorunluluk” haline getirmi\u015ftir.<\/p>\n
Sat\u0131r i\u00e7i d\u00fczenleme, kullan\u0131c\u0131n\u0131n mevcut i\u00e7erik \u00fczerinde do\u011frudan de\u011fi\u015fiklik yapmas\u0131na olanak tan\u0131r. \u00d6rne\u011fin, bir g\u00f6rev listesindeki bir \u00f6\u011fenin ad\u0131n\u0131 de\u011fi\u015ftirmek, bir e-tablo h\u00fccresindeki de\u011feri g\u00fcncellemek veya bir blog yaz\u0131s\u0131n\u0131n ba\u015fl\u0131\u011f\u0131n\u0131 d\u00fczenlemek gibi i\u015flemler, sayfa yenilemesi olmadan, kullan\u0131c\u0131n\u0131n g\u00f6z\u00fcn\u00fcn \u00f6n\u00fcnde ger\u00e7ekle\u015fir. Bu, ba\u011flam kaybetme sorununu ortadan kald\u0131r\u0131r ve kullan\u0131c\u0131n\u0131n odaklanmas\u0131n\u0131 sa\u011flar. Geleneksel yakla\u015f\u0131mlarda, bir d\u00fczenleme i\u015flemi i\u00e7in ayr\u0131 bir form ekran\u0131na gidildi\u011finde, kullan\u0131c\u0131 mevcut sayfadaki di\u011fer bilgileri g\u00f6zden kaybeder ve bu da bili\u015fsel y\u00fck\u00fc art\u0131r\u0131r. Sat\u0131r i\u00e7i d\u00fczenleme, bu ek ad\u0131mlar\u0131 ortadan kald\u0131rarak i\u015f ak\u0131\u015f\u0131n\u0131 do\u011fal ve ak\u0131c\u0131 hale getirir.<\/p>\n
\u00d6zellikle i\u015f uygulamalar\u0131nda, veri giri\u015finin ve d\u00fczenlemesinin yo\u011fun oldu\u011fu durumlarda, sat\u0131r i\u00e7i d\u00fczenleme, \u00e7al\u0131\u015fan verimlili\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir. \u00d6rne\u011fin, bir CRM uygulamas\u0131nda m\u00fc\u015fteri notlar\u0131n\u0131 veya bir envanter y\u00f6netim sisteminde \u00fcr\u00fcn \u00f6zelliklerini h\u0131zl\u0131ca g\u00fcncellemek, kullan\u0131c\u0131lar\u0131n g\u00f6revlerini daha etkin bir \u015fekilde tamamlamas\u0131na yard\u0131mc\u0131 olur. Ayr\u0131ca, bu yakla\u015f\u0131m, uygulaman\u0131n genel tepkiselli\u011fini art\u0131rarak bir Single Page Application (SPA) hissi verir, ancak bunu karma\u015f\u0131k bir frontend \u00e7at\u0131s\u0131na ba\u011fl\u0131 kalmadan ba\u015farabiliriz. Bu sayede, Rails’in sunucu taraf\u0131ndaki sa\u011flaml\u0131\u011f\u0131n\u0131 ve h\u0131zl\u0131 geli\u015ftirme yeteneklerini korurken, frontend taraf\u0131nda modern bir deneyim sunma esnekli\u011fine sahip oluruz.<\/p>\n
Web Components standard\u0131n\u0131n bir par\u00e7as\u0131 olan \u00f6zel elementler (Custom Elements), bu modern etkile\u015fimleri olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc ve standartla\u015ft\u0131r\u0131lm\u0131\u015f bir yol sunar. \u00d6zel elementler, kendi HTML etiketlerimizi tan\u0131mlamam\u0131za, kendi davran\u0131\u015flar\u0131n\u0131 ve stillerini kaps\u00fcllememize olanak tan\u0131r. Bu, yeniden kullan\u0131labilir, okunabilir ve y\u00f6netilebilir bile\u015fenler olu\u015fturmam\u0131z anlam\u0131na gelir. Rails’in View katman\u0131nda bu \u00f6zel elementleri kullanarak, backend’den gelen veriyi dinamik olarak g\u00fcncelleyebilen ve kullan\u0131c\u0131 etkile\u015fimlerine an\u0131nda yan\u0131t verebilen etkile\u015fimli aray\u00fczler in\u015fa edebiliriz. Bu, frontend ve backend aras\u0131ndaki ayr\u0131m\u0131 temiz tutarken, her iki d\u00fcnyan\u0131n da en iyi \u00f6zelliklerini bir araya getirir.<\/p>\n
Rails uygulamalar\u0131n\u0131za \u00f6zel elementler entegre etmek, d\u00fc\u015f\u00fcnd\u00fc\u011f\u00fcn\u00fczden \u00e7ok daha basit. Modern Rails s\u00fcr\u00fcmleri, JavaScript bundler’lar\u0131 (\u00f6rne\u011fin esbuild) ile sorunsuz bir \u015fekilde entegre olmu\u015ftur, bu da Web Components gibi taray\u0131c\u0131 standartlar\u0131n\u0131 kullanmay\u0131 kolayla\u015ft\u0131r\u0131r. \u0130lk olarak, temiz bir Rails projesiyle veya mevcut bir projenizle ba\u015flayal\u0131m. E\u011fer yeni bir proje olu\u015fturuyorsan\u0131z, a\u015fa\u011f\u0131daki komutla ba\u015flayabilirsiniz:<\/p>\n
\nrails new inline_editing_app --css tailwind --javascript esbuild\ncd inline_editing_app\n <\/pre>\n<\/code><\/p>\n
Bu komut, Tailwind CSS ve esbuild JavaScript bundler'\u0131 ile yeni bir Rails uygulamas\u0131 olu\u015fturur. esbuild, \u00f6zel elementler i\u00e7in yazd\u0131\u011f\u0131m\u0131z JavaScript kodunu paketlemek ve taray\u0131c\u0131da \u00e7al\u0131\u015fabilir hale getirmek i\u00e7in kullan\u0131lacakt\u0131r. \u00d6zel elementler, standart JavaScript API'leri \u00fczerine in\u015fa edildi\u011fi i\u00e7in ek bir frontend framework'\u00fcne (React, Vue gibi) ihtiyac\u0131n\u0131z yoktur, ancak StimulusJS gibi hafif bir k\u00fct\u00fcphane, daha karma\u015f\u0131k etkile\u015fimleri y\u00f6netmek i\u00e7in m\u00fckemmel bir tamamlay\u0131c\u0131 olabilir. Bu makalede, saf Custom Elements odakl\u0131 bir yakla\u015f\u0131m benimseyece\u011fiz.<\/p>\n
Projenizi olu\u015fturduktan sonra, JavaScript dosyalar\u0131n\u0131z\u0131 organize etmek \u00f6nemlidir. Rails 7 ile birlikte gelen app\/javascript<\/code> dizini, bu t\u00fcr dosyalar i\u00e7in ideal bir yerdir. \u00d6zel elementlerimizi bu dizinin alt\u0131nda, \u00f6rne\u011fin app\/javascript\/custom_elements<\/code> \u015feklinde bir klas\u00f6rde tutabiliriz. \u0130lk \u00f6zel elementimizi tan\u0131mlayal\u0131m: Bir metin alan\u0131n\u0131 sat\u0131r i\u00e7i d\u00fczenlenebilir hale getirecek basit bir bile\u015fen.<\/p>\napp\/javascript\/custom_elements\/editable_field.js<\/code> dosyas\u0131n\u0131 olu\u015fturun ve i\u00e7ine a\u015fa\u011f\u0131daki temel yap\u0131y\u0131 ekleyin:<\/p>\n\n\/\/ app\/javascript\/custom_elements\/editable_field.js\nclass EditableField extends HTMLElement {\n constructor() {\n super(); \/\/ HTMLElement'in constructor'\u0131n\u0131 \u00e7a\u011f\u0131r\u0131yoruz\n this.attachShadow({ mode: 'open' }); \/\/ Shadow DOM olu\u015fturuyoruz\n this.isEditing = false;\n }\n\n connectedCallback() {\n \/\/ Element DOM'a eklendi\u011finde \u00e7a\u011fr\u0131l\u0131r\n this.render();\n }\n\n render() {\n this.shadowRoot.innerHTML =