Mövzunu Açan
#0
Tek sayfa uygulamaları (SPA), kullanıcı deneyimini geliştirmek için web uygulamalarının dinamik ve hızlı bir şekilde çalışmasını sağlayan modern bir yaklaşımdır. Bu yazıda, Vanilla JavaScript kullanarak nasıl SPA geliştirebileceğinizi ele alacağız.
İlk olarak, SPA'nın temel özelliklerinden bahsedelim. SPA'lar, sayfa yenilemesi olmadan içerik güncellemelerini mümkün kılar. Bu, kullanıcıların uygulamada gezinirken kesintisiz bir deneyim yaşamasını sağlar. Bunun için JavaScript'in
Örneğin, basit bir SPA uygulaması geliştirmek için aşağıdaki adımları izleyebilirsiniz:
Bu basit SPA uygulaması, kullanıcıların sayfalar arasında geçiş yapmalarına olanak tanır, ayrıca URL'lerin değişimiyle birlikte içerik dinamik olarak güncellenir. Vanilla JavaScript ile SPA geliştirmenin avantajı, ek kütüphanelere ihtiyaç duymadan sade bir yapı oluşturabilmenizdir.
Sonuç olarak, Vanilla JavaScript ile SPA geliştirmek oldukça eğlenceli ve öğretici bir süreçtir. Uygulamanızın karmaşıklığına göre daha fazla özellik ekleyerek bu yapıyı genişletebilirsiniz. SPA geliştirirken karşılaştığınız zorluklar veya başarılı örnekleriniz varsa, bunları paylaşabilirsiniz.
İlk olarak, SPA'nın temel özelliklerinden bahsedelim. SPA'lar, sayfa yenilemesi olmadan içerik güncellemelerini mümkün kılar. Bu, kullanıcıların uygulamada gezinirken kesintisiz bir deneyim yaşamasını sağlar. Bunun için JavaScript'in
History API'sini kullanarak URL'leri yönetebiliriz.Örneğin, basit bir SPA uygulaması geliştirmek için aşağıdaki adımları izleyebilirsiniz:
- HTML Yapısı: Uygulamanızın temel HTML yapısını oluşturun. Ana bir
divelementi, içerik alanını temsil edecek. Örneğin:
CODE
1 <div id="app"></div>- JavaScript Router'ı Oluşturma: Farklı sayfalar arasında geçiş yapmak için bir router oluşturmalısınız. Aşağıda basit bir örnek verilmiştir:
CODE
123456789101112131415161718192021222324 const routes = {
'/': '<h1>Anasayfa</h1>',
'/hakkinda': '<h1>Hakkında</h1>',
'/iletisim': '<h1>İletişim</h1>',
};
function router() {
const path = window.location.pathname;
const content = routes[path] || '<h1>404 Not Found</h1>';
document.getElementById('app').innerHTML = content;
}
window.onpopstate = router;
document.addEventListener('click', (event) => {
if (event.target.matches('a')) {
event.preventDefault();
const path = event.target.getAttribute('href');
history.pushState(null, '', path);
router();
}
});
router(); // Sayfa ilk yüklendiğinde router'ı çalıştır- Navigasyon Linkleri: HTML içerisinde navigasyon linkleri oluşturmalısınız. Örneğin:
CODE
12345 <nav>
<a href="/">Anasayfa</a>
<a href="/hakkinda">Hakkında</a>
<a href="/iletisim">İletişim</a>
</nav>Bu basit SPA uygulaması, kullanıcıların sayfalar arasında geçiş yapmalarına olanak tanır, ayrıca URL'lerin değişimiyle birlikte içerik dinamik olarak güncellenir. Vanilla JavaScript ile SPA geliştirmenin avantajı, ek kütüphanelere ihtiyaç duymadan sade bir yapı oluşturabilmenizdir.
Sonuç olarak, Vanilla JavaScript ile SPA geliştirmek oldukça eğlenceli ve öğretici bir süreçtir. Uygulamanızın karmaşıklığına göre daha fazla özellik ekleyerek bu yapıyı genişletebilirsiniz. SPA geliştirirken karşılaştığınız zorluklar veya başarılı örnekleriniz varsa, bunları paylaşabilirsiniz.