React Serisi

React Hangi En İyi Pratikler Üzerine İnşaa Edildi ?

Bu yazıda Facebook React projesini nasıl ortaya çıkardığını ve bu projeyi geçmişten gelen hangi pratikler ve deneyimler üzerine inşaa ettiklerini analiz etmeye çalışacağım

Onur Dayıbaşı

Published in

Frontend Development With JS

5 min readFeb 27, 2019

React 2013 yılında ortaya çıkmış UI Bileşenleri geliştirme kütüphanesidir. Peki neden yeni bir UI Kütüphanesine ihtiyaç duyuldu.

React isn’t an MVC framework.

React MVC framework olmadığını örüntüsündeki sadece V(View) katmanı sadece Rendering ve User Interaction kısmı için bir kütüphane olduklarını Model ve Controller yerine ise Flux örüntüsü kullanılması gerektiğini belirttiler.

1. Kavram (Flux Pattern)

Bir sürü MVC Web Framework varken(Backbone C=Collection, Angular, Ember, Knockout) , React bunun yerine Flux pattern ile çalışabilir yeni bir yaklaşımla ortaya çıkmıştır.

Tekrar tekrar kullanılabilir (reusable)
Bileşenlerin birbirini içerebildiği (composable)
UI bileşenleri geliştirebileceğiniz bir altyapı oluşturma çalışılmıştır.

Bunun için bileşenler, sunucu, kullanıcı etkileşimindeki veri yönetimi ile değil . Tek yönlü akan verinin (zaman içerisinde değişen veriyi) göstermeye odaklanan bir kütüphane olarak geliştirilmiştir.

Yukarıdaki cümleyi anlayabilmemiz için öncelikle

MVC(Model View Controller) örüntüsü (Detaylı Anlatım)

Flux örüntüsünü neler olduğunu ve farklarını anlıyor olmamız gerekiyor. (Detaylı Anlatım)

1.3 Flux MVC’ye Göre Artıları

MVC ve Flux karşılaştırdığımızda Flux genel bileşen etkileşimi daha belirli ve zorunlu akış üzerinden güncellendiğini görebilirsiniz. Store yani Veri Katmanın

Public bir obje olması ve tüm uygulamanın verisini içermesi ile MVC deki model kavramından ayrılıyor.
Veriyi isteyen bileşenin Store üzerinden istediğini veriyi ve güncellenmesini dinleyebilmesi çok çok büyük bir avantaj. Kodunuzun daha temiz olmasını sağlıyor. Tabi güncelleme komut objeleri ile tek yönlü gerçekleştirilmesi zorunluluğu var.

MVC de bunu Controller veya bu Controller yöneten Mediator örüntüsündeki bir üst yönetici yapı ile çözmek gerekiyor veya bileşenleri birbirlerinin interface register eden bir mekanizma ile (Dependency Injection) bağlamak gerekiyor. Buda çok etkileşimli UI bileşenleri ve oldukça karmaşık bağımlılıkların oluşmasına neden oluyor.

Uygulamanın veri ve durum(state) katmanının Store olarak ayrılması ve Dispatcher üzerinden aksiyonlar ile yönetilmesi bu karmaşıklığın basit bir şekilde yönetilmesine olanak sağlamıştır.

React doesn’t use templates.

2. Kavram (JSX vs Templates)

Template Rendering sizin birden çok tekrar eden UI bileşenleriniz var. Menu, Liste ve Tablo vb. Bu tekrarlı yapıları HTML DOM içerisine entegre etmek için,

Yöntem 1: String replace yöntemi ile kendimiz template nesneleri oluşturup DOM nesnesinin içerisine JQuery veya JS ile ekleyebilirsiniz. Bu konuda örnekler ile nasıl çalıştığını görmek için aşağıdaki yazımı okuyabilirsiniz.

DOM API kullanım Yöntemleri

Yöntem 2: Template Engine kullanarak bu işlemi yapabiliriz. Temel olarak Template, Data ve bunu HTML nesnesine dönüştüren Template Engineden oluşur. En popüler Template Engine (Mustache.js, Handlebars, doT, EJS, Underscore bunlar örnek).

Template Engine nasıl çalıştığını örnekler ile görmek için aşağıdaki yazılarımı okuyabilirsiniz.

Yöntem 3: Angular ve Vue dakine benzer geliştirilmiş HTML kullanımı. HTML içerisine bir takım özel keyword ile templating işlemini gerçekleştirilir. (ng-if, ng-bind, v-if, v-for, v-model, v-class ….)

Yöntem 4: JSX

JSX sizin React API ile Javascript Component oluşturma işleminizi kolaylaştıracak bir template dilidir. JSP, PHP, Mustache vb . gibi dışarıda kod içerisinde hazırladığınız değişken ve obj ve fonksiyonları bu template dili sayesinde çok rahatlıkla diğer bileşenlere parametre olarak geçirebilir ve HTML dilindeki gibi Parent — Child ilişkili bileşenler tanımlayabilirsiniz. HTML yapısında div, span vb.. varken React ile kendi oluşturduğunuz bileşenleri ve özelliklerini kolay bir şekilde tanımlayabilirsiniz.

React JSX ve DOM mekanizmasının nasıl çalıştığını işin arkaplanını öğrenmek için aşağıdaki yazılarımı okuyabilirsiniz.

Reactive updates are dead simple.

3. Kavram (Virtual DOM vs Compile/Link)

Geleneksel yöntemlerde veri güncellenmesi ile DOM da hangi alanın güncellendiğinin anlaşılması ve buna göre DOM un güncellenmesinin gerçekleştirilmesi gerekmektedir. Angular gibi declarative dillerde bunu Compile/Link fonksiyonları kullanılarak yapılması gerekir.

compile function — The compile function is relatively rare in directives, since most directives are concerned with working with a specific DOM element instance rather than transforming the template DOM element. Any operation which can be shared among the instance of directives should be moved to the compile function for performance reasons.
link function — It is rare for the directive not to have a link function. A link function allows the directive to register listeners to the specific cloned DOM element instance as well as to copy content into the DOM from the scope.

React ise render metodlarından dönen değerler ile basit bir gösterim ağacı oluşturur. Bu ağaç DOM değildir. Virtual DOM dediğimiz bu kavram React ara katmanda bu ağacı oluşturmasına güncellemelere göre update/delete etmesine ve buna bağlı DOM nesnesini en az değişikliği bulacak şekilde diff(fark) bulduktan sonra gerçekleştirir. React bu işleme reconcilation denir.

4. How React.JS Created With Pete Hunt

How React.JS Created With Pete Hunt . podcast dinlediğinizde React daha public duyurulmadan önce Facebook içerisinde kullanıldığı anlatmaktadır. Facebook reklam ekranlarının çok karmaşık yapıdadır. Bu ekranların geliştirilmesinin mevcut UI araçları ile çok zorlanıldığından bu projenin 2,3 kişinin geliştirmesi ile başlayan bir proje olduğunu anlatıyor. Saniyede UI birçok callback geldiği ve bu callback ’lerin sıralanarak işlenme zorluğunu anlatıyor.
JSX vb kavramlar şu andakilerden farklılık göstersede ilk geliştirme aşamasıdaki yapıları best-practice üzerine kurmuşlar. En baştan Instagram ReactNative düşüncesiyle ServerSide Rendering vb için çoklu renderer desteği olacak şekilde geliştirmişler. Jordan Walke Facebook Ads kısmında ilk React temellerini atan kişidir.
Pete Hunt React gibi bir framework geliştirmek için nerelerden esinlendiklerini nereleri takip ettiklerini , problemleri nasıl bulduklarını ve çözdüklerini anlatıyor.
React’in ana mantığı UI Bileşenlerin Rendering üzerine kurulmasıdır. React’in esas işi bu rendering kısmını oldukça performanslı ve verimli bir şekilde gerçekleştirmesi ve kullanıcıya büyüleyici bir UI etkileşim imkanı vermesidir.
React Flux aslında Event Sourcing dediğimiz Design Pattern kitabında gördüğümüz Command Pattern oldukça benzerdir. Flux aslında UI bileşenlerin iç içe birbirini tuttuğunu ve bunlara tek tek durumları geçirme zorunluluğu doğuruyor. Bu da oldukça karmaşık ve zahmetli bir iş çıkarıyor. Flux Mimari ise bu State’leri Global bir yerden vererek bütün bileşenlerin bundan faydalanmasını sağlıyor.
Flux bu kısmı Global gibi tutarken bu veriler immutable ve state değişimleri oldukça kontrollü bir şekilde gerçekleştiriyor. Reducer ve Store’ların tek bir yerden çalıştırılabiliyor olması ve debug kolaylığı Flux ‘un avantajları arasında gösterebiliriz.

5. Referanslar

Okumaya Devam Et 😃

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