Bu makalede, web tarayıcınızda çalışan kod olan istemci tarafı JavaScript ortamı bağlamında çerçeveler ile kitaplıklar arasındaki farklar açıklanmaktadır. 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ığı ve çerçeve kullanımı web'de yaygındır. Diğer tüm web siteleri, JavaScript kaynaklarının bir parçası olarak bazı üçüncü taraf kodları kullanıyor. 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ğitmeniz gerekir.
"Bugün bir kitaplık mı yoksa çerçeve mi kullanmalıyım?" sorusu, kendinize sık sık sorduğunuz bir soru değildir. 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 kullanmışsınızdır.
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 ne yaptığını anlamak faydalı olacaktı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şeceği üzerinde tam kontrole sahip 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 örneklenmesi, çerçeveler kullanırken yaygın olan bazı yan etkiler taşır. Kitaplıklar ise saf 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, bu konuyu kendiniz çözmek zorunda kalmadığınız için bilişsel yükün bir kısmını üzerinizden alır.
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. Kütüphaneler karmaşıklığı azaltmaya yardımcı olabilir ancak genellikle kod yeniden kullanımı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ı olur.
- Genel olarak çerçeveler, kod tabanınızda bazı karmaşıklıklara neden olur. Karmaşıklık her zaman baştan anlaşılmaz ancak zaman içinde kendini gösterebilir.
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. Ancak sizi kendi ekosistemine kilitleyen bir paketin dezavantajlarını anlamak iyi bir uygulamadır. Üçü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 renk temasını ayarladığından 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ı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çevenin kullanımı zor olabilir çünkü:
- Çerçevenin doğası gereği karmaşık bir API'si vardır.
- Çerçevenin dokümanları yetersizdir ve sorunları çözmek için çok fazla deneme ve yanılma gerekir.
- Ç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:
- Ç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çeriği kullandıktan sonra çerçeveyi verimli bir şekilde kullanabilirsiniz.
- Ç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çevede üretkensiniz.
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 duruma istisnalar vardır. Web performansı, birçok konuyu kapsayan geniş bir alandır. Bu nedenle, bu bölümlerde iki önemli konuya (ağaç sallama ve yazılım güncellemeleri) değinilmiştir.
Ağaç sallamak
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. İçe aktarma ve dışa aktarma sırasında ağaç sallama işleminin kullanılması, uygulama için gereksiz olan kodu bulup kaldırdığı için performansa yardımcı olur.
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 örneklerine göz atın:
// 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.
Basit bir paket oluşturma 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));
subtract()
işlevi bu uygulamada gerekmese de nihai pakete dahil edilir. 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 çıkışı oluşturur:
// 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 iyileştirmesi önemsizdir ancak kitaplığın binlerce satır uzunluğunda olduğu gerçek dünyadaki bir uygulamada performans etkisi çok daha önemli 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, genelde kitaplıklarda çerçevelere kıyasla daha basittir.
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.
Bir kitaplığın boyutu artarsa bu artışı azaltmak için ağaç sallamayı kullanabilirsiniz. Alternatif olarak, JavaScript kitaplığının daha küçük bir alternatifini kullanabilirsiniz. Daha fazla bilgi için Değişiklik yapma bölümüne bakın.
Bir çerçevenin boyutu artarsa ağaç sallama işlemi daha zor hale gelir ve bir çerçeveyi başka bir çerçeveyle değiştirmek daha zor olabilir. Daha fazla bilgi için Değişiklik yapma bölümüne bakın.
İstihdam edilebilirlik
Birçok şirketin belirli bir çerçeveyi bilen geliştiriciler için katı şartları olduğu herkes tarafından bilinen bir gerçektir. 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 çok iyi biliyorsanız işverenlerin, web geliştiricileri için mevcut iş piyasasında bu bilgiyi olumlu olarak görmesi olasıdır. 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ş pazarına dikkatli bir şekilde yaklaşın ve aşağıdaki noktaları 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 bilmeyen 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, 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çevelerinin ve kitaplıklarının karşılaştırmasını anlama konusunda gösterdiğiniz çaba için tebrikler. Yeni projelerde veya danışman olarak çalışmadığınız sürece genellikle çerçeve veya kitaplık seçmezsiniz. Ancak bu tür kararlar gerektiğinde, konuyla ilgili ne kadar bilginiz varsa kararınız o kadar bilinçli olur.
Öğ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.