CSS’siz olur muymuş hiç? — React & Styled Components

Published in

hesapkurdu-development

5 min readMar 13, 2020

Merhaba,

Çeşitli sebeplerden uzun zamandır ara verdiğimiz blog yazılarını yeniden aktif hale getiriyoruz.

Bugün bahsedeceğimiz konu ise aradan geçen zaman içerisinde bizim için önem derecesi yüksek olan projelerden bir tanesine ait.

Her şeyden önce özet olarak projemizden bahsedelim;

Hesapkurdu.com artık yeni bir iş modeline sahip. Bu modele göre kendi sitemizde yer alan akışlarımız çeşitli partnerler ile paylaşılacak ve bu paylaşımlarla ulaşabileceğimiz kanallar genişleyecek. Yani farklı partnerlerimiz bizim akışlarımızın bir kopyasını kendi domainlerinde barındırabilecek. Fakat genellikle partnerlerimiz API’mizi kullanıp geliştirme yapma yolunu tercih etmiyor. Entegrasyon ve önyüz geliştirme eforları çoğu partnerimiz için zorlayıcı olabiliyor. Bu sebepten dolayı bizim onlar için anahtar teslim bir çözüm sunmamız daha pratik bir yöntem haline geliyor.

Bu çözümü sunduğumuz en önemli partnerlerimizden biri Sahibinden. Aşağıda reklamı yer alan Sahibinden Oto360 ve Emlak360 ürünlerinin içerisinde de bizim çözümümüz yer alıyor.

Çözülmesi Gereken Problemler;

Ayrı bir domain içinde ya da iframe içerisinde yaşayabilen, gerektiği zaman sayfa sahibine event fırlatabilen bir uygulama olmalı,
Çeşitli partnerlere göre özelleştirilebilen bir tema yönetimi sunmalı.

Bugün bahsedeceklerimiz madde 2 ye ait çözümleri içeriyor.

İlk Fikirler

Öncelikli olarak Frontend ekibi içerisinde çeşitli toplantılar yaptık. Hepimizin niyeti Vuejs ile bir uygulama geliştirmekti. Yola Vuejs ile çıktık. Bahsettiğimiz esas problemi çözmek için partner bazlı bir CSS mimarisi planladık. POC gerçekleştirdik. Memnun kalmadık.

Neden memnun kalmadık? Çünkü, biz bu işi CSS ile yönetirsek her partner için özel bir CSS geliştirmesi yapmalıydık. Bu da her partner için ayrı ayrı oluşturulmuş, build alınmış dosyalar demek. Bir tek komponent üzerinde değişiklik yapsak bile bütün partnerlerin dosyaları build edilmeli.

Bu akış için kısa bir örnek yapalım. Mesela 10 tane partnerimiz var. Akış için 5 tane sayfa, her sayfa için bir tane CSS dosyamız var. Her sayfada yer alan bir adet buton komponenti var. Buton komponentinde bir değişiklik yaparsak;

10 partner * 5 sayfa = 50 build edilen, değiştirilmesi ve deploy edilmesi gereken dosya

sonucuna ulaşırız. Biz bunu istemedik.

Bizim için partner eklemek basit bir süreç olmalı. Komponent değişikliği ise tamamen partner yönetiminden bağımsız olmalıydı.

Nasıl Devam Ettik?

Bunun ardından ise farklı methodlar denememiz gerektiğini anladık. CSS-in-JS yöntemlere ağırlık vermemiz gerektiğini düşündük. Ardından karşımıza React & Styled Component birlikteliği çıktı.

Styled Components

Styled Components javascript içerisinde çok daha kolay bir şekilde CSS yazmanıza olanak sağlayan bir kütüphane. Bunu ES6 ile birlikte gelen “template literals” ile kusursuza yakın yapıyor.

Bunu yaparken temayı çalışma anında dışarıdan gelen parametreler ile oluşturabiliyordu. İşte bizim için altın vuruş bu oldu.

Mini Örnek


// Styled Component => Komponent Tanımlamaconst Divider = styled.hr`
    margin: 0;
    border: 0;
    border-top: 1px solid #eaeaea;
}`;// React içerisinde komponent kullanımı<>
 <Divider />
</>

Yukarıdaki kod bloğunda şunları yaptık.

Divider isimli bir değişken tanımladık. styled.hr tanımı ile bu değişkeni hr türünde bir komponente tanımlamış olduk. styled.div deseydik oluşacak komponentimiz div tagi ile tanımlanacaktı.
`` işaretleri içerisinde bildiğiniz CSS yazar gibi kodlarımızı ekledik. Burada SCSS vb. diğer CSS preprocessorden alıştığımız bazı özellikleri de kullanabilirsiniz. Child class vb. tanımlar bunlara örnek.
Bundan sonra komponenti JSX içerisinde standart komponent kullanımı şeklinde kullandık.

İşte komponent oluşturmak ve kullanmak bu kadar basit.

Bazı Avantajları

Benzersiz sınıf isimleri oluşturuyor, bunları hashliyor. Böylece class isimlerini düşünmenize gerek kalmıyor.
Class ve CSS silmek normal şartlarda biraz risklidir. Öngörülemez sonuçlar doğurabilir. Burada ise Styled Components ile yazılan komponenti sildiğiniz zaman ona ait bütün CSS leri silmiş olursunuz.
Critical Path Css oluşturma yetisi var. Code split gibi yöntemlerle beraber kullanıldığında sayfa yükleme hızlarınızda önemli avantajlar sağlayabilirsiniz.

Biz Nasıl Kullandık?

Uygulamamızı UX ekibinden gelen direktiflere göre Styled Components kullanarak sitillendirdik. Bunu yaparken uygulama içerisinde partnere göre özelleşecek bölümlerin bilgisine de ihtiyacımız vardı. Bu bilgiler doğrultusunda stillerimizde dinamik olacak yerlere statik değerler yerine değişken olarak atama sağladık.

Bu değişkenleri yönetebilmek adına Json tipinde bir veri dosyası oluşturduk. Aşağıda bu Json un örnek bir alanını görebilirsiniz.

// Theme Configconst theme = {
    mediaSize: {
        desktop: '1024px'
    },
    colors: {
        primary: '#E14C41',
        secondary: '#5790E6',
        text: '#333',
        link: '#438ED8'
    }
    { ... }
};

Aşağıdaki kod bloğunda uygulamamızı Styled Components ile sarmalıyoruz.

// App.jsimport React from 'react';
import { ThemeProvider } from 'styled-components';function App()  {
    return (
        <ThemeProvider theme={theme}>
            <Views />
        </ThemeProvider>    
    );
}ReactDom.render(<App />, document.getElementById('root'));

Son olarak, tema değişkenini komponentimizde kullanmak aşağıdaki örnek kadar basit. Bununla beraber standart React komponentlerinizde React Context Api kullanarak bu değişkenlere kolayca erişebilirsiniz.

// Button.jsimport styled from 'styled-components';const Button = styled.button`
    background-color: ${props => props.theme.colors.primary};
    color: #FFF;
`;

Mimarimize göre bir tane default tema oluşturduk. Yaklaşık 150 satırlık bir Json dosyası ile uygulamamızı tamamen özelleşebilecek bir hale getirdik. Uygulamamıza herhangi bir konfig ayarı gelmezse default tema değişkenleri ile uygulama ayağa kalkıyor.

Eğer partner bazında temada değişlik yapmak istiyorsanız izlemeniz gereken adımlar şunlar;

Partner için bir Json dosyası oluşturulur.
Json içerisinde default tema üzerinde değiştirilmek istenilen alanların değeri yazılır. Böylece her partner için 150 satırı tekrar etme ihtiyacı yok olur. Örnek vermek gerekirse sadece primary color değişkenini değiştirmek isterseniz o değeri girmeniz yeterli olur. Ardından default tema ve custom yazılmış Json birleşir. Custom alanlar default alanı ezer. Uygulama bu birleşmiş hali ile ayağa kalkar.

// Partner 1 Theme Configconst theme = {
    colors: {
        primary: 'blue',
    }
};

Bize Ne Artılar Kattı?

Günün sonunda partner için oluşması gereken dosya sayısını 1 taneye düşürmüş olduk.
Geliştirme ortamımız tamamen partnerlerimizden bağımsız. Herhangi bir komponentte değişiklik yaparsak partnerler için oluşturduğumuz dosyalara da değişiklik yapmamız gerekmiyor.
CI/CD süreçlerinde partnerlere ait herhangi bir şey taşımamıza gerek kalmadı. Çünkü build edilen dosyalarımızda onlara ait hiçbir şey kalmadı.
Birden fazla partnere tek bir projede hizmet veriyoruz. Geçmişe dönük değişiklikler yapmak meşakkatli olabiliyor. Fakat artık her şey bir komponent dosyasının içerisinde. Kullanılmayan komponent klasörü silindiği an ondan geriye bir şey kalmıyor.
Bir de vizyon kattı. Şu an Json üzerinden özelleştirilebilir bir tema yönetimimiz var. Bugün itibari ile bunu statik tutuyoruz. Fakat bu dosyaların Api’den gelmemesi için hiçbir engel yok. Böylece statik dosyaları da yok edebiliriz. Partner başı 0 dosya sayısına ulaşıp süreç esnasında bütün bağı kopartabiliriz.

Sonuç

Bizim için alışılmışların dışında bir geliştirme fırsatı oldu. Bu fırsatı yakalayabilmemiz teknoloji bağımlısı değil proje üzerinde arge yapıp doğru teknoloji altyapısını öyle seçme alışkanlığımız sayesinde meydana geldi.

Styled Components ihtiyacınız olan spesifik alanlar için size yeni bir dünya sunuyor. Styled System vb. paketler ile bu dünyayı genişletmenize olanak sağlıyor.

Buraya kadar bizimle kaldığınız için teşekkürler :)

Bu yazı veya herhangi başka bir içerik hakkında sormak istediğiniz soruları ve konuşmayı istediklerinizi dev@hesapkurdu.com mail adresinden bize iletebilirsiniz.

Yeniden görüşmek üzere.