DOM API USAGE SERIES

UI Bileşenleri Nasıl Evrimleşti ? BackboneJS → ReactJS → Vue Composition API/Svelte/React Hook

Bu yazıda Evan You’nun State Of Components sunumunu analiz etmeye çalışacağım.

Onur Dayıbaşı

Published in

Frontend Development With JS

5 min readApr 17, 2020

Bu yazıda Evan You yani Vue JS kütüphanesini geliştiren kişinin UI bileşenlerin durumunu anlattığı sunumu dotJS konuşmasını analiz edeceğim.

DOM API Kullanım Yöntemleri yazı dizisinde anlatmak istediğim UI kütüphanelerinin DOM yapısı ile iletişimi yani View Rendering → DOM oluşturma konusunu ele almak istiyordum. Aşağıdaki resimdeki başlıkları çıkarıp bu konuda çalışmaya başladım.

Bu sırada karşıma Evan You yapmış olduğu sunum geldi. Tamda aradığım anlatmak istediğim şeyleri anlatmış yani UI Bileşen yapısındaki gelişimi BackboneJS → ReactJS → Vue Composition API/Svelte/React Hook API ile UI bileşen kütüphanelerinin gelişimini çok başarılı bir şekilde anlatmış. Yeniden kendimce bir şeyler yazmak yerine bir analiz yazısı yazmaya karar verdim.

Daha önceden yazdığım yazıda React bir framework olmadığı View Render etme kısmından bahsetmiştim. Bu Vue.js ve Svelte.js içinde geçerli.

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. (Bu benim React Hangi Best Practice üzerine inşaa edildi yazımdan alıntı)

Sunum öncelikle Backbone.View kısmını nasıl ele aldığını anlatıyor. Aslında bir önceki yazımda Backbone.View içerisinde Underscore.JS template, React VirtualDOM vb rendering mekanizmaların kullanılabileceğinden bahsetmiştim.

Backbone ortamında View tanımlanma şekli aşağıdaki şekildedir.

https://www.dotconferences.com/2019/12/evan-you-state-of-components (Backbone)

ES(EcmaScript) birlikte Class yapıları sayesinde React, Ember, Angular ilk bileşen temelli kütüphaneler aşağıdaki yapıda UI bileşenlerini tanımlamaya başladı.

https://www.dotconferences.com/2019/12/evan-you-state-of-components (ES6 Class)

Bu UI tanımlamaları ilk olarak bir state tutup, bu state değişmesini yönetip, bu değişim sonucunda bunu bir template içerisinde Örneğin React için JSX içerisinde renderlemekten ibaretti.

ihttps://www.dotconferences.com/2019/12/evan-you-state-of-components (State Handling)

Zaman içerisinde Generic yapılar ile bu yapıları match etme işlemi başladı. Count bir girdi bileşeni ve tipi number olacak gibisinden. React PropTypes var örneğin. Typescript ile bu tanımlamaları yapabiliyoruz. JS Decorators

https://www.dotconferences.com/2019/12/evan-you-state-of-components (Inputs/Props)

Bileşenlerin yaşam döngüsünün Side Effectleri var. Bileşen mount/unmount ediliyor, gösteriliyor, gizleniyor vb.

https://www.dotconferences.com/2019/12/evan-you-state-of-components (SideEffect in LC)

Birde State değişimlerini yakalamak için kullanılan JS Decorators Watch isimli bir Hook kullanarak count değişikliğini dinleyip buna göre ilgili bileşeni tekrar render etmek gerekiyor.

https://www.dotconferences.com/2019/12/evan-you-state-of-components (SideEffect on State Change)

Bir diğer konuda Sınıf tanımlamasında yer almayan Metadata’nın render edilmesi gerekir.

https://www.dotconferences.com/2019/12/evan-you-state-of-components (MetaData)

Burada 2 tane JS önerisinin durumlarından bahsediyor

Decorators: https://tc39.es/proposal-decorators/
Class Fields: https://2ality.com/2019/07/public-class-fields.html

Inheritance UI Bileşenlerinde düzgün işlemediğini biliyoruz. Bu konuda OOP(Object Oriented Programming) tasarım örüntüleri yerine JS Composition yapısının daha uygun olduğundan bu konuda Fonksiyonel Programlama yazı serisinin içerisinde “Sınıflar ile Kapsama(Composition) Neden Zordur?” konusunda bu konuya daha detaylı değineceğim.

Burada UI Bileşenlerinin kalıtım(inheritance) için neden uygun olmadığını analiz ediyor Evan. Soldaki resimde Nesne Tabanlı Programlamadaki (Örneğin Java) tasarım yapısı bulunuyor. Bu yapı UI yapısında çok da kullanılan ve ihtiyaç duyulan bir yöntem değildir. Daha çok sağ resimdeki gibi farklı UI bileşenlerin kesişen ortak yetenekleri vardır. (Örneğin: tema tüm UI ortak özelliği, geç yüklenebilme).

https://www.dotconferences.com/2019/12/evan-you-state-of-components (UI Components Works)

Birbirinden türeme yerine belli davranışları kullanabilme(compose) edebilme yeteneğinin olması önemlidir. Ama sınıfların ortak davranışları compose edebilmesi oldukça zor bir konudur. Buna çözüm olarak önce Mixin düşünülmüş ama Mixin’de eşit bir paylaşım olmaması, Namespace çakışmaları, hangi özelliğin nerden geldiğinin bilinmemesi üzerine Mixin kullanımı terkedilmiş ve UI kütüphanelerinde tercih edilmemiştir. Bunun yerine React ile birlikte High Order Components ve daha sonrasında Render Props kullanılmaya başladı. Angular ise Service Class Dependency Injection yöntemi ile bu hook bağlantılarını kurmaya çalışıyordu.

UI bileşenleri oluşturmak için sınıflarla bir yere kadar Cross Cutting davranışları dışarıdan hook edecek bir takım çözümler üretilmiş durumda olsada belkide sınıflar UI bileşenleri oluşturmaya uygun yapılar değildi ? Esas mesele daha temeldeydi.

https://www.dotconferences.com/2019/12/evan-you-state-of-components (Class not most natural fit UI Comp)

React Hooks / Vue Composition API / Svelte3

Yeni UI bileşen View kütüphaneleri hepsi birbirine benzer yeni yaklaşımlarını çıkardı. Demek ki herkes bu yönde ilerlemeyi kabul etmiş durumda. React → Hooks, Vue → CompositionAPI , Svelte → Svelte3

Hepsinin ortak özelliklerine baktığımızda yazım dilinin aynı şekilde olduğunu görebilirsiniz. Artık View tanımlama(declaration) yapıları birbirlerinin çok benzerleri . Hepsi aynı işi yapıyor. Ama hepsinin altında yatan gerçekleştirim(implementation) birbirinden farklı. Yazı dizisinin ilerleyen zamanlarında bunlar üzerinde detaylı bir şekilde durmaya düşünüyorum.

https://www.dotconferences.com/2019/12/evan-you-state-of-components (Hooks, CompositionAPI, Svelte3)

React Hook’un Avantajları

Declarative → Free Form

Kod yazma şekli sınıf tanımlama, metod tanımlama ve deklarasyon yönteminden daha anlaşılır serbest form yapısında bileşen tanımlamaya dönük

https://www.dotconferences.com/2019/12/evan-you-state-of-components (Free Form)

Logic Composition

Bileşenler arasındaki davranışları birbiri arasında paylaşabilme ve kullanabilme kabiliyeti oldukça basit hale geldi. useTheme içerisinden isDark değişkenini alıp useTextColor dark temada bir metin oluşturup başka bir bileşenden de mouse pozisyon kabiliyetini rahatlıkla alıp kullanabiliriz.

Code Size

Concurrent Mode

Hook yapısı bileşenlerin eş zamanlı çalışabilmesini sağlayacak şekilde tasarlanmıştır.

React Hook’un Dezavantajları

Bileşen doğru şekilde invalidate edilmediği durumlarda Stale closures karşılaşabiliriz. Manual dependency Management dezavantajları olarak sayabiliriz.