1. NUXT.JS çerçevesine giriş

Bu belgedeki PDF, |BURADA| adresinde mevcuttur.

Bu belgedeki örnekler |BURADA| adresinde mevcuttur.

Bu belge, dört makaleden oluşan bir serinin parçasıdır:

|Örneklerle PHP7 diline giriş (2019)|;
|ECMASCRIPT6 diline örneklerle giriş (2019)|;
|VUE.JS çerçevesine örneklerle giriş (2019)|;
|Örneklerle NUXT.JS Çerçevesine Giriş (2019)|. Bu, elinizdeki belgedir;

Bunların hepsi yeni başlayanlara yönelik belgelerdir. Makaleler arasında mantıksal bir akış vardır ancak birbirleriyle çok sıkı bir bağlantı yoktur:

[1] belgesi, PHP 7 dilini tanıtmaktadır. Yalnızca PHP diliyle ilgilenen ve sonraki makalelerde yer alan JavaScript diliyle ilgilenmeyen okuyucu burada duracaktır;
[2-4] belgeleri, [1] belgesinde geliştirilen vergi hesaplama sunucusu için bir JavaScript istemcisi oluşturmayı amaçlamaktadır;
3. ve 4. makalelerde yer alan [vue.js] ve [nuxt.js] JavaScript çerçeveleri, ECMASCRIPT'in en son sürümlerindeki JavaScript bilgisini gerektirir; bu sürümler 6. sürümdür. Dolayısıyla [2] belgesi, bu JavaScript sürümünü bilmeyenler için hazırlanmıştır. Bu belge, [1] belgesinde oluşturulan vergi hesaplama sunucusuna atıfta bulunmaktadır. [2] belgesini okuyanlar, zaman zaman [1] belgesine başvurmak zorunda kalabilirler;
ECMASCRIPT 6'yı iyice öğrendikten sonra, SPA modunda (Tek Sayfalı Uygulama) bir tarayıcıda çalışan JavaScript istemcileri oluşturmaya olanak tanıyan VUE.JS çerçevesine geçilebilir. Bu, [3] belgesidir. Bu belge, hem [1] belgesinde oluşturulan vergi hesaplama sunucusuna hem de [2]'te oluşturulan bağımsız JavaScript istemci koduna atıfta bulunmaktadır. [3] belgesini inceleyen kişi, zaman zaman [1] ve [2] belgelerine başvurmak zorunda kalabilir;
VUE.JS iyice öğrenildikten sonra, tarayıcıda SSR (Sunucu Tarafında İşlenmiş) modunda çalışan JavaScript istemcileri oluşturmaya olanak tanıyan NUXT.JS çerçevesine geçilebilir. Bu, hem [1] belgesinde oluşturulan vergi hesaplama sunucusuna, [2]'te oluşturulan bağımsız JavaScript istemci koduna ve [3] belgesinde geliştirilen [vue.js] uygulamasına atıfta bulunur. [4] belgesini okuyanlar, zaman zaman [1], [2] ve [3] belgelerine başvurmak zorunda kalabilirler;

Bu belge, [3] belgesinde VUE.JS çerçeve yapısı ile yapılan çalışmanın devamını oluşturmaktadır.

Bu bölümde aşağıdaki mimari ele alınmaktadır:

[1]'te, bir web tarayıcısı, bir [3] sunucusundan gelen ve bir kullanıcıya yönelik [5, 7] web sayfalarını görüntüler. Bu sayfalar, bir [2] veri web hizmetinin istemcisini ve bir [3] web sayfası parçaları sunucusunun istemcisini uygulayan JavaScript kodları içerir;
[2]'te web sunucusu bir veri sunucusudur. Herhangi bir dilde yazılabilir. Belki ilk sefer hariç, geleneksel anlamda (HTML, CSS, JavaScript) web sayfaları üretmez. Ancak bu ilk sayfa, klasik bir web sunucusundan ([3]; veri sunucusu değil) alınabilir. Başlangıç sayfasındaki Javascript, daha sonra görüntülenecek [4] verilerini, veri sunucusu görevi gören [2] web sunucusundan alarak uygulamanın çeşitli web sayfalarını oluşturacaktır. Ayrıca, bu verileri sunmak için [5] web sayfası parçalarını [3] web sayfası sunucusundan da alabilir;
[4]'te kullanıcı bir eylem başlatır;
[6,7]'te: bir web sayfası parçasıyla biçimlendirilmiş verileri alır;

[nuxt.js] |https://fr.nuxtjs.org/| çerçeve yapısı, aşağıdaki işleyişi uygulamamıza olanak sağlayacaktır:

uygulamanın ilk sayfası, [node.js] [3] sunucusu tarafından sunulur. Ayrıca, uygulamanın diğer sayfaları da aynı sunucuda bulunmaktadır. Bu sayfalar, kullanıcı tarayıcıya URL adresini elle girdiğinde sunulur. Bu sayfalar (yaklaşık olarak) bir [vue.js] uygulamasını barındırır;
tarayıcıya ilk sayfa yüklendikten sonra, uygulama klasik bir [vue.js] uygulaması gibi davranır. Yukarıdaki şemamızda, uygulama daha sonra [2] veri sunucusuyla iletişim kurar;

Sonuç olarak, uygulama ilk sayfa hariç ve kullanıcı URL adresini elle girdiğinde, bir [vue.js] uygulaması gibi davranır. Bu durumlarda, sayfa [3] sunucusunda aranır. Bir arama motoru uygulamanın farklı sayfalarını talep ettiğinde, sayfaları [3] sunucusundan alır. Bu sayfalar, SEO için optimize edilmiş olabilir (Arama Motoru Optimizasyonu). [vue.js] uygulamasında ise arama motoru, SEO gibi anlamı çok az olan bir sayfa alır. Örneğin, [3] belgesindeki vergi hesaplama sunucusunun istemci uygulamasında, uygulamanın başlatılması sırasında tarayıcı tarafından alınan sayfa şöyleydi:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/client-vuejs-impot/favicon.ico">
    <title>vuejs</title>
  <link href="/client-vuejs-impot/app.js" rel="preload" as="script"></head>
  <body>
    <noscript>
      <strong>We're sorry but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!--ile derlenen dosyalar otomatik olarak eklenecektir -->
  <script type="text/javascript" src="/client-vuejs-impot/app.js"></script></body>
</html>

Tarayıcı tarafından yüklenen tek sayfa budur. Uygulamanın diğer tüm sayfaları, tarayıcının yardımı olmadan JavaScript tarafından dinamik olarak oluşturulur. Bazı arama motorları bu sayfayla yetinir. Diğerleri ise sayfada bulunan JavaScript'i çalıştırarak (yukarıdaki 9. satır) daha ileri gider. Böylece başka bir sayfa elde edilir. Bu sayfa, sayfanın görüntüleyeceği verileri almak için asenkron bir işlem içerebilir. Bu durumda arama motorları beklemez. Sonuç olarak eksik bir sayfa ile karşı karşıya kalırız. Belki de vergi hesaplama sunucusundaki [vue.js] müşterimizin durumunun da böyle olduğunu hatırlayabilirsiniz: İlk sayfanın yüklenmesi sırasında asenkron bir şekilde, vergi hesaplama sunucusuyla bir jSON oturumu başlatır. Bu özel durumda, bu durum arama motoru tarafından alınan sayfayı etkilemez. Diğer uygulamalar için ise bu durum, SEO açısından dezavantajlı olabilir.

[nuxt.js] kullanıldığında, uygulamanın her bir sayfası için arama motoruna daha anlamlı bir sayfa sunulabilir.

Bu belgedeki komut dosyaları açıklamalıdır ve konsol çıktıları da verilmiştir. Bazen ek açıklamalar da sunulmaktadır. Belgeyi dikkatli bir şekilde okumak gerekir: bir komut dosyasını anlamak için hem kodunu, hem açıklamalarını hem de çalıştırma sonuçlarını okumak gerekir.

Serge Tahé, Aralık 2019