Ana sayfa Editörden Framework ve Kütüphane arasındaki fark nedir ?

Framework ve Kütüphane arasındaki fark nedir ?

37
0

Programcılar genellikle “Library (Kütüphane)” ve “Framework (Çerçeve)” terimlerini birbirlerinin yerine kullanırlar. Ancak bir fark var.

Hem frameworkler hem de kütüphaneler, başka programcılar tarafından yazılmış olan ve sizi satırlarca kod yazmaktan kurtaracak hayatınızı kolaylaştıracak kodlar bütünüdür.

Örneğin, String (metin) ile çalışmayı planladığınız bir programınız olduğunu varsayalım. Aşağıdaki gibi temiz kod yazmak istiyorsunuz:


1
2
3
4
5
6
7
8
<span class="token keyword">function</span> <span class="token function">KelimeAl</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token keyword">const</span> kelimeler<span class="token operator">=</span> str<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">' '</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token keyword">return</span> kelimeler<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">CumleOlustur</span><span class="token punctuation">(</span><span class="token parameter">kelimeler</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token keyword">const</span> cumle<span class="token operator">=</span> kelimeler<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">' '</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token keyword">return</span> cumle<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

Tebrikler! Bir kütüphane oluşturdunuz.

Frameworkler veya kütüphaneler sihirli değildir. Frameworkler ve kütüphaneler başkası tarafından yazılmış yeniden kullanılabilir koddur. Amaçları, ortak problemleri daha kolay yoldan çözmenize yardımcı olmaktır.

Ben genellikle Bir evi web geliştirme kavramları için metafor olarak kullanırım.

Bir kütüphane Ikea’ya gitmek gibidir. Zaten bir evin var, ama mobilya konusunda biraz yardıma ihtiyacın var. Sıfırdan kendi masanızı yapmak istemezsiniz. Ikea eviniz için ihtiyacınız olan veya istediğiniz mobilyaları veya renklerini seçmenizi kolaylaştırır.. Kontrol sizdedir.

Öte yandan, framework bir ev inşa etmek gibidir. Mimari ve tasarım söz konusu olduğunda, bir dizi tasarıma ve sınırlı seçeneğe sahipsiniz. Müteahhit ve plan kontrol altındadır. Ne zaman neye ihtiyacınız olduğunu size zamanı gelince söyler.

Teknik olarak farkları kontrolün ters çevrilmesidir. (Inversion Of Control)

Bir kütüphane kullanırken, uygulamanın akışından siz sorumlusunuz. Kütüphaneyi ne zaman ve nerede arayacağınızı seçiyorsunuz.Kodlar hazırdır. Bir çerçeve kullandığınızda, çerçeve akıştan sorumludur. Kodunuzu girmeniz için bazı yerler sağlar, ancak gerektiğinde girdiğiniz kodu çağırır. Yani kodların tamamını siz yazarsınız.

JQuery (kütüphane) ve Vue.js (framework) kullanarak örneklendirelim.

Bir hata olduğunda bir hata mesajı görüntülemek istediğimizi düşünün. Örneğimizde, bir düğmeye tıklayacağız ve bir hata oluştuğunu varsayacağız.

jQuery


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// index.html
<span class="token tag"><span class="token punctuation">&lt;</span>html<span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token punctuation">&lt;</span>head<span class="token punctuation">&gt;</span></span>
      &lt;script src="https://code.jquery.com/jquery-3.3.1.min.js"
      <span class="token tag"><span class="token punctuation">&lt;/</span>script<span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token punctuation">&lt;</span>script <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>./app.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token punctuation">&lt;/</span>script<span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token punctuation">&lt;/</span>head<span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token punctuation">&lt;</span>body<span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token punctuation">&lt;</span>div <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
         <span class="token tag"><span class="token punctuation">&lt;</span>button <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>myButton<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token punctuation">&lt;/</span>button<span class="token punctuation">&gt;</span></span>
       <span class="token tag"><span class="token punctuation">&lt;/</span>div<span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token punctuation">&lt;/</span>body<span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token punctuation">&lt;/</span>html<span class="token punctuation">&gt;</span></span>
// app.js
// A bunch of our own code,
// followed by calling the jQuery library
let error = false;
const errorMessage = 'An Error Occurred';
$('#myButton').on('click', () =&gt; {
  error = true; // pretend some error occurs and set error = true
  if (error) {
    $('#app')
       .append(`<span class="token tag"><span class="token punctuation">&lt;</span>p <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>error<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>${errorMessage}<span class="token tag"><span class="token punctuation">&lt;/</span>p<span class="token punctuation">&gt;</span></span>`);
  } else {
    $('#error').remove();
  }
});

JQuery’yi nasıl kullandığımıza dikkat edin. Programımıza nerede aramak istediğimizi söyleriz. Bu fiziksel bir kütüphaneye gitmeye ve bazı kitapları istediğimiz gibi raftan çekmeye benzer.

Bu, jQuery işlevlerinin biz onları çağırdığımızda belirli girdiler gerektirmediğini söylemek değildir, ancak jQuery’nin kendisi bu işlevlerin bir kütüphanesidir. Yetkili biziz.

Vue.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//index.html
<span class="token tag"><span class="token punctuation">&lt;</span>html<span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token punctuation">&lt;</span>head<span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token punctuation">&lt;</span>script <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://cdn.jsdelivr.net/npm/vue<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token punctuation">&lt;/</span>script<span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token punctuation">&lt;</span>script <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>./app.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token punctuation">&lt;/</span>script<span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token punctuation">&lt;/</span>head<span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token punctuation">&lt;</span>body<span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token punctuation">&lt;</span>div <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token punctuation">&lt;/</span>div<span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token punctuation">&lt;/</span>body<span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token punctuation">&lt;/</span>html<span class="token punctuation">&gt;</span></span>
const vm = new Vue({
  template: `<span class="token tag"><span class="token punctuation">&lt;</span>div <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>vue-example<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
               <span class="token tag"><span class="token punctuation">&lt;</span>button <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkForErrors<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Submit<span class="token tag"><span class="token punctuation">&lt;/</span>button<span class="token punctuation">&gt;</span></span>
               <span class="token tag"><span class="token punctuation">&lt;</span>p <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>error<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>{{ errorMessage }}<span class="token tag"><span class="token punctuation">&lt;/</span>p<span class="token punctuation">&gt;</span></span>
             <span class="token tag"><span class="token punctuation">&lt;/</span>div<span class="token punctuation">&gt;</span></span>`,
  el: '#vue-example',
  data: {
    error: null,
    errorMessage: 'An Error Occurred',
  },
  methods: {
    checkForErrors()  {
      this.error = !this.error;
    },
  },
});

Vue ile boşlukları doldurmalıyız. Bize neye ihtiyaç duyduğunu anlatıyor ve ardından perde arkasında Vue ihtiyaç duyulduğu zaman karar veriyor. Vue, programın kontrolünü tersine çevirir. Kodumuzu Vue’ya ekliyoruz. Kontrol Vue’dedir.

Bir kütüphane ya da çerçeve olup olmadığını anlamak için kontrolün ters çevrilip çevrilmediğine bakmak yeterlidir.

Sonuç olarak

Frameworkler ve kütüphaneler, bazı genel görevleri daha az ayrıntılı bir şekilde gerçekleştirmenize yardımcı olan başkası tarafından yazılmış kodlardır.

Framework programın kontrolünü terse çevirir. Kütüphane bununla ilgilenmez. Programcılar kütüphaneleri ihtiyaç duyduklarında çağırırlar.

 

BİR CEVAP BIRAK

Please enter your comment!
Please enter your name here