Bu sayfa, Cloud Translation API ile çevrilmiştir.

JavaScript kitaplıkları ve çerçeveler arasındaki fark

Umar Hansa

Bu makalede, istemci taraflı JavaScript ortamı bağlamında çerçeveler ve kitaplıklar arasındaki farklar açıklanmaktadır. Bu ortam, web tarayıcınızda çalışan koddur. Ancak kitaplıklar ve çerçeveler, yerel mobil uygulama geliştirme gibi birçok yazılım mühendisliği alanının bir parçası olduğundan bu makalede ele alınan noktalardan bazıları diğer ortamlar için de geçerlidir.

Bu yayındaki tartışmalar, kitaplıklar ve çerçeveler arasındaki nicel farklılıklar yerine nitel farklılıklara odaklanır. Örneğin:

Nicel: Çerçeveler genellikle kontrolün tersine çevrilmesi ilkesine uyar.
Niteliksel: Çerçeve deneyimi, iş ararken gelecekteki işverenler için daha cazip olabilir.

Kitaplıklar ve çerçeveler hakkında neden bilgi edinmelisiniz?

JavaScript kitaplığının ve çerçevesinin kullanımı web'de oldukça yaygındır. Diğer tüm web sitelerinin, JavaScript kaynaklarının bir parçası olarak bazı üçüncü taraf kodları kullandığı görülmektedir. Web sayfasının ağırlığı zaman içinde artıyor ve bu durum kullanıcıları etkiliyor. JavaScript, sayfa ağırlığının önemli bir kısmını oluşturur ve genellikle üçüncü taraf kitaplıklarını ve çerçevelerini içeren de bu JavaScript'tir.

Çerçeveler geliştiricilere büyük avantajlar sağladığından "JavaScript çerçevelerini kullanmayı bırakın" demek yeterli değildir. Çerçeveler, diğer avantajların yanı sıra verimli bir şekilde kod yazmanıza ve özellikleri hızlı bir şekilde sunmanıza yardımcı olabilir. Bunun yerine, zamanı geldiğinde bilinçli bir karar verebilmek için kendinizi eğitmelisiniz.

"Bugün bir kitaplık veya çerçeve kullanmalı mıyım?" kendinize sıklıkla sorulan sorulardan biridir. Kitaplıklar ve çerçeveler birbirinden çok farklı iki şeydir. Ancak kitaplıklar ve çerçeveler genellikle birbirine karıştırılır. Bu iki öğe hakkında ne kadar bilgi sahibi olursanız kullanımları hakkında bilinçli kararlar verme olasılığınız o kadar artar.

Kitaplık ve çerçeve örnekleri

Üçüncü taraf kodunu widget, eklenti, polyfill veya paket gibi başka adlarla görebilirsiniz. Ancak bunların tümü genellikle kitaplık veya çerçeve kategorisine girer. Bu ikisi arasındaki fark temel olarak şu şekilde özetlenebilir:

Uygulama kodunuz, kitaplık kodunu çağırır.
Bir çerçevede uygulama kodunuz çerçeve tarafından çağrılır.

Kitaplık

Kitaplıklar, çerçevelerden daha basit olma eğilimindedir ve dar bir işlev kapsamı sunar. Bir yönteme giriş gönderip çıkış alıyorsanız muhtemelen bir kitaplık kullanıyorsunuzdur.

lodash kitaplığını gösteren bu örneğe bakın:

import lodash from 'lodash'; // [1]
const result = lodash.capitalize('hello'); // [2]
console.log(result); // Hello

Birçok kitaplıkta olduğu gibi, bu kodu okumak ve kodun ne işe yaradığını anlamak kolaydır. Bu işlem çok kolaydır:

import ifadesi, lodash kitaplığını JavaScript programına aktarır.
capitalize() yöntemi çağrılır.
Yönteme tek bir bağımsız değişken iletilir.
Döndürülen değer, bir değişkende yakalanır.

Çerçeve

Çerçeveler, kitaplıklardan daha büyük olma eğilimindedir ve toplam sayfa ağırlığına daha fazla katkıda bulunur. Hatta bir çerçeve, kitaplık içerebilir.

Bu örnekte, kitaplık içermeyen basit bir çerçeve gösterilmektedir. Örnekte popüler bir JavaScript çerçevesi olan Vue kullanılmaktadır:

<!-- index.html -->
<div id="main">
  {{ message }}
</div>

<script type="module">
import Vue from './node_modules/vue/dist/vue.esm.browser.js';

new Vue({
  el: '#main',
  data: {
    message: 'Hello, world'
  }
});
</script>

Bu çerçeve örneğini önceki kitaplık örneğiyle karşılaştırırsanız aşağıdaki farklılıkları fark edebilirsiniz:

Çerçeve kodu birden fazla tekniği kapsar ve bunları kendi API'sinde soyutlar.
Geliştiriciler, işlemlerin nasıl ve ne zaman gerçekleştirileceği üzerinde tam kontrol sahibi değildir. Örneğin, Vue'un 'Hello, world' dizesini sayfaya nasıl ve ne zaman yazdığı sizin için soyutlanır.
Vue sınıfının örneklendirmesi, çerçeveleri kullandığınızda yaygın olarak görülen bazı yan etkiler taşırken kitaplık yalnızca işlevler sunabilir.
Çerçeve, kendi şablonunuzu kullanmak yerine belirli bir HTML şablon sistemi belirler.
Vue çerçevesi belgelerini veya diğer çerçeve belgelerinin çoğunu daha ayrıntılı bir şekilde incelerseniz çerçevelerin kullanabileceğiniz mimari kalıpları nasıl tanımladığını görebilirsiniz. JavaScript çerçeveleri bilişsel yükü de azaltır çünkü bunu kendiniz öğrenmek zorunda kalmazsınız.

Kitaplık ve çerçeve ne zaman kullanılır?

Kitaplıklar ve çerçeveler arasındaki karşılaştırmaları okuduktan sonra hangisini ne zaman kullanacağınızı anlamaya başlayabilirsiniz:

Çerçeveler, geliştirici olarak sizin için karmaşıklığı azaltabilir. Daha önce de belirtildiği gibi, bir çerçeve mantık, davranış ve hatta mimari kalıpları soyutlayabilir. Bu özellikle yeni bir projeye başladığınızda faydalıdır. Kitaplık karmaşıklık konusunda yardımcı olabilir ancak genellikle kodun yeniden kullanılmasına odaklanır.
Çerçeve yazarları üretken olmanızı ister ve genellikle bir çerçeveyi etkili bir şekilde kullanmanıza yardımcı olmak için diğer kaynakların yanı sıra ek araçlar, hata ayıklama yazılımları ve kapsamlı kılavuzlar geliştirir. Kitaplık yazarları da üretken olmanızı ister ancak kitaplıklarda özel araçlar yaygın değildir.
Çoğu çerçeve, web uygulamalarını hızlı bir şekilde oluşturmanıza yardımcı olmak için iskelet veya şablon gibi işlevsel bir başlangıç noktası sağlar. Kitaplıklar, mevcut kod tabanınızın bir parçası haline gelir.
Çerçeveler genel olarak kod tabanınızı biraz karmaşıklaştırır. Karmaşıklık başlangıçta her zaman belli olmasa da zaman içinde ortaya çıkabilir.

Farklı görevleri yerine getiren farklı öğeler oldukları için genellikle bir kitaplığı bir çerçeveyle karşılaştırmadığınızı hatırlatmak isteriz. Ancak bu iki seçenek hakkında ne kadar fazla bilgi sahibi olursanız sizin için en uygun seçeneğe karar vermek o kadar kolay olur. Bir çerçeve veya kitaplık kullanma kararı, nihayetinde ihtiyaçlarınıza bağlıdır.

Değiştirilebilirlik

Kitaplığınızı veya çerçevenizi her hafta değiştirmezsiniz. Bununla birlikte, sizi kendi ekosistemine hapseten bir paketin dezavantajlarını anlamanız önerilir. Üçüncü taraf paketi kullanmaya karar veren geliştiricinin, paket ile uygulama kaynak kodu arasında gevşek bir bağlantı oluşturulmasından kısmen sorumlu olduğunu da anlamanız önerilir.

Kaynak koda bağlı bir paketin kaldırılması ve başka bir paketle değiştirilmesi daha zordur. Aşağıdaki durumlarda paket değiştirmeniz gerekebilir:

Artık desteklenmeyen bir pakette güncelleme yapmanız gerekiyor.
Paketin çalıştırılması için çok fazla hatası olduğunu fark edersiniz.
İhtiyaçlarınıza daha iyi yanıt veren yeni bir paket hakkında bilgi edinirsiniz.
Ürün gereksinimleriniz değişti ve pakete artık ihtiyaç duymuyorsunuz.

Aşağıdaki örneğe bakın:

// header.js file
import color from '@package/set-color';
color('header', 'dark');

// article.js file
import color from '@package/set-color';
color('.article-post', 'dark');

// footer.js file
import color from '@package/set-color';
color('.footer-container', 'dark');

Önceki örnekte, üçüncü taraf @package/set-color paketi üç ayrı dosyada kullanılmaktadır. Bu kod üzerinde çalışıyorsanız ve üçüncü taraf paketini değiştirmeniz gerekiyorsa kodu üç yerde güncellemeniz gerekir.

Alternatif olarak, bakım işlemlerini basitleştirebilir ve kitaplık kullanımını tek bir yerde soyutlayabilirsiniz. Bu örneği aşağıda görebilirsiniz:

// lib/set-color.js file
import color from '@package/set-color';

export default function color(element, theme = 'dark') {
  color(element, theme);
}

// header.js file
import color from './lib/set-color.js';
color('header');

// article.js file
import color from './lib/set-color.js';
color('.article-post');

// footer.js file
import color from './lib/set-color.js';
color('.footer-container');

Önceki örnekte, doğrudan kitaplık kullanımı soyutlanmıştır. Bu nedenle, üçüncü taraf paketini değiştirmeniz gerekirse yalnızca bir dosyayı güncellemeniz yeterlidir. Ayrıca, dahili set-color.js dosyası kullanılacak varsayılan bir renk teması belirlediği için kodla çalışmak artık daha kolay.

Kullanım kolaylığı

Bir çerçevenin karmaşık bir API'si olabilir ancak çerçeve, genel olarak kullanımı kolaylaştıran geliştirici araçları sunabilir. Kullanım kolaylığı birçok faktöre bağlıdır ve son derece öznel olabilir. Bir çerçevenin kullanımı zor olabilir çünkü:

Çerçeve, yapısı gereği karmaşık bir API'ye sahiptir.
Çerçeve yeterince anlatılmamış ve sorunları çözmek için çok fazla deneme yanılma gerektiriyor.
Çerçeve, size ve ekibinize aşina olmayan teknikler kullanıyor.

Çerçeveler, aşağıdakiler gibi yaygın en iyi uygulamalarla bu zorlukların üstesinden gelebilir:

Bu çerçeve, hata ayıklamayı kolaylaştırmak için geliştirici ve teşhis araçları sunar.
Çerçeve, ücretsiz dokümanlar, rehberler, eğitici içerikler ve videolar üzerinde ortak çalışan aktif bir geliştirici topluluğuna sahiptir. Bu içerikleri tükettikten sonra çerçeveyle üretken olursunuz.
Çerçeve, yaygın kodlama kurallarına uyan bir API sunar. Bu tür kuralları daha önce öğrendiğiniz ve kodlama stilleriyle daha fazla aşina olduğunuz için bu çerçeveyle üretken bir şekilde çalışırsınız.

Bu noktalar genellikle çerçevelerle ilişkilendirilse de kitaplıklarla da ilişkilendirilebilir. Örneğin, D3.js JavaScript kitaplığı güçlüdür ve diğer kaynaklar arasında atölyeler, rehberler ve dokümanlar sunan geniş bir ekosisteme sahiptir. Bunların tümü, kitaplığın kullanım kolaylığını etkiler.

Ayrıca, çerçeveler genellikle web uygulamanız için bir mimari belirlerken kitaplıklar genellikle mevcut mimarinizle uyumludur.

Performans

Genel olarak, çerçeveler performansı kitaplıklardan daha fazla etkileyebilir ancak bu durumun istisnaları vardır. Web performansı, birçok konunun yer aldığı büyük bir alandır. Bu nedenle, bu bölümlerde ağaç sallama ve yazılım güncellemeleri olmak üzere iki önemli konu ele alınmaktadır.

Ağaç sallamak

Paketleme, web performansının yalnızca bir unsurudur, ancak özellikle büyük kitaplıklarda büyük bir performans etkisine sahiptir. Uygulama için gereksiz olan kodları bulup ayıkladığı için içe ve dışa aktarma işlemleri sırasında ağaç sallama özelliğini kullanmak performansa katkıda bulunur.

JavaScript kodunu paketlediğinizde, kodunuzda yapabileceğiniz değerli bir performans optimizasyonu olan ağaç sallama olarak bilinen yararlı bir adım vardır. Ancak bu işlemi kitaplıklarda yapmak, çerçevelerde yapmaktan daha kolaydır.

Üçüncü taraf kodunu kaynak kodunuza aktarırken kodu genellikle bir veya birkaç çıkış dosyasında gruplandırırsınız. Örneğin, header.js, footer.js ve sidebar.js dosyalarının tümü, web uygulamanıza yüklediğiniz çıkış dosyası olan output.js dosyasında birleştirilir.

Ağaç sallamayı daha iyi anlamak için aşağıdaki kod örneklerini inceleyin:

// library.js file
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// main.js file
import {add} from './library.js';

console.log(add(7, 10));

Gösterim amacıyla, library.js kod örneği, kitaplığın binlerce satır uzunluğunda olabileceği gerçek dünyada bulacağınıza kıyasla kasıtlı olarak küçük tutulmuştur.

Naif paket işlemleri, kodu şu çıkışla dışa aktarabilir:

// output.js file
function add(a, b) {
  return a + b;
}

function subtract(a, b) {
  return a - b;
}

console.log(add(7, 10));

subtract() işlevi bu uygulamada gerekli olmasa da son pakette bulunmaktadır. Bu tür gereksiz kodlar, indirme boyutunu, ayrıştırma ve derleme süresini ve kullanıcılarınızın ödemesi gereken yürütme maliyetlerini artırır. Temel bir ağaç sallama yaklaşımı ölü kodu kaldırır ve şu çıktıyı üretir:

// output.js file
function add(a, b) {
  return a + b;
}

console.log(add(7, 10));

Kodun daha kısa ve öz olduğunu fark edin. Bu örnekte performans artışı göz ardı edilebilir düzeyde olsa da kitaplığın binlerce satır uzunluğunda olduğu gerçek bir uygulamada, performansa etkisi çok daha büyük olabilir. İlginç bir şekilde Parcel, Webpack ve Rollup gibi modern paketleme araçları, yüksek oranda optimize edilmiş bir paket oluşturmak için küçültme ve ağaç sallamayı birleştirerek bir adım daha ileri gidiyor. Paket araçlarının etkinliğini göstermek için önceki kod örneklerini içeren bir paket dosyası oluşturmak üzere Parcel'i kullandık. Parcel, kullanılmayan tüm kodları kaldırdı ve tek bir modülü dışa aktardı:

console.log(7+10);

Parcel, yüksek düzeyde optimize edilmiş kod oluşturmak için diğer öğelerin yanı sıra içe aktarma beyanları, işlev tanımları ve davranışları kaldıracak kadar akıllıdır.

Paketleme, web performansının yalnızca bir yönüdür ancak özellikle daha büyük kitaplıklarda performans üzerinde büyük bir etkisi vardır. Ağda kaldırma işlemi, kitaplıklarda genellikle çerçevelere kıyasla daha kolaydır.

Yazılım güncellemeleri

Birçok kitaplık ve çerçeve için yazılım güncellemeleri işlev ekler, hataları düzeltir ve zaman içinde boyut olarak büyür. Güncellemeleri indirmek her zaman gerekli değildir ancak güncellemeler hata düzeltmeleri, istenen özellik geliştirmeleri veya güvenlik düzeltmeleri içeriyorsa güncelleme yapmanız önerilir. Ancak kablo üzerinden ne kadar fazla veri gönderirseniz uygulamanızın performansı o kadar düşük olur ve kullanıcı deneyiminiz üzerindeki performans etkisi o kadar büyük olur.

Kütüphanenin boyutu büyüyorsa büyümeyi azaltmak için ağaç sallama yöntemini kullanabilirsiniz. Alternatif olarak, JavaScript kitaplığına göre daha küçük bir alternatif kullanabilirsiniz. Daha fazla bilgi için Değiştirilebilirlik başlıklı makaleyi inceleyin.

Bir çerçevenin boyutu büyürse hem ağacın sallanması hem de bir çerçevenin yerini değiştirmek daha zor olabilir. Daha fazla bilgi için Değiştirilebilirlik başlıklı makaleyi inceleyin.

İstihdam durumu

Birçok şirketin belirli bir çerçeveyi bilen geliştiriciler için katı şartlar taşıması biraz sır bir gerçek. Web'in temelleri hakkındaki bilginiz göz ardı edilebilir ve yalnızca belirli bir JavaScript çerçevesi hakkındaki bilginize odaklanılabilir. Doğru veya yanlış, bu birçok iş için geçerli bir durumdur.

Birkaç JavaScript kitaplığı hakkında bilgi sahibi olmak iş başvurunuza zarar vermez ancak sizi öne çıkaracağı garantisi yoktur. Birkaç popüler JavaScript çerçevesini iyi biliyorsanız işverenlerin bu bilgiyi mevcut iş piyasasında web geliştiricileri açısından olumlu görme ihtimali yüksektir. Bazı büyük kuruluşlar çok eski JavaScript çerçevelerini kullanmaya devam ediyor ve bu tür çerçevelerle rahatça çalışabilen adaylara ihtiyaç duyuyor olabilir.

Bu herkesçe bilinen gerçeği avantajınıza kullanabilirsiniz. Ancak, iş piyasasına dikkatli bir şekilde yaklaşın ve şu hususları göz önünde bulundurun:

Kariyerinizde çok fazla zamanınızı yalnızca bir çerçeveyle geçirirseniz diğer daha modern çerçevelerle ilgili öğrenme deneyimlerini kaçırabileceğinizi unutmayın.
Yazılım geliştirme veya web geliştirmenin temellerini tam olarak anlamayan ancak çerçeve geliştirici olarak işe alınan bir geliştiriciyi düşünün. Bu geliştirici etkili kod yazmıyorsa böyle bir kod tabanıyla çalışmanın zor veya bunaltıcı olduğunu görebilirsiniz. Bazı durumlarda bu durum tükenmişliğe yol açabilir. Örneğin, kod yavaş olduğu için kodu yeniden düzenlemeniz veya performans ayarı yapmanız gerekebilir.
Web geliştirmeyi öğrenirken en iyi yol, web geliştirme, yazılım geliştirme ve yazılım mühendisliğinin temellerine yoğun bir şekilde odaklanarak başlamaktır. Bu kadar güçlü bir temel, herhangi bir JavaScript çerçevesini hızlı ve etkili bir şekilde öğrenmenize yardımcı olur.

Sonuç

JavaScript çerçeveleri ile kitaplıklarının karşılaştırmasını anlamak üzere gösterdiğiniz yoğun çabayı tebrik ederiz. Yeşil alan projelerinde veya danışman olarak çalışmadığınız sürece çerçeveleri ya da kütüphaneleri sık sık seçmezsiniz. Ancak bu tür kararlar verildiğinde, konu hakkında ne kadar fazla bilgi sahibi olursanız kararınızı o kadar bilinçli bir şekilde vermiş olursunuz.

Öğrendiğiniz gibi, kullandığınız çerçevenin (ve bazı durumlarda kitaplığın) seçimi, geliştirme deneyiminizi ve son kullanıcıları (ör. performans açısından) önemli ölçüde etkileyebilir.