e
sv

Bud and Go ile eksiksiz bir uygulama oluşturma

avatar

Yazılım Method

  • e 0

    Mutlu

  • e 0

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

Tam yığın çerçeveler birçok şekil ve boyutta gelir, ancak genellikle iki genel kalıp halinde gelirler. İlk kalıp, Ruby on Rails ve Laravel gibi arka uç merkezli çerçeveler içerir, bunlar aynı proje içinde ön uçunuzu oluşturmanıza yardımcı olacak özelliklere ve kullanımı kolay kurallar ve şablonlara sahiptir. Ardından, daha ön uç merkezli olan ancak aynı proje içinde arka ucunuz olarak sunucusuz işlevler oluşturmanıza izin veren Next.js , Nuxt.js ve SvelteKit içeren ikinci kalıp var.

Yeni Go çerçevesi Bud , oldukça minimalist başlayan ancak potansiyel olarak gereksiz dosyalar ve konfigürasyonlarla karmaşık bir CLI'yi yaymak yerine ön uç ve arka uç kodunun kullanıcılarının ihtiyaçlarına göre genişlemesine izin veren bir çerçeveye sahip olmasıyla bu tam yığın çerçevelerden farklıdır. Bud, işleri basit tutan ancak gerektiğinde ölçeklenebilen bir çerçevedir.

Bud, Svelte ile ön uç geliştirme için yerleşik işlevsellik ile birlikte gelir ve web yığınının ilgili bölümleri için daha hızlı araç setlerini kullanarak arka uç için Go'yu kullanır. Bud'ı bir deneme dönüşüne alalım ve bazı arka uç uç noktalarına çağrı yapan bir sayfa oluşturalım.

Bu makalede ilerlemek için:

Bud çerçevesini ayarlama

Önkoşullar:

  • Terminal ortamınızda yüklü Curl
  • v1.6+ sürümüne geçin
  • Node.js

Bud'ı yüklemek için aşağıdaki komutu çalıştırın:
curl -sf https://raw.githubusercontent.com/livebud/bud/main/install.sh | sh

bud -h komutunu kullanarak her şeyin yolunda gittiğini onaylayın. Ardından, bud create first-app ile yeni bir uygulama oluşturun.

Bu size bir modül adı verecektir. Go'daki modül adları için standart, onu gönderdiğiniz havuzun adıdır, örneğin github.com/username/repo-name . Dizinleri yeni uygulama klasörümüze değiştirelim, cd first-app .

Tüm bağımlılıkları npm install çalıştırın.

Geliştirme sunucusunu çalıştırmak için bud run komutunu çalıştırın ve bir sunucu, web uygulamanızın localhost:3000 adresinde görünmesine izin vermelidir.

Bud klasör yapısı

Projenizi incelediğinizde aşağıdaki yapıyı göreceksiniz:

 /ilk uygulama
├─ / tomurcuk 
├─ /node_modules 
├─ .gitignore
├─ go.mod
├─ git.sum
├─ paket.json
└─ paket.lock.json

bud run , çerçeve kodunuza bakar ve bu klasörde gerekli Go uygulamasını oluşturur ve bu klasördeki dosyalara dokunmanız gerekmez. Uygulamayı dağıtmaya hazır olduğunuzda, /bud/app klasöründeki her şeyi tek bir ikili dosyada toplayacak olan bud build çalıştırın.

Aşağıdaki dizinler eklenebilir ve çerçeve tarafından tanınır:

  • controller : bu klasör, uygulamanızın arka uç yollarını temsil eden denetleyici dosyaları içerecektir. Her dosya, dosya adına göre bir uç nokta için standart CRUD yolları sağlayabilir
  • view : bu klasör Svelte dosyalarını içerebilir ve dosya adına göre onlar için otomatik olarak rotalar oluşturur
  • public : resimler ve CSS dosyaları gibi statik varlıkları barındırır
  • internal : bu dizin yok sayılır, bu nedenle arka uç veya ön uç yolu olarak değerlendirilmemesi gereken uygulamaya özel kodu barındırmak için iyi bir yerdir.

Bud'da kök sayfa oluşturma

Sayfalarımız Svelte kullanılarak tanımlanmış olsa da, sayfa için her zaman ilgili bir kontrolörümüz olmalıdır. Önce bir controller klasörü oluşturalım ve bu klasörde controller.go adında bir dosya oluşturalım. Bu, / bitiş noktasını ele alacaktır.

Diğer tüm denetleyiciler için, içinde benzer şekilde adlandırılmış bir Go dosyası bulunan bir klasör oluşturacaksınız.

Örneğin, /posts bitiş noktası /controller/posts/posts.go vb. olabilir.

Bu dosyaların her birinde, bir Controller struct tanımlamalı, ardından bu struct'ı alıcı olarak tanımlamalıyız. Kök rotamız için controller.go şöyle görünür:

 paket Denetleyici
// Denetleyici Yapısı, tüm Eylem yöntemlerini barındıracak
tip Denetleyici yapısı {}
// Index, kullanıcıların listesini gösterir
// view/index.svelte'yi otomatik olarak oluşturacak
// GET /kullanıcılar
func (c *Denetleyici) İndeks() {}

Yöntem tetikleyicisinin adı, tüm kodu yazmamıza gerek kalmadan RESTful sözleşmelerinden beklediğiniz şeydir. Burada index yöntemi, view index.svelte adlı bir dosyadan bir görünüm döndürür.

Görünümler esasen dosya tabanlı yönlendirme yoluyla yapılır; bu, Next, Nuxt veya SvelteKit kullandıysanız size tanıdık gelecektir. Bud Svelte kullandığından, index.svelte ana sayfanızı temsil etmelidir. Bu nedenle, projenizde bir view klasörü oluşturun ve bunun içinde aşağıdaki kodla index.svelte oluşturun.

 <div>
    <h1>Uygulamanızın Ana sayfası buradadır</h1>
    <bölüm>
        <button on:click={handleClick}>Bunu tıklayın</button>
    </bölüm>
</div>
<script>
    const handleClick = (olay) => {
        alert("Düğmeye Tıkladınız")
    }
</script>
<stil>
    h1, bölüm {
        metin hizalama: merkez;
    }
    düğme {
        sınır: yok;
        dolgu: 10 piksel;
        yazı tipi boyutu: 1em;
        arka plan rengi: kahverengi;
        Beyaz renk;
        sınır yarıçapı: 40 piksel;
    }
</style>

Şimdi, Bud sunucumuzu çalıştırıp localhost:3000 gidersek, sayfamızı çalışırken göreceğiz. Şu anda Bud, herhangi bir denetleyicide aşağıdaki eylemleri gerçekleştirebilir:

Eylem yöntemi HTTP yöntemi URL Şablon işlendi
index ALMAK /uç nokta /view/endpoint/index.svelte
show ALMAK /bitiş noktası/:id /view/endpoint/show.svelte
new ALMAK /uç nokta/yeni /view/endpoint/new.svelte
create İLETİ /uç nokta şablon yok
edit ALMAK /bitiş noktası/:id/düzenle /view/endpoint/edit.svelte
update KOY /bitiş noktası/:id şablon yok
delete SİLMEK /bitiş noktası/:id şablon yok

Görünümünüze veri teslimi

Bir görünüm oluşturan bir yöntemin dönüş değeri, Svelte şablonuna bir destek olarak iletilecektir:

  • Eylem, Dog yapısı gibi tek bir yapı döndürürse, dog adlı bir destek olarak teslim edilir.
  • Eylem bir dizi Dog yapısı döndürürse, pervaneye dogs denir.
  • Eylem, adlandırılmış dönüş değerleri döndürürse, her bir dönüş değeri, eşleşen adın bir destekçisidir.

Kök görünümümüze bazı aksesuarlar gönderelim ve controller/controller.go güncelleyelim:

 paket denetleyicisi
// Denetleyici Yapısı, tüm Eylem yöntemlerini barındıracak
tip Denetleyici yapısı {}
// Şablona gönderilecek bir veri Yapısı tanımlayın
Alex yapısı yazın {
    isim dizisi
    yaş int
}
// Index, kullanıcıların listesini gösterir
// view/index.svelte'yi otomatik olarak oluşturacak
// Yapımızı dönüş değeri olarak tanımlayın ve döndürün
// GET /kullanıcılar
func (c *Kontrolör) İndeks() Alex {
    Alex'i iade et{"Alex Merced", 37}
}

Şimdi, prop'u getirmek ve butona tıkladığımızda kullanmak için görünümümüzü güncelleyelim. view/index.svelte buna göre güncelleyin:

 <div>
    <h1>Uygulamanızın Ana sayfası buradadır</h1>
    <bölüm>
        <button on:click={handleClick}>Bunu tıklayın</button>
    </bölüm>
</div>
<script>
    alex'i dışa aktar;
    const handleClick = (olay) => {
        alert(`Benim adım ${alex.Name} ve yaşım ${alex.Age}`)
    }
</script>
<stil>
    h1, bölüm {
        metin hizalama: merkez;
    }
    düğme {
        sınır: yok;
        dolgu: 10 piksel;
        yazı tipi boyutu: 1em;
        arka plan rengi: kahverengi;
        Beyaz renk;
        sınır yarıçapı: 40 piksel;
    }
</style>

Düğmeye tıklayın. Go yöntemimiz tarafından döndürülen verilerin Svelte şablonumuzda kullanıldığına dikkat edin. Düzenli!

Bud diğer çerçevelerle nasıl karşılaştırılır?

Bud'ın henüz sahip olmadığı birçok özellik var, ancak hayatının erken döneminde olduğu göz önüne alındığında oldukça etkileyici. Bud'ı gelecekte Bud ile görmeyi umduğumuz diğer çerçeveler ve özelliklerle karşılaştıralım.

Bud, Ruby on Rails ve Laravel'e karşı

Bu çerçeveler, web soketleri, kanallar ve daha fazlası gibi özellikleri kolayca ekleyebilir. Bud, sonunda bu özellikleri dahil etmeyi ima eden bazı gelecekteki dizin adlarını ayırdı.

Bud ve Next.js, Nuxt.js ve SvelteKit karşılaştırması

Next, Nuxt ve SvelteKit, bir düzeyde sunucu tarafı işlemeye izin verirken, sırasıyla React, Vue ve Svelte'nin istemci tarafı doğasına büyük ölçüde güveniyor. Bu, Redux gibi durum yönetimi çözümlerini içlerinde kullanma olasılığını sağlar. Bu arada, Bud, arka ucun durumu yönetmesine izin vermek için daha geleneksel bir yaklaşım kullanıyor ve henüz benzer durum yönetimi kalıplarına giden net bir yola sahip değil. RESTful sözleşmelerine ve web standartlarına bağlı olması nedeniyle, muhtemelen Remix.js'ye daha çok benzer.

Çözüm

Bud, Next ve Ruby on Rails gibi çerçevelerde gördüğümüz dosya tabanlı yönlendirme ve RESTful denetleyici yöntemleri gibi birçok kuralı benimser ve bunları tek bir çerçeve içinde birleştirir. Bud, Laravel gibi tüm senaryolar için bir çözüm ile sağlam bir çerçeve olmak üzere daha fazla işlevsellik ve özellik oluşturmaya devam ederken, Bud, Go ve Svelte ile çalışmayı ve avantajlarından yararlanmayı çok kolay hale getiren basit, sözleşmeye dayalı bir iş akışı sağlar.

Bud and Go ile tam yığın uygulama oluşturma yazısı ilk olarak LogRocket Blog'da göründü.

etiketlerETİKETLER
Üzgünüm, bu içerik için hiç etiket bulunmuyor.

Sıradaki içerik:

Bud and Go ile eksiksiz bir uygulama oluşturma