1. VUE.JS çerçevesine giriş

Bu belgedeki PDF, |BURADA|` olarak mevcuttur.

Bu belgedeki örnekler |BURADA| adresinde mevcuttur.

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

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

Bunların hepsi yeni başlayanlar için hazırlanmış 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 makalelerdeki JavaScript diliyle ilgilenmeyen okuyucu burada duracaktır;
• [2-4] numaralı belgelerin tümü, [1] numaralı belgede geliştirilen vergi hesaplama sunucusu için bir JavaScript istemcisi oluşturmayı amaçlamaktadır;
• 3. ve 4. makalelerdeki [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, JavaScript'in bu sürümünü bilmeyenlere yöneliktir. 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) 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] okuma dosyası, zaman zaman [1] ve [2] belgelerine başvurmayı gerektirebilir;
• VUE.JS iyice öğrenildikten sonra, SSR modunda (Sunucu Tarafında İşlenmiş) bir tarayıcıda ç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 kalabilir;

[1] belgesinde geliştirilen vergi hesaplama sunucusunun son sürümü (bkz. |Örneklerle PHP7 diline giriş (2019)| belgesi), çeşitli şekillerde iyileştirilebilir:

• Yazılı sürüm sunucuya odaklanmıştır. Şu anda (Eylül 2019) trend, istemci/sunucu modeline doğru kaymaktadır:

• sunucu, jSON hizmeti olarak çalışır;
• statik veya dinamik bir sayfa, web uygulamasının giriş noktasıdır. Bu sayfa HTML /CSS'in yanı sıra JavaScript'i de içerir;
• web uygulamasının diğer sayfaları, JavaScript aracılığıyla dinamik olarak elde edilir:
  • HTML sayfası, giriş sayfasını sağlayan aynı sunucu tarafından sağlanan statik veya dinamik parçaların birleştirilmesiyle ya da istemcinin JavaScript'i tarafından oluşturulabilir;
  • bu farklı sayfalar, jSON hizmetinden istenen verileri görüntüler;

Böylece iş yükü istemci ve sunucu arasında dağıtılır. Yükü hafifleyen sunucu, daha fazla kullanıcıya hizmet verebilir.

Bu modele karşılık gelen mimari şöyledir:

JS : JavaScript

Tarayıcı, istemcidir:

• statik veya dinamik sayfa ya da parçalara yönelik bir hizmetin istemcisidir (yukarıda gösterilmemiştir);
• jSON veri hizmetinin istemcisidir;

Dolayısıyla JavaScript kodu, bir jSON istemcisidir ve bu nedenle, [UI, métier, dao] (UI: Kullanıcı Arayüzü) katmanlarına ayrılabilir; tıpkı PHP ile yazılmış jSON müşterilerimizde olduğu gibi. Sonuç olarak, tarayıcı yalnızca tek bir sayfa, yani ana sayfayı yükler. Diğer tüm sayfalar JavaScript tarafından alınır ve oluşturulur. Bu tür uygulamalara SPA: Tek Sayfalı Uygulama veya APU: Tek Sayfalı Uygulama denir.

Bu tür uygulamalar aynı zamanda AJAX: Asynchronous Javascript ve XM:

• Asenkron olarak da adlandırılan uygulamalar grubuna dahildir; çünkü istemcinin jSON sunucusuna yaptığı JavaScript çağrıları asenkron gerçekleşir;
• XML: çünkü XML, jSON'in ortaya çıkmasından önce kullanılan teknolojiydi. Ancak AJAX kısaltması korunmuştur;

Bu belgede bu tür bir mimariyi inceleyeceğiz. İstemci tarafında, [Vue.js] [https://vuejs.org/] JavaScript çerçevesini kullanarak, jSON PHP sunucusunun JavaScript istemcisini yazacağız; bu sunucuyu [1] belgesinde yazdığımız sunucu için bir JavaScript istemci yazacağız.

[Vue.js], bir JavaScript çerçevesidir. [2] belgesinde JavaScript dilini tanıtmıştık. [vue.js] çerçevesini kapsamlı bir şekilde incelemeyeceğiz. Sadece, vergi hesaplama sunucusunun 14. sürümünün jSON sürümü için bir [Vue.js] istemcisi yazarken kullanılacak kavramları tanıtmakla yetineceğiz (bkz. |https://tahe.developpez.com/tutoriels-cours/php7|).

Bu belgedeki komut dosyaları açıklamalıdır ve konsol çıktıları da verilmiştir. Bazen ek açıklamalar da sunulmaktadır. Belge, aktif bir okuma gerektirir: 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é, Ekim 2019