Photo by Cesar Carlevarino Aragon on Unsplash

GELİŞTİRİCİ ARAÇLARI

Backend Olmadan Frontend Geliştirme Yöntemleri

Backend olmadan frontend geliştirme biraz garip gelebilir. Ama geliştirme aşamasında veya testler sırasında aşağıda bahsedeceğim araçlar işlerinizi hızlandırabilir.

Frontend Development With JS
2 min readFeb 17, 2022

--

Frontend geliştirirken bazı kısımlarda herkesten bağımsız bir takım kodlar geliştirip denemeler yapmak istersiniz. Veya Frontend Testing için bir takım mevcut durumu benzerini oluşturacak araçlara ihtiyaç duyarsınız.

Bu biz geliştiricileri ortamdan soyutlayıp, hızlıca birçok konuyu test etme, konuyu ufak parçalara ayırıp analiz etme imkanı sunar.

Web Sunucusunu Simüle Etmek

En basitinden statik bir html, css, js, vb resim, pdf benzeri dosyaları bir basit bir dosya sistemi ile içine klasörlerin içerisine sürükleyip kullanımı, bunun için ben genelde HTTPServer kullanıyorum.

HTTPServer is a simple, zero-configuration command-line static HTTP server. It is powerful enough for production usage, but it's simple and hackable enough to be used for testing, local development and learning.

React vb kütüphanelerde (Vue, Angular, Svelte ..) gibi yapılarda Webpack Dev Server ve Hot Module Replacement (ekstra bilgi)

Özet: Jest, Tomcat, JBoss, Express vb gibi Backend Web sunucularına ihtiyaç duymadan geliştirme yapmamızı sağlar.

Backend API Simüle Etmek

Frontend anlamında ekranlarımızı oluşturmak için belki backend ihtiyaç duymayabiliriz ama anlamlı ekranlar oluşturmak, bileşenlerin çalışma mekaniklerini anlamak için veriyi ihtiyacımız olur. Bu durumda Backend API nasıl simüle edebiliriz.

JSON Server Rest API ve entity ilişkilerini çok basit bir db.json oluşturarak size backend API sağlıyor.

json-server --watch db.json

Mockoon Mockoon is the easiest and quickest way to design and run mock REST APIs.

MSW (Mock Service Worker)API mocking of the next generation

Özet: Buradaki amacımız API ihtiyacımızı Backend geliştirmesini beklemeden hızlı bir şekilde FE geliştiricisi olarak karşılayarak Backend ihtiyacını mock veriler ile çözmek.

Mock Service Worker

Dijital bahçe içerisinde Static Address Fetch Dict örneğinde önceden S3, CDN üzerinden statik veri sunarak il, ilçe, mahalle dönen bir yapıydı. Bunu daha esnek ve hızlı geliştirebilir yapmak için bu yapıyı MSW geçirdim. Çok hızlı bir şekilde handler geliştirmek mümkün

https://onurdayibasi.dev/form-static-address-fetch-dict

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.

--

--