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

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

Umar Hansa

Bu makalede, web tarayıcınızda çalışan kod olan istemci tarafı JavaScript ortamı bağlamında çerçeveler ve kitaplıklar arasındaki farklılıklar hakkında bilgi verilmektedir. Ancak kitaplıklar ve çerçeveler yerel mobil uygulama geliştirme gibi birçok yazılım mühendisliği alanının parçası olduğundan, bu makalede bahsedilen noktalardan bazıları diğer ortamlar için de geçerlidir.

Bu gönderideki tartışmalarda kitaplıklar ve çerçeveler arasındaki niceliksel farklılıklar yerine nitel farklılıklara odaklanılmaktadır. Örneğin:

Niceliksel: Çerçeveler genellikle kontrolün tersine çevrilmesi ilkesine bağlıdır.
Niteliksel: Çerçeve deneyimi, iş ararken gelecekteki işverenlere daha çok hitap edebilir.

Neden kitaplıklar ve çerçeveler hakkında bilgi edinmeli?

JavaScript kitaplığı ve çerçeve kullanımı web genelinde yaygındır. Diğer tüm web sitelerinin, JavaScript kaynaklarının bir parçası olarak birtakım üçüncü taraf kodları kullandığı görülmektedir. Web sayfası ağırlığı zamanla daha da düşmekte ve bu da kullanıcıları etkilemektedir. JavaScript, toplam sayfa ağırlığına katkıda bulunan önemli bir faktördür ve genellikle üçüncü taraf kitaplıklarını ve çerçevelerini oluşturan JavaScript'tir.

"JavaScript çerçevelerini kullanmayı bırak" gibi bir ifade yeterli değildir, çünkü çerçeveler geliştiricilere büyük fayda sağlar. Çerçeveler, verimli şekilde kodlama yapmanıza ve özellikleri hızlı bir şekilde sunmanıza yardımcı olur ve diğer avantajlardan da yararlanabilirsiniz. Bunun yerine, zamanı geldiğinde bilinçli bir karar verebilmek için kendinizi eğitmeniz gerekir.

"Bugün bir kitaplık veya çerçeve kullanmalı mıyım?" sorusu, oldukça sık sorulan bir sorudur. Kitaplıklar ve çerçeveler birbirinden tamamen farklı iki şeydir. Ancak kitaplıklar ve çerçeveler genellikle birleştirilir ve bu ikisi hakkında ne kadar fazla bilgi sahibi olursanız bunların kullanımı hakkında bilinçli kararlar alma olasılığınız o kadar artar.

Kitaplık ve çerçeve örnekleri

Üçüncü taraf kodunun widget'lar, eklentiler, çoklu dolgular veya paketler gibi farklı adlarla kullanıldığını görebilirsiniz. Ancak, bunların tümü genellikle kitaplık veya çerçeve kategorisine girer. Temel olarak, ikisi arasındaki fark şu şekilde özetlenebilir:

Kitaplık söz konusu olduğunda, uygulama kodunuz kitaplık kodunu çağırır.
Çerçeve için uygulama kodunuz çerçeve tarafından çağrılır.

Kitaplık

Kitaplıklar genellikle çerçevelerden daha basittir ve dar bir işlev kapsamı sunar. Bir yönteme giriş iletip çıkış alırsanız muhtemelen kitaplık kullanmışsınızdır.

Şu lodash kitaplığı örneğine bakın:

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

Birçok kütüphanede olduğu gibi, bu kodu baştan sona okumak ve ne işe yaradığını anlamak kolaydır. Çok az sihirli adım vardır:

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

Çerçeve

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

Bu örnekte, kitaplığı olmayan düz bir çerçeve gösterilmektedir ve popüler bir JavaScript çerçevesi olan Vue kullanılmıştı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 şu farklılıkları görebilirsiniz:

Çerçeve kodu birden fazla tekniği kapsar ve bunları soyutlayarak kendi ayrıntılı API'sinde oluşturur.
Geliştiriciler, işlemlerin nasıl ve ne zaman gerçekleştiği konusunda tam bir denetime sahip değildir. Örneğin, Vue'nun sayfaya 'Hello, world' dizesini nasıl ve ne zaman yazdığı sizden 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 bir kitaplık sadece işlevler sunabilir.
Çerçeve, kendi şablonunuzu kullanmak yerine belirli bir HTML şablon sistemini belirtir.
Vue çerçevesi belgelerinin veya diğer çerçeve belgelerinin çoğunu okuyarak çerçevelerin kullanabileceğiniz mimari kalıpları nasıl tanımladığını görebilirsiniz. JavaScript çerçeveleri bazı bilişsel yükü üzerinizden alır, çünkü bunları kendiniz çözmek zorunda kalmazsınız.

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

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

Çerçeve, geliştirici olarak sizin için karmaşıklığı azaltabilir. Daha önce belirtildiği gibi çerçeveler mantığı, davranışı ve hatta mimari kalıpları soyutlayabilir. Özellikle yeni bir projeye başlarken faydalı olur. Kitaplık, karmaşıklığı bildirebilir ancak genellikle kodların yeniden kullanılmasına odaklanır.
Çerçeve yazarları verimli olmanızı ister ve genellikle bir çerçeveyi etkili bir şekilde kullanmanıza yardımcı olacak diğer kaynakların yanı sıra ekstra araçlar, hata ayıklama yazılımı ve kapsamlı kılavuzlar geliştirir. Kütüphane yazarları da üretken olmanızı ister, ancak özel araçlar kütüphanelerde pek yoktur.
Çoğu çerçeve, web uygulamalarını hızlı bir şekilde oluşturmanıza yardımcı olmak için işlevsel bir başlangıç noktası sağlar. Kitaplık zaten oturmuş kod tabanınızın bir parçası haline gelir.
Genel olarak, çerçeveler kod tabanınıza karmaşıklık getirir. Karmaşıklık başlangıçta her zaman bariz olmasa da zaman içinde kendini gösterebilir.

Kitaplıklar farklı görevleri yerine getiren farklı şeyler olduğundan genellikle bir kitaplığı çerçeveyle karşılaştırmadığınızı hatırlatmak isteriz. Ancak bu ikisi hakkında ne kadar fazla bilgiye sahip olursanız sizin için en uygun olan seçeneğe karar verme konusunda o kadar güçlü olursunuz. Çerçeve veya kitaplık kullanma kararı, ihtiyaçlarınıza bağlıdır.

Değiştirilebilirlik

Kitaplığınızı veya çerçevenizi her hafta değiştirmezsiniz. Ancak sizi ekosistemine hapseden bir paketin olumsuz yanlarını anlamak da iyi bir uygulamadır. Üçüncü taraf paket 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 koduna bağlı bir paketin kaldırılması ve başka bir paketle değiştirilmesi daha zordur. Şu durumlarda paket değiştirmeniz gerekebilir:

Artık korunmayan bir pakette güncelleme yapmanız gerekiyor.
Paketin çalışamayacak kadar hatalı olduğunu fark ediyorsunuz.
İhtiyaçlarınızı daha iyi karşılayan yeni bir paket hakkında bilgi edinirsiniz.
Ürün gereksinimleriniz değişir ve pakete artık ihtiyaç kalmaz.

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, üç ayrı dosya genelinde üçüncü taraf @package/set-color paketi 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ı basitleştirebilir ve kitaplık kullanımını tek bir yerden soyutlayabilirsiniz. Bunu aşağıdaki örnekte 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 paketi değiştirmeniz gerekiyorsa yalnızca bir dosyayı güncellersiniz. Ayrıca, dahili set-color.js dosyası kullanılacak varsayılan bir renk teması ayarladığından, kodla çalışmak artık daha kolay.

Kullanım kolaylığı

Bir çerçeve karmaşık bir API'ya sahip olabilir ancak genel olarak kullanımını 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çeveyi kullanmak şu nedenlerden dolayı zor olabilir:

Çerçeve, yapısı gereği karmaşık bir API'ye sahiptir.
Çerçeve iyi belgelenmemiştir ve sorunların çözülmesi için çok fazla deneme yanılma yapılması gerekir.
Çerçeve, size ve ekibinize yabancı olan teknikler kullanır.

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

Çerçeve, hata ayıklamayı kolaylaştıran geliştirici ve teşhis araçları sunar.
Bu çerçevede ücretsiz dokümanlar, kılavuzlar, eğiticiler ve videolar üzerinde ortak çalışan aktif bir geliştirici topluluğu vardır. Bu içeriği tükettikten sonra çerçeveyle üretken olursunuz.
Bu çerçeve, yaygın kodlama kurallarına uyan bir API sunar. Daha önce bu tür kuralları öğrendiğiniz ve kodlama stillerine aşina olduğunuz için bu çerçeveyle verimli olursunuz.

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ın yanı sıra atölyeler, rehberler ve belgeler sunan geniş bir ekosisteme sahiptir. Bunların tümü kullanım kolaylığını etkiler.

Buna ek olarak, çerçeveler genellikle web uygulamanızın mimarisini tanımlarken kitaplıklar, mevcut mimariniz ne olursa olsun genellikle bu mimariyle uyumludur.

Performans

Genel olarak, çerçeveler performansı kitaplıklardan daha fazla etkileyebilir, ancak bu durumun istisnaları da 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 konuya değinilir.

Ağaç sallama

Paketleme, web performansının yalnızca bir yönüdür ancak özellikle büyük kitaplıklarda büyük performans etkisine sahiptir. İçe ve dışa aktarma sırasında ağaç sallamanın kullanılması, uygulama için gerekli olmayan kodları bulup ayıkladığından performansa yardımcı olur.

JavaScript kodunu paketlediğinizde, ağaç sallama olarak bilinen yararlı bir adım vardır. Bu işlem, çerçevelerden ziyade kitaplıklarla daha kolay olsa da kodunuzda gerçekleştirebileceğiniz değerli bir performans optimizasyonu yöntemidir.

Üçüncü taraf kodunu kaynak kodunuza aktardığınızda, genellikle kodu bir veya birkaç çıkış dosyasında paket haline getirirsiniz. Ö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ı içinde 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 olabildiği gerçek dünyada görebileceğiniz şekliyle karşılaştırıldığında kasıtlı olarak küçük tutulur.

Naif bir paket işlemi, 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));

Bu uygulamada subtract() işlevi gerekli olmasa da son pakette yer alıyor. Bunun gibi 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ı, geçersiz kodu kaldırır ve şu sonucu üretir:

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

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

Kodun daha kısa ve daha kısa olduğuna dikkat edin. Bu örnekte, performanstaki iyileşme göz ardı edilebilir ancak kitaplığın binlerce satır uzunluğunda olduğu gerçek dünyadaki bir uygulamada performans etkisi çok daha önemli olabilir. Parcel, Webpack ve Rollup gibi modern paket araçları, son derece optimize edilmiş bir paket oluşturmak için küçültme ve ağaç sallamayı birleştirdiği için bunu bir adım öteye taşır. Paket araçlarının ne kadar etkili olduğunu göstermek amacıyla önceki kod örnekleriyle bir paket dosyası oluşturmak için Parcel'i kullandık. Paket, kullanılmayan tüm kodları kaldırdı ve şu tek modülü dışa aktardı:

console.log(7+10);

Parsel, yüksek düzeyde optimize edilmiş kod oluşturmak için içe aktarma ifadelerini, işlev tanımlarını ve diğer öğelerdeki davranışları kaldıracak kadar akıllıdır.

Paketleme, web performansının yalnızca bir yönüdür ancak özellikle büyük kitaplıklarda büyük performans etkisine sahiptir. Ağaç sallama işlemi, çerçevelere kıyasla kitaplıklarda genellikle daha kolaydır.

Yazılım güncellemeleri

Yazılım güncellemeleri, çoğu kitaplık ve çerçeve için işlevsellik katar, hataları düzeltir ve nihayetinde zamanla boyutunu büyütür. Güncellemeleri indirmek her zaman gerekli değildir, ancak güncellemeler hata düzeltmelerini, istenen özellik geliştirmelerini veya güvenlik düzeltmelerini içeriyorsa büyük olasılıkla güncellemeniz gerekir. Ancak, kablo üzerinden ne kadar çok veri gönderirseniz uygulamanızın performansı o kadar düşük olur ve kullanıcı deneyiminiz üzerindeki performans etkisi o kadar artar.

Bir kitaplık büyürse, büyümeyi azaltmak için ağaç sallama özelliğini kullanabilirsiniz. Alternatif olarak, JavaScript kitaplığı için daha küçük bir alternatif kullanabilirsiniz. Daha fazla bilgi için Değiştirilebilirlik bölümünü inceleyin.

Bir çerçevenin boyutu büyürse yalnızca ağacın zorlanmasıyla kalmaz, bir çerçeveyi diğeriyle değiştirmek de zorlaşabilir. Daha fazla bilgi için Değiştirilebilirlik bölümünü inceleyin.

İstihdam

Birçok şirketin belirli bir çerçeveyi bilen geliştiricilere yönelik zor şartlar olduğu açık bir sır. Web'in temelleri hakkındaki bilginizi yok sayabilir ve yalnızca belirli bir JavaScript çerçevesiyle ilgili özel bilginize odaklanabilirler! Doğru mu yanlış mı? Birçok işin gerçeği budur.

Birkaç JavaScript kitaplığına sahip olmak iş başvurunuza zarar vermez, ancak sizi ön plana çıkaracağına dair çok az garanti vardır. Birkaç popüler JavaScript çerçevesini çok iyi biliyorsanız, işverenlerin mevcut iş piyasasında web geliştiricileri için bu bilgiyi tercih etme olasılığı yüksektir. Bazı büyük kurumsal kuruluşlar çok eski JavaScript çerçevelerine takılı kalmıştır ve hatta bu tür çerçevelere alışkın adaylar için sabırsızlanabilmektedir.

Bu açık sırrı avantaja dönüştürebilirsiniz. Bununla birlikte, iş piyasasına dikkatle ve aşağıdaki noktaları göz önünde bulundurarak yaklaşın:

Kariyerinizde tek bir çerçeveyle çok fazla zaman geçirirseniz daha modern olan diğer çerçevelerle ilgili öğrenim deneyimlerini kaçırabilirsiniz.
Yazılım geliştirme veya web geliştirmeyle ilgili temel bilgileri tam olarak anlamayan ancak bir çerçeve geliştiricisi olarak işe alınmış bir geliştiriciyi düşünün. Bu geliştirici etkili kod yazmıyor ve böyle bir kod tabanı üzerinde çalışmayı göz korkutucu veya bunaltıcı bulabilirsiniz. Bazı durumlarda bu durum tükenmişlik hissine yol açabilir. Örneğin, kodu yeniden düzenlemeniz veya yavaş olduğu için performansı ayarlamanız gerekebilir.
Web geliştirmeyi öğrenirken izleyebileceğiniz en iyi yol, web geliştirme, yazılım geliştirme ve yazılım mühendisliğinin temellerine yoğun şekilde odaklanmaktır. Böyle güçlü bir temel, herhangi bir JavaScript çerçevesini hızlı ve etkili bir şekilde edinmenize yardımcı olur.

Sonuç

JavaScript çerçeveleri ve kitaplıkları arasındaki farkı anlamak için gösterdiğiniz yoğun çaba için tebrik ederiz. greenfield projeleri üzerinde çalışmadığınız veya danışman olarak çalışmadığınız sürece çerçeveleri veya kitaplıkları çok sık seçmezsiniz. Ancak konuyla ilgili ne kadar fazla bilgi sahibi olursanız kararlarınızı da o kadar bilinçli şekilde vermiş olursunuz.

Daha önce öğrendiğiniz gibi, seçtiğiniz çerçeve ve bazı durumlarda kitaplık seçiminiz, geliştirme deneyiminizi ve son kullanıcılarınızı (ör. performans) önemli ölçüde etkileyebilir.