FRONTEND KAPSAM
JavaScript Popüler Kütüphaneler ile Periyodik Cetvel
Her sene JS ve CSS konusunda dünya çapında bir anket düzenlenip. Bu anketin sonuçları StateOfJS , StateOfCSS sitelerinde yayınlanıyor. 2020 için hazırlanan sitede bir Periodic Cetvel oluşturmuşlar Bu yazıda cetvele bakıyor olacağız.
Bu yazımda JS popüler kütüphaneler ile ilgili yayınlanmış Tişört üzerine bastıkları JS Periyodik Cetveline daha yakından bakalım.
1. JavaScript Flavors
Dynamic Typing yerine Static Typing veya bir takım ekstra fonksiyonel programlama yeteneklerini desteklemek için JS Flavors diller ile kod geliştirerek bu kodların Transpiler aracılığı ile Javascript diline dönüştürülmesi yaklaşımı günümüzde oldukça popüler hale gelmiş durumda. Peki bu diller nasıl JS dönüştürülüyor konusunda detay için bu konuda yazmış olduğum TypeScript Nedir? yazısını okuyabilirsiniz.
2. Mobile And Desktop
JS artık sadece Tarayıcılarda çalışmıyor. Mobil, Desktop ve hatta iOT cihazlarında çalışıyor. JS nasıl başka ortamlarda çalıştığı konusunda teknik detayda Chrome JS Nasıl işletir yazımı okuyabilirsiniz. Sonuç olarak artık JS farklı ortamlarda çalışmasını sağlayacak V8 Engine, Spider Engine vb JS çalıştırıcılar mevcut. Birde bu Engine üzerinde bazı hazır kütüphaneler ve toollar olsun ki, tarayıcıda elde ettiğimiz bu gücü buralarda da kullanabilelim. İşte aşağıdaki kütüphanelerde bunu sağlıyor.
3. Frontend Frameworks
Aslında Frontend uygulamaları JS DOM API değiştirerek geliştirmeya başlamıştık Sonra ihtiyaçların artması nedeniyle araya başka kütüphaneler soktuk sırası ile JQuery, Backbone, Ember, Angular, React, Vue, Svelte bu bileşen kütüphanelerine örnek. Modern Frontend Framework, DOM kullanım Yöntemleri yazımda bu konudan detaylı olarak bahsetmiştim. Bileşen Tabanlı UI geliştirme konusunda bu kütüphaneler ile birlikte Defacto haline geldi. Bu konuda yazılan kitaplar, araçlar ve ekosistemi anlatmak için Bileşen Odaklı UI(Kullanıcı Arayüzü) Geliştirme yazımı okuyabilirsiniz. Tabi bu süreçte kütüphaneler ile birlikte yazım teknikleri de evrim geçirdi. React Class Component → Hooks API, Vue ise → Composition API kullanılmasını önermeye başladı. Bu konuda detaylı bilgi almak için UI Bileşenleri nasıl evrimleşti yazımı okumanızı öneririm.
4. Data Layer
Her UI uygulamasında Bileşen kütüphaneleri sizi bir çok imkan tanısada State tutacak yapılara ihtiyaç duyarsınız. Özellikle de projeniz büyük ise. Aşağıdaki resimde Flux Örüntüsü yaklaşımının farklı farklı gerçekleştirim kütüphanelerini bulabilirsiniz. React → Redux, Vue → VueX, Angular → Mobx, Bu konuda daha detaylı bilgi almak isterseniz daha önceden yazmış olduğum Flux Mimari Örüntüsü yazımı okuyabilirsiniz.
5. Other Libraries
Bütün işlerimizi bileşen kütüphaneleri ile çözemiyoruz. Bazen ekstra işler için bileşen kütüphanelerimizde birlikte ektra yardımcı kütüphaneler kullanıyoruz. Örneğin
- Virtual DOM yerine direk DOM erişmemiz gerekiyor (JQuery)
- Daha interaktif chart çizmemiz gerekiyor (D3.js)
- Zaman için çok detaylı dönüşümlere veya lokasyon başlı tarih işlemleri için (Moment)
- HTTPRequest daha soyutlanmış bir arayüzden Promise destekleyecek şekilde gerçekleştirmek istiyoruz (Axios)
- vb..
6. Back-end Frameworks
JS , NodeJS ile birlikte sadece sunucu tarafında değil aynı zamanda Server tarafında da sıkça kullanılır oldu. Bunlardan bazıları RESTful/GraphQL API sağlarken bazılarıda Server Side Rendering sağlayacak kütüphaneler olarak evrildi. Bu konularda daha detaylı bilgi almak için HTML Rendering Nerede Yapılmalı ? Tarayıcı (CSR) veya Sunucu (SSR) yazımı veya Web Rendering yazılarımı okuyabilirsiniz.
Bunlardan Next, Nuxt, Nest → Server Side Rendering yapabilen kütüphanelerken sadece yazım kütüphanesi olarak Next → React, Nuxt →Vue, Nest → Angular syntax sahip
Gatsby ise Static Site Generator yani sayfalar geliştirme ortamında veya build makinesinde oluşturulup CDN üzerinden servis ediliyor. Her commit sonrasında tekrar bu build süreci baştan başlatılıyor. Strapi Headless CMS ve Express ve Meteor ise sizin WebApp geliştirmenizi sağlayan eksi Node kütüphaneleri.
6. Testing
Konuya kavramsal anlamda giriş olması açısından önceden yazmış olduğum Frontend Testing yazımı okuyabilirsiniz. Test konusunda JS ekosistemi oldukça gelişmiş durumda. Farklı farklı katmanlarda Test yapmanızı sağlayacak bir çok kütüphane bulunuyor. Martin Fowler TestPyramid yazısındaki Unit → Service → UI katmanlarını test etmenizi sağlayacak kütüphaneler. Aynı zamanda bileşenlerinizi demo edebileceğiniz Storybook gibi bileşen gösterim araçlarıda mevcut.
7. Build Tools
Geliştirirken modüler olarak birçok dosyada geliştirmiş olduğunuz JS , CSS dosyalarını network/performans problemi olmaması için birleştirecek araçlara ihtiyacınız var. Aynı zamanda artık geliştiriciler artık TypeScript, JSX, SCSS, vb… farklı dilleri kullanıyoruz. Bunların tarayıcının anlayacağı CSS ve JS dönüştürebilecek Babel bir aracın çalıştırması gerekiyor. İşte burada bu Build araçları devreye gidiyor. Webpack nasıl çalıştığı hakkında daha detaylı bilgi almak için Webpack başlangıç yazımı okumanızı öneririm.
8. Code Assist Tools
Kullandığınız Kod editörlerinde kodu formatlamak veya yazdığınız kodda hatalı yazımları, uyarıları size daha önce gösterecek bir takım araçlar kullanırsınız. Prettier ve ESlint vb bir çok araç sizin kod geliştirmenizi hızlandırıp daha kaliteli hale getirmenizi sağlar.
Referanslar
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
