Boyner’in Monolitikten Modüler Frontend’e Geçiş Hikayesi

Günümüzde, teknolojinin hızla evrim geçirdiği bir dönemde, işletmeler de rekabet avantajını korumak ve kullanıcı deneyimini iyileştirmek adına teknolojik dönüşümler gerçekleştirmek zorundalar. Bu dönüşümlerden biri de Türkiye’nin önde gelen perakende şirketlerinden biri olan Boyner’in kararlı adımlarıyla şekillendi.

Monolitik Mimari Sorunları ve Karar Anı

Boyner, uzun yıllar boyunca frontend ve backend kodlarını aynı çatı altında barındıran monolitik bir mimariye dayanıyordu. Bu durum, kod kalitesini düşürüyor ve performans sorunlarına yol açıyordu. IT Ekibi, bu sorunların üstesinden gelmek ve daha esnek, modüler bir yapı oluşturmak adına bir dönüşüm kararı aldı.

React.js / Next.js ile Teknolojik Dönüşüm

Kararın ardından, Boyner ekibi React.js ve Next.js teknolojilerine geçmeye karar verdi. React.js’in kullanımıyla birlikte, kullanıcı deneyimi daha etkileşimli hale getirilirken, Next.js ile sunulan Server-Side Rendering (SSR) çözümü sayesinde SEO performansında da belirgin bir artış yaşandı.

Bu teknolojik dönüşüm, sadece müşterilere yönelik web sitesini değil, aynı zamanda şirket içi uygulamaları da kapsadı. React’ın performans avantajları, Boyner’in şirket içi uygulamalarında da hissedildi ve verimlilik artırıldı.

UI Tasarımında SASS ve Tailwind CSS

Projelerin UI (Kullanıcı Arayüzü) kısımları için Frontend ekibi, SASS ve Tailwind CSS gibi güçlü araçlara başvurdu. Bu teknolojiler, geliştiricilere daha etkili ve hızlı bir şekilde stil uygulama imkanı tanıdı. Aynı zamanda, projeler arasında tutarlı bir görünüm sağlamak adına kullanıcı arayüzü tasarım süreçlerini daha da optimize etti.

Monolitik cshtml vs Next.js Component Yapısı: Kısa Karşılaştırma

-Monolitik cshtml

1-HTML ve Logic Bir Arada: cshtml dosyalarında HTML ve C# kodları bir arada bulunur.

@{
    var message = "Merhaba dünya!";
}

<p>@message</p>

2-Bileşen Tabanlı Değil: cshtml, genellikle modüler ve bileşen tabanlı bir yapı sunmaz.

<!-- Monolitik yapı -->
<div>
    <p>Sayfa İçeriği</p>
</div>

3-Sınırlı Yeniden Kullanılabilirlik: Kodun tekrar kullanılabilirliği sınırlıdır, genellikle monolitik yapıda işlev görür.

-Next.js/React.js Component Yapısı:

1- JSX ve Logic Ayrı: React component’leri JSX kullanarak UI’ı temsil eder ve logic’leri ayrı bir şekilde yönetir.

// React component
const Greeting = () => {
    const message = "Hello, world!";
    return <p>{message}</p>;
}

2- Bileşen Tabanlı Geliştirme: React, modüler ve bileşen tabanlı bir yapı sunar, kodun düzenliğini ve bakımını artırır.

// Modüler React bileşeni
const Button = (props) => {
    return <button>{props.label}</button>;
}

3- Yeniden Kullanılabilir Bileşenler: React component’leri, kodun tekrar kullanılabilirliğini artırır ve proje içinde rahatça taşınabilir.

Sonuç

• cshtml monolitik yapısında HTML ve logic bir arada bulunurken, Next.js component yapısı JSX ile HTML ve logic’i ayrıştırarak modüler bir geliştirme deneyimi sunar.
• React component’leri, kodun yeniden kullanılabilirliğini artırır ve bileşen tabanlı geliştirmeye olanak tanır, bu da büyük ve karmaşık projelerde yönetimi kolaylaştırır.

Redux Toolkit ile State Yönetimi ve Query Servis Entegrasyonu:

Redux Toolkit Query, Redux Toolkit’in bir parçası olarak gelen ve servis yönetimi ile cache mekanizmasını kolayca entegre etmenizi sağlayan bir kütüphanedir. Redux Toolkit Query’nin state yönetimi üzerindeki faydaları:

1. Deklaratif ve Modüler API: Redux Toolkit Query, deklaratif bir API kullanarak servis entegrasyonunu ve state yönetimini kolaylaştırır. createApi fonksiyonu, servis endpoint'lerini tanımlamak için kullanılır ve bu sayede modüler bir yapı oluşturabilirsiniz.

// services/api.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => 'posts',
    }),
  }),
});

export const { useGetPostsQuery } = api;

2. Performanslı Cache Mekanizması: Redux Toolkit Query, otomatik bir cache mekanizması içerir. Önceki isteklerin sonuçları otomatik olarak saklanır ve aynı istek tekrar yapıldığında, saklanan veri kullanılarak tekrar bir ağ isteği gönderilmeden önbellekten veri alınır.

// components/PostList.js
import { useGetPostsQuery } from '../services/api';

function PostList() {
  const { data: posts, error } = useGetPostsQuery();

  if (error) {
    return <p>Hata oluştu: {error.message}</p>;
  }

  return (
    <div>
      {posts.map(post => (
        <p key={post.id}>{post.title}</p>
      ))}
    </div>
  );
}

export default PostList;

3. Redux DevTools Entegrasyonu: Redux Toolkit Query, DevTools ile uyumlu olarak gelir ve istekleri, başarı durumlarını, hataları ve güncellemeleri Redux DevTools içinde izlemenize olanak tanır.

4. Redux Toolkit ile Entegrasyon: Redux Toolkit Query, Redux Toolkit ile mükemmel bir şekilde entegre olur. API’yi tanımlarken oluşturulan reducer’lar otomatik olarak Redux store’a entegre edilir.

// store.js
import { configureStore } from '@reduxjs/toolkit';
import { api } from './services/api';

export const store = configureStore({
  reducer: {
    [api.reducerPath]: api.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(api.middleware),
});

6. Performans ve Ölçeklenebilirlik: Toolkit, optimize edilmiş bir şekilde çalışarak performansı artırır ve büyük uygulamalarda ölçeklenebilir bir state yönetimi sunar. Bu, uygulamanızın büyüdükçe performans kayıplarını önler.

7. Kolay Entegrasyon: Redux Toolkit, mevcut Redux projelerine sorunsuz bir şekilde entegre edilebilir. Aynı zamanda yeni bir projede başlamak için de kullanıcı dostu bir yapı sunar.

Redux Toolkit, React uygulamalarında state yönetimini daha etkili, modüler ve sürdürülebilir hale getirerek geliştiricilere önemli avantajlar sunar. Bu sebeplerden dolayı projemizin mimarisini oluştururken Redux Toolkit’i servis yönetimi için ise RTK Query yapısını kullandık.

Sonuç ve Gelecek Adımlar

Boyner, bu teknolojik dönüşümle beraber daha hızlı, daha esnek ve daha güçlü bir Frontend altyapısına kavuştu. Bu başarı, sadece kod kalitesinde değil, aynı zamanda müşteri memnuniyetinde de kendini gösterdi. Gelecekte, Boyner, teknolojik trendlere hızla adapte olmayı sürdürerek müşterilerine en iyi deneyimi sunma vizyonunu devam ettirecek.

Teknolojik dönüşüm, sadece bir şirketin altyapısını yenilemekle kalmaz, aynı zamanda müşteri memnuniyetini artırır ve rekabet avantajını güçlendirir. Boyner’in bu dönüşümü, sektöre öncülük eden başarı hikayelerinin arasında yerini alacaktır.