WEB FRONTEND DEV SERIES
Web Frontend Geliştirme Trendleri — (Web UI Components)
WebApp Frontend yapısı ve bileşenlerinin nasıl çalıştığı, nasıl render edildiğini anlatmaya çalışacağım. SPA, Mimari, Web Components, DOM, Virtual DOM, Shadow DOM kavramlarından bahsedeceğim.
Bu yazı Web Frontend Geliştirme Trendleri yazımın devamı olan bir yazıdır. Öncelikle bu yazıyı okumanızı öneririm.
- SPA (Single Page Application)
- CBA (Component Based Architecture)
- Architectural Patterns (MVC, MVP, MVVM, Flux)
- Data Bindings (One Way / Two Way)
- Web Components & Polymer
- DOM
- Angular DOM
- React/Vue use Virtual DOM
SPA (Single Page Application)
Tek sayfa uygulama şu Önceki geleneksel yöntemlerde sizin birden fazla html sayfanız vardı. Bir sayfadan bir sayfaya url yönlendirmesi adresini direk yaparak yüklüyordunuz. Form post yapıyordunuz bu sizi başka bir sayfaya yönlendiriyordu. . index.html, a.html, b.html,c,html şeklinde gittiğiniz sayfanın içeriklerini görüyordunuz. Bu mekanizmada genelde rendering işlemi sunucu tarafında PHP, JSP, JSF yöntemleri ile gerçekleştiriliyordu.
SPA’da ise AJAX ile ilgili sayfanın özellikleri tek sayfanın içerisine yüklenir ve Client Side rendering gerçekleştirilir. Tek sayfa tabi kullanıcı için acayip bir deneyim çünkü sanki kullanıcıya native uygulama kullanıyor hissi veriyor. Genelde bu tip yönlendirmeler url kısmında url#a url#b url#c şeklinde yapılır.
CBA (Component Based Architecture)
SPA ‘nın bir sonucu olarak ortak kullanılabilen bileşenlere ihtiyaç duyuldu, bunların oluşturulması iletişim kurması vb. Mevcut JQuery bu amaçla oluşturulmuş bir kütüphane değildi. DOM, CSS üzerinde bir katman ve bu katman sizi Browser tabanlı farklılıklardan soyutlayan bir yapı sağlayarak uygulama geliştirmenize olanak sağlasada Component yapısı üzerine düşünülmüş bir yapı değildi. JQuery Plugin veya JQueryUI Widget olsada bunlar tam kasteddiğimiz bileşen mantığını oluşturmuyordu.
Peki İstenen NE ?
Bir bileşen tanımlayan bu bileşen öyle bir soyutlayalım ki. Aşağıdaki kısımlar ile bir bileşini soyutlayabileyim.
- Structure (DOM yapısı — HTML)
- Behavior (JS)
- Styles (CSS)
Bunu yapabilmemin yöntemi Custom Element tanımlayabilmeliyim. Örneğin bir bileşen tag tanımlayabileyim ve HTML içerisinde bu tag kullanabileyim..
Shadow DOM sayesinde markup ve style o dom içerisinde saklayabilelim. HTML Imports ve HTML Template özellikleri sayesinde bileşen soyutlayabiliyoruz.
Mimari
Bileşen mimarisini asıl belirleyen konulardan birisi Data’ya kimin eriştiğidir. View Data’ya direk erişmediği yönteme One Way Binding diyoruz. React Flux bu yöntemle çalışıyor. View kullanıcının oluşturduğu tüm aksiyonlar Dispatcher üzerinden Model update yapılır. Two Way Binding destekleyen Ember ve Angular’da ise View Modeli’de günceller.
MVC (Model View Controller) , MVP(Model View Presenter), MVVM(Model View View Model) hepside MVC’nin üzerine kurgulanmış. View’ daha az logic içermesi , her yere unit test yazılabilmesi vb nedenlerle MVC geliştirildiği durumlardır.
DOM Üzerinde Nasıl Çalışıyorlar
https://www.slideshare.net/zoetrope/incremental-dom-and-recent-trend-of-frontend-development bunu çok iyi bir şekilde anlatmış.
DOM nedir ? DOM güncelleme süreci aşağıdaki şekilde gerçekleşir.
DOM JQuery/JS seviyesi erişım oldukça problemli ve yönetmesi zor bir konudur.
Bu konuda JQuery yazarının John Resig: The DOM is a Mess videosunu izleyebilirsiniz.
React ve Angular DOM güncellemede ne yapıyor. Nerde yer alıyor ?
Angular DOM Yapısı ve Bunu Nasıl Yönettiğini Aşağıdaki Slaytlardan Görebilirsiniz.
React DOM Yapısı (Virtual DOM) ve Bunu Nasıl Yönettiğini Aşağıdaki Slaytlardan Görebilirsiniz.
Benchmarking
Benchmarking için aşağıdaki linkten faydalanabilirsiniz.
https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.html
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
