Baron Logo

Merhaba ben Cengiz! İstanbul'da, Freelance Web Developer olarak profesyonel bir şekilde, web tasarım (web arayüz tasarım), HTML5-CSS3 front end kodlama, PHP back end programlama ve SEO hizmeti veriyorum. Siz de profesyonel destek alın mağdur olmayın!

Takip Edin

a

Laravel ve Vue JS Kombini

Laravel ve Vue JS Kombini

Laravel ve Vue JS Kombini

VueJS ve Laravel'in birbirleriyle nasıl bir ilgisi olabileceğini merak ediyor olabilirsiniz. VueJS bir Javascript çerçevesidir ve Laravel bir PHP çerçevesidir ve birbirlerine herhangi bir amaca hizmet edebilmelerinin bir yolu yoktur, ya da yapabilirler mi? Ve unutmayın, herhangi bir noktada işlerin aklınızdan geçtiğini düşünüyorsanız, bir geliştirici kiralayabilirsiniz .

Bununla birlikte, bunu anlamak için önce kendinizi birçok gerçek ile aydınlatmanız gerekir ve bu, her biri için nasıl faydalı olacaklarına bakılmaksızın, her iki çerçevede de bilmeniz gereken her şeyi bulabileceğiniz kapsamlı bir duraktır. diğer. Önce Vue.JS hakkında konuşalım.

vue js

VUE.JS HAKKINDA BİRAZ KISA BİLGİ

Zaten bilmiyorsanız, Vue.JS, Kullanıcı Arabirimi ve tek sayfalık uygulamalar tasarlamak için geliştirilmiş, gerçekten gelişmiş bir Javascript çerçevesidir. Evan You tarafından geliştirilen VueJS, uyarlanabilir bir mimariye sahip açık kaynaklı bir javascript çerçevesidir. Beyanname oluşturma ve bileşen kompozisyonuna odaklanır.

Şu anda, Vue.js geliştiricilerin popülerliği için konuşan GitHub'da 148 bin yıldızdan fazla yıldıza sahip . Ön uç bir çerçeve meraklısıysanız, büyük projelere ne kadar sorunsuz bir şekilde entegre edilebileceği ve web geliştirme sürecini basitleştireceği konusunda şaşıracaksınız.

 

VUEJS'İN EN İYİ 5 ÖZELLİĞİ

Şimdiye kadar, yukarıda söylediğim her şey tamamen gösterildi ve hiç devam etmedi, ancak kendine özgü özelliklerine bakalım ve Vue'nin neden bir sonraki çerçeveniz olması gerektiğini size gösterelim: -

Sanal Dom

Vue'da sunduğunuz hiçbir değişiklik doğrudan DOM'ye yansıtılmaz. Aksine, DOM'in bir kopyası Javascript veri yapısı olarak oluşturulur. Değişikliklerin yapılması gerekiyorsa, bunlar veri yapısının Javascript'inde tanıtılır. Daha sonra, çok zaman kazandıran ilk veri yapısı ile karşılaştırılır.

Bağlanma verileri

Veri bağlama, kullanıcının bir web tarayıcısını kullanarak bir web sayfasının öğelerini değiştirebileceği bir işlemdir. Dinamik HTML kullanır ve karmaşık bir komut dosyası çalıştırma veya programlama gerektirmez. Bu fonksiyonun yardımıyla değerleri kolayca yönetebilir veya HTML özelliklerine atayabilirsiniz.

Bileşenler

VueJS'nin en önemli özelliklerinden biri, bileşenleri tekrar kullanabilmesidir. Bu bileşenler, yeniden kullanılabilir kodları içine almak için temel HTML öğelerini genişletmenize yardımcı olur.

Animasyon / Geçiş

VueJS'de, DOM’e eklendiklerinde veya kaldırıldıklarında HTML öğelerinde geçiş uygulamak için çeşitli yollar bulacaksınız. Geçiş etkisi için öğenin etrafına sarılması gereken yerleşik bir geçiş bileşenine sahiptir. Üçüncü taraf animasyon kütüphanelerini de ekleyebiliriz.

Şablonlar

Vue.JS, DOM'u Vue örneği verisine bağlayan HTML tabanlı şablonlarla birlikte gelir. Vuejs bu şablonları sanal DOM Render işlevlerinde derler. Oluşturma işlevleri şablonundan yararlanmak için, şablonu oluşturma işleviyle değiştirmek zorunda kalacağız.

laravel

LARAVEL HAKKINDA BİRAZ KISA BİLGİ

Laravel, PHP tabanlı, ücretsiz ve açık kaynaklı bir web çerçevesidir. Laravel, Taylor Otwell tarafından oluşturuldu ve üretkenliği artırmak için tasarlandı. Her 6 ayda bir yeni sürümleriyle geliyorlardı ve yakın zamanda 3 Eylül'de en son sürümleriyle 3 Eylül'de çıktılar ve bu da Uzun Süreli Destek (LTS) ile geliyor. Laravel birçok özellik ile doludur. Bazıları üzerinden geçelim.

 

LARAVEL'İN EN İYİ 5 ÖZELLİĞİ

Eloquent ORM

ORM veya Nesne İlişkisel Eşleme, aktif kayıt modelinin PHP uygulamasıdır. Yapmamızı sağlayan şey, veritabanı tablolarını sınıflar halinde sunmaktır. Kafanız karışıksa, bunun anlamı bir sınıfı tanımlayabilmenizdir, diyelim ki veritabanınızdaki “kullanıcılar” tablosuna bağlanacak olan “Kullanıcı”. Şimdi “users” tablosundaki her satır Laravel'deki User sınıfının bir örneği olarak gösterilecektir.

Şablon Motoru

Laravel, dinamik içerik tohumlama kullanarak şaşırtıcı mizanpajlar oluşturmanıza yardımcı olabilecek hafif şablonları için büyük önem kazanmıştır. Bunun da ötesinde, katı yapılara sahip CSS ve JS kodlarını içeren birden fazla widget'a sahiptir. Ekstra çerçevelerdeki şablonlar, belirgin bölümleri olan basit bir düzen oluşturmak için özel olarak tasarlanmıştır.

Artisan

Laravel, Artisan adında komut satırı için yerleşik bir araç sunar. Veri tabanı yapısını, bir iskelet kodunu oluşturmak ve veri tabanı yönetimini oldukça kolaylaştıran göçlerini oluşturmak için kullanılırlar. Sadece bu değil, aynı zamanda bir anda komut satırı üzerinden temel MVC dosyalarını oluşturmak ve bu varlıkları ve ilgili konfigürasyonlarını yönetmek için geçmeli de olabilir.

Otomatik Paket Teslim

O günlere, Laravel 5.5 uygun bir çözümle çıkana kadar veri paketlerini kurmak kolay değildi. Terimden de anlaşılacağı gibi, Otomatik Paket Teslimi, herhangi bir takma ad veya sağlayıcıyı yeni paketler yüklemeden kurmadan, yüklemek istediği paketleri otomatik olarak algılar.

Veri Tabanı Geçişi

Laravel'in Artisan adlı Komut Satırı Arabirimi (CLI), veritabanı geçişini ve tohumlamayı çok kolaydır. Tüm veritabanının göçlerde ve tohumlarda çalışmasını sağlarsanız, değişiklikleri kolayca sahip olduğunuz diğer herhangi bir geliştirme makinesine geçirebilirsiniz.

 

VUEJS NASIL ÇALIŞIR?

Etkinliğe yönelik ön uç JavaScript çerçevelerinin gün ve yaşından önce web için herhangi bir program yaptıysanız, Belge Nesne Modeli'ni (DOM) güncellemeye çalışırken ortaya çıkabilecek önemli zorlukları ve verimsizlikleri muhtemelen anlayabilirsiniz.

DOM’u güncellemek, basitçe sayfayı almanız, küçük bir kısmında gerekli değişiklikleri yapmanız ve değişikliklerin etkili olması için DOM’in tamamını yeniden yüklemeniz gerektiği anlamına gelir. Örneğin, bir YouTube videosu izliyorsanız ve yeni bir yorum yapıldıysa, sayfanın tamamı yeniden yüklenmek zorunda kalacaktı; bu, videonuzun baştan başlayacağı anlamına da geliyordu.

Vue, kullanıcının göreceklerini yönetmek için sanal bir DOM kullanarak bu zorlukların üstesinden gelmeye çalışmaktadır. Yukarıda belirttiğim gibi, Vue’nun esas olarak yaptığı şey DOM’in bir kopyasını oluşturmak ve saklamak. DOM’un bir kısmında herhangi bir değişiklik yapılırsa, DOM’in tamamını yeniden yüklemeden DOM’un tam o bölümünü günceller. Bu, yorumların siz fark etmeden bile güncelleneceği anlamına gelir.

Vue, reaktif ve kompostlanabilir görünüm bileşenleri sağlar. Herhangi bir güncellemeye cevap verir ve DOM'daki gerekli değişiklikleri anında tetikler. Oluşabilecek bileşenleri, ihtiyaç duyulan her şeyi karşılamak için çeşitli kombinasyonlarda seçilebilir ve monte edilebilir. Her şey için bileşenlere sahip olabilir ve ihtiyaç duyduğunuzda bunları yeniden kullanabilirsiniz. Kavraması zor bir şeyse, her zaman bir VueJS geliştiricisini işe alabilirsiniz.

laravel ve vuejs

NEDEN VUE LARAVEL İLE KULLANMALIYIZ?

Hem Laravel hem de VueJS farklı programlama dillerinden gelse de, ve VueJS'nin Laravel'e nasıl destek sunabileceği konusunda ilgisiz görünebilir, ancak benim sürprizim için birden fazla şekilde destekliyor. VueJS'i Laravel ile birlikte kullanmanızın nedenleri şunlardır: 

1. Herşey Front-End de olur

Kullanıcıların, bilgisayarlarında yüklü bir uygulamayı kullandıkları gibi sorunsuz bir deneyime sahip olmalarını sağlamak için oluşturulmuştur. Tüm değişiklikler şimdi ön uçta gerçekleşiyor ve kullanıcıların bir daha asla bir sayfayı tekrar yüklemeleri gerekmeyecek (JavaScript’in izniyle).

2. Reaktif Bileşenler Mükemmel Bir Etkinlik Odaklı Uygulama Yapın

Vue, ön uçtaki tüm etkinlikleri yürüten, tam ölçekli, etkinlik odaklı bir web uygulaması oluşturmanıza yardımcı olabilir. Ayrıca dilediğiniz gibi kullanılabilecek kompostlanabilir bileşenler sunar. Laravel ile güzel bir şekilde birleştiği göz önüne alındığında, Laravel uygulamanızdan veri istemek ve sayfayı yeniden yüklemeden bileşenleri değiştirerek UI değişiklikleri yapmak için yalnızca birkaç gezi yapmanız gerekecektir.

Kullanıcılarınız için harika bir deneyim sunan Vue'nuzda (ön uç) kullanıcı arabirimi değişikliklerini kolayca isteyebilirsiniz. Sayfanızdaki bir metni düzenlenebilir hale getirmek veya kullanıcının yeniden yüklemeden bir kullanıcı tarafından istenen bir videoyu yüklemek için tüm bir bileşeni değiştirmek kadar basit olabilir.

Vue'nun hızı ve performansı göz önüne alındığında, bu, bilgisayar kaynaklarınızın çoğunu kullanmadan çok hızlı ve sorunsuz şekilde gerçekleşir.

3. Optimal Kompleks Ön Uç Sayfaları Oluşturma

Sık güncellenmesi gereken parçalara sahip bir uygulama oluşturmayı düşünüyorsanız, ön ucu tamamen JavaScript'te çalıştırmaktan başka seçeneğiniz yoktur.

Sanal bir DOM'a sahip olmayan vanilya JavaScript veya jQuery veya diğer JavaScript kitaplıklarındaki zorluk, güncelleme artış sıklığı veya değişiklikleri izlemek için veri hacmi ile önemli ölçüde artarsa ​​performans sorunlarına hızla çarpmanızdır. DOM’deki değişiklikler aşamalı olarak sona erecek ve gözle görülür performans gecikmeleri yaşamaya başlayacaksınız.

Uygulamanızı Vue bileşenleri ile oluşturduğunuzda, her bileşenin bağımlılıkları oluşturma işlemi sırasında otomatik olarak izlenir, böylece sistem verilerde bir değişiklik olduğunda hangi bileşenin gerçekten güncellenmesi gerektiğini kesin olarak bilir. Bu, DOM'a yapılan tüm güncellemelerin minimum kaynak kullanmasını sağlayarak genel uygulama verimliliğini artırır.

Vue, karmaşık uygulamalarda veri akışını yönetmede mükemmel olan Flux, Redux ve Vuex gibi devlet yöneticileriyle de uyumludur. Vue'nun tek yönlü veri bağlama modelini kullanması, karmaşık uygulamalarda durum yönetimini kolaylaştırır.

4. Tek Sayfa Uygulaması

Kişisel bir görüşümü paylaşmak istiyorum - Tek Sayfalı Uygulamalar, son on yılda internette olabilecek en güzel şey. Daha önce mümkün olandan daha geniş bir kullanıcı kitlesine uygulamaları açar.

Amerika ve Avrupa'nın bazı bölgelerinin dışındaki pek çok İnternet kullanıcısının internete girmekte zorluk yaşadığını düşündüğünüzde, tek sayfa uygulamalarının zengin bir web deneyimi yaşatmak için oynadığı rolü takdir etmeye başlarsınız.

Tüm uygulama varlıklarınız bir kez yüklenir (ve çoğu önbelleğe alınır), uygulamanızın kullanıcıyla etkileşimde bulunduğu tüm işlemleri gerçekleştirir, genellikle yerine getirmek için düşük bant genişliği gerektiren veri talebidir.

5. Öğrenmesi ve Kullanması Kolay

Vue içine girmek kolaydır. Geliştirici olarak sizin için çok az seçenek sunar ve soyutlanmış çok şey vardır. Vue kullanırken düz JavaScript yazdığınızı hissediyorsunuz ve düz JavaScript ile basit bir uygulama yapabilirsiniz ve Vue'da geçerli kalmaktadır.

Vue ile ilgili bir diğer harika şey de geçerli HTML'nizin de geçerli bir Vue şablonu olmasıdır. CSS'nizi harici tutabilir veya uygulama gereksinimlerinize bağlı olarak JavaScript ile işleyebilirsiniz. Diğer bileşenleri etkilemeden değişiklik yapmadan anında tek bir bileşene stil değişiklikleri uygulamak için kapsamlı stilden de yararlanabilirsiniz.

JavaScript'e aşina iseniz, Vue ile belgeleri okuduktan bir gün sonra önemsiz bir uygulama oluşturabilirsiniz.

 

SONUÇ

Artık Vue ve Laravel'i çok ayrıntılı olarak biliyorsunuz ve bunların Laravel ve VueJS'lerini bütünleştirmenin iki dünyanın en iyileriyle nasıl başa çıkacağını anlıyorsunuz. Bu çerçeveler, dünyadaki bazı büyük web uygulamalarına ayrı ayrı katkıda bulunur, onlarla birlikte neler yapabileceğinizi hayal edin. Eğer isterseniz bir PHP geliştiricisi kiralamak ve hatta bir VueJS geliştirici işe onlar piyasadaki en popüler çerçeveler bazılarıdır olarak, onları kolayca bulabilirsiniz.