14,235 okumalar

Rust ve WebAssembly ile Basit Bir Web Uygulaması Oluşturma: Adım Adım Kılavuz

ile Max Zhuk8m2023/10/26

Çok uzun; Okumak

Rust ve WebAssembly kullanarak yüksek performanslı bir web uygulaması oluşturmayı öğrenin.

featured image - Rust ve WebAssembly ile Basit Bir Web Uygulaması Oluşturma: Adım Adım Kılavuz

giriiş

Hiç JavaScript'in performans sınırlamalarından dolayı kendinizi hayal kırıklığına uğramış halde buldunuz mu? Yalnız değilsin. Web uygulamaları karmaşıklaştıkça yüksek performanslı çözümlere olan ihtiyaç daha da belirginleşiyor. Yalnızca performansı değil aynı zamanda güvenlik ve verimliliği de vaat eden iki teknoloji olan Rust ve WebAssembly'ye girin. Bu makalede Rust ve WebAssembly kullanarak basit bir web uygulaması oluşturma sürecini anlatacağız.

Neden Rust ve WebAssembly?

Pas nedir?

Rust, bellek güvenliği, eşzamanlılık ve performans sağlamayı amaçlayan bir sistem programlama dilidir. Güçlü tip sistemi ve sahiplik modeli sayesinde boş işaretçilerin, arabellek taşmalarının ve veri yarışlarının neden olduğu yaygın hataları ortadan kaldırmak için tasarlanmıştır. Bu, Rust'u güvenilir ve verimli yazılım oluşturmak için ideal bir seçim haline getirir.

Rust'ın Avantajları

Bellek Güvenliği : Rust'un sahiplik modeli, değişkenlerin tek bir sahibi olmasını sağlayarak bellek sızıntılarını ve yetkisiz veri erişimini önler.
Performans : Rust hız için tasarlanmıştır ve C ve C++ gibi dillerle yakın rekabet halindedir.
Eşzamanlılık : Rust'un dil tasarımı, eşzamanlı kod yazmayı kolaylaştırarak onu son derece ölçeklenebilir hale getirir.
Zengin Ekosistem : Sürekli büyüyen paket deposu Cargo, Rust, web geliştirme, veri işleme ve daha fazlası için çok çeşitli kitaplıklar ve çerçeveler sunar.

WebAssembly nedir?

WebAssembly (genellikle wasm olarak kısaltılır), C, C++ ve Rust gibi üst düzey diller için derleme hedefi görevi gören ikili bir talimat formatıdır. Web tarayıcılarında yerele yakın performans sağlayan, taşınabilir, etkili bir kod formatı olacak şekilde tasarlanmıştır.

WebAssembly'ın Avantajları

Performans : WebAssembly kodu, ortak donanım özelliklerinden yararlanarak neredeyse yerel hızda yürütülür.
Güvenlik : WebAssembly, ana sistemden ayrı, korumalı bir ortamda yürütülecek şekilde güvenli ve korumalı alanda çalışacak şekilde tasarlanmıştır.
Taşınabilirlik : WebAssembly platformdan bağımsızdır, yani uyumlu bir web tarayıcısına sahip herhangi bir makinede çalışabilir.
Birlikte Çalışabilirlik : WebAssembly modülleri, JavaScript uygulamalarına kolayca entegre edilebilir ve mevcut web teknolojilerinden yararlanmanıza olanak tanır.

Rust ve WebAssembly'nin Sinerjisi

Rust'un performans ve güvenlik özelliklerini WebAssembly'nin hızı ve taşınabilirliğiyle birleştirmek, web geliştirme için güçlü bir ikili oluşturur. İşte bu yüzden birlikte bu kadar iyi çalışıyorlar:

Optimize Edilmiş Performans : Rust'un sıfır maliyetli soyutlamalara odaklanması, WebAssembly modüllerinizin yalın ve hızlı olmasını sağlar.
Emniyet ve Güvenlik : Hem Rust hem de WebAssembly, güvenli yürütmeye öncelik vererek web uygulamalarınızı daha güvenilir hale getirir.
Entegrasyon Kolaylığı : Rust, WebAssembly için birinci sınıf desteğe sahiptir, bu da Rust kodunu wasm'e derlemeyi ve web uygulamalarınıza entegre etmeyi kolaylaştırır.

Rust ve WebAssembly'dan yararlanarak yalnızca modern web geliştirme trendlerine ayak uydurmakla kalmazsınız; eğrinin ilerisinde kalıyorsun.

Geliştirme Ortamınızı Kurma

Koda dalmadan önce Rust ve WebAssembly için özel olarak tasarlanmış bir geliştirme ortamı oluşturmak çok önemlidir. Bu, gerekli tüm araç ve kitaplıkların elinizin altında olmasını sağlayarak geliştirme sürecini kolaylaştıracaktır.

Rust'ı Yükleme

Rust Installer'ı İndirin : Resmi Rust web sitesini ziyaret edin ve işletim sisteminize uygun yükleyiciyi indirin.
Yükleyiciyi çalıştırın : Terminalinizi açın ve Rust'u ve paket yöneticisi Cargo'yu yüklemek için aşağıdaki komutu çalıştırın.
```
 curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
```
Kurulumu Doğrulayın : Rust'un doğru şekilde kurulduğundan emin olmak için yeni bir terminal penceresi açın ve şunu çalıştırın:
```
 rustc --version
```
Çıktı olarak Rust derleyici sürümünü görmelisiniz.

Wasm-pack'in kurulması

wasm-pack WebAssembly'yi hedef alan Rust kasalarının montajı ve paketlenmesi için bir araçtır.

Wasm-pack'i yükleyin : Terminalinizi açın ve aşağıdaki komutu çalıştırın:
```
 curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
```
Kurulumu Doğrulayın : Aşağıdakileri çalıştırarak wasm-pack kurulu olduğunu kontrol edin:
```
 wasm-pack --version
```

Node.js ve npm'yi yükleme

Node.js ve npm, bağımlılıkları yönetmek ve web sunucunuzu çalıştırmak için gereklidir.

Node.js'yi indirin : Resmi Node.js web sitesini ziyaret edin ve işletim sisteminize uygun yükleyiciyi indirin.
Yükleyiciyi çalıştırın : Hem Node.js'yi hem de npm'yi yüklemek için kurulum talimatlarını izleyin.
Kurulumu Doğrulayın : Bir terminal açın ve Node.js ve npm'nin kurulu olduğunu kontrol etmek için aşağıdaki komutları çalıştırın:
```
 node --version npm --version
```

IDE'nizi Kurma

Rust ve WebAssembly geliştirme için herhangi bir metin düzenleyiciyi kullanabilseniz de, Visual Studio Code gibi IDE'ler Rust için kod tamamlama, satır oluşturma ve hata ayıklama gibi özellikler sağlayan uzantılar sunar.

Visual Studio Code'u yükleyin : Resmi web sitesinden indirip yükleyin.
Rust Uzantısını Yükleyin : Visual Studio Code'u açın, Uzantılar pazarına gidin ve Rust-lang'a göre "Rust" uzantısını arayın. Gelişmiş Rust desteği için yükleyin.

MacOS Kullanıcıları için Not : Bu kılavuzda sağlanan kurulum komutları macOS ile uyumludur. Herhangi bir sorunla karşılaşırsanız platforma özel talimatlar için lütfen ilgili resmi belgelere bakın.

Basit Bir Rust Programı Oluşturma

Bu bölümde belirli bir sayının faktöriyelini hesaplayan bir Rust programı oluşturacağız. Bu bize, hesaplama açısından yoğun bir program oluştururken Rust'un işlevler, döngüler ve koşullu ifadeler gibi bazı özelliklerini keşfetme şansı verecek.

Rust Projesini Başlatın

Yeni Bir Rust Kütüphanesi Oluşturun : Terminalinizi açın ve yeni bir Rust kütüphanesi projesi oluşturmak için aşağıdaki komutu çalıştırın.
```
 cargo new --lib factorial_calculator
```
Proje Dizinine gidin :
```
 cd factorial_calculator
```

Faktöriyel Fonksiyonun Yazılması

lib.rs Dosyasını açın : Metin düzenleyicinizde veya IDE'nizde src/lib.rs dosyasına gidin.
Faktöriyel Fonksiyonu Uygulamak : Faktöriyel fonksiyonu uygulamak için aşağıdaki Rust kodunu ekleyin.
```
 #[no_mangle] pub extern "C" fn factorial(n: u32) -> u32 { if n == 0 { 1 } else { n * factorial(n - 1) } }
```
Burada, argüman olarak u32 (işaretsiz 32 bit tamsayı) alan ve u32 değerini döndüren, factorial adı verilen bir fonksiyon tanımlıyoruz. İşlev, verilen sayının faktöriyelini hesaplamak için yinelemeyi kullanır.

WebAssembly'a Derle

Rust Kodunu Derleyin : Artık faktöriyel fonksiyonumuz olduğuna göre, onu bir WebAssembly modülünde derleyelim. Terminalinizde aşağıdaki komutu çalıştırın:
```
 wasm-pack build
```
Derlemeyi Doğrulayın : Komutu çalıştırdıktan sonra proje klasörünüzde bir pkg dizini görmelisiniz. İçinde WebAssembly modülünü ( factorial_calculator_bg.wasm ) ve oluşturulan JavaScript bağlamayı ( factorial_calculator.js ) bulacaksınız.

İşte buyur! Bir sayının faktöriyelini hesaplayan ve bunu bir WebAssembly modülünde derleyen bir Rust programı oluşturdunuz. Bu sadece Rust'un yeteneklerini göstermekle kalmıyor, aynı zamanda bu mantığın bir web uygulamasına entegre edilmesi için zemin hazırlıyor.

WebAssembly'ı bir Web Uygulamasına Entegre Etme

Artık faktöriyelleri hesaplamak için bir WebAssembly modülümüz olduğuna göre, onu basit bir web uygulamasına entegre edelim. Kullanıcıların bir sayı girebileceği ve ardından Rust tarafından oluşturulan WebAssembly modülümüzü kullanarak bu sayının faktöriyelini görüntüleyebileceği temel bir HTML arayüzü oluşturacağız.

HTML ve JavaScript Kurulumu

HTML Dosyası Oluşturun : Proje dizininizde index.html adında yeni bir dosya oluşturun ve aşağıdaki HTML kodunu ekleyin:

 <!DOCTYPE html> <html> <head> <title>Factorial Calculator</title> </head> <body> <h1>Factorial Calculator</h1> <input type="number" id="numberInput" placeholder="Enter a number"> <button onclick="calculateFactorial()">Calculate</button> <p>Result: <span id="result"></span></p> <script src="./bootstrap.js"></script> </body> </html>

Burada sayı için bir giriş alanı, hesaplamayı tetikleyen bir düğme ve sonucu görüntüleyen bir paragraf içeren basit bir arayüz oluşturuyoruz.

JavaScript Dosyası Oluşturun : bootstrap.js adında yeni bir dosya oluşturun ve aşağıdaki JavaScript kodunu ekleyin:
```
 import('./factorial_calculator').then(module => { window.calculateFactorial = () => { const input = document.getElementById('numberInput').value; const result = module.factorial(parseInt(input)); document.getElementById('result').innerText = result; }; }).catch(console.error);
```
Bu scriptte WebAssembly modülümüzü dinamik olarak import edip, calculateFactorial adında bir fonksiyon tanımlıyoruz. Bu fonksiyon giriş alanından sayıyı okur, WebAssembly modülümüzden factorial fonksiyonunu çağırır ve sonucu görüntüler.

Web Uygulamasını Çalıştırma

Bir Web Sunucusu Kurun : Yerel bir web sunucunuz yoksa, npm'yi kullanarak bir tane kurabilirsiniz:
```
 npm install -g http-server
```
Web Sunucusunu çalıştırın : Terminaldeki proje dizininize gidin ve şunu çalıştırın:
```
 http-server .
```
Web Uygulamasını açın : Web tarayıcınızı açın ve http://localhost:8080 adresine gidin. Faktöriyel Hesaplayıcı web uygulamanızı görmelisiniz. Bir sayı girin, "Hesapla"ya tıklayın; sayının faktöriyeli görüntülenmelidir.

Ve bu kadar! Rust tarafından oluşturulan bir WebAssembly modülünü basit bir web uygulamasına başarıyla entegre ettiniz. Bu, yüksek performanslı web uygulamaları oluşturmak için Rust'u WebAssembly ile birleştirmenin gücünü ve esnekliğini gösteriyor.

Çözüm

Bu makalede, web geliştirme için Rust ve WebAssembly'nin güçlü kombinasyonunu araştırdık. Geliştirme ortamımızı kurarak başladık, ardından bir sayının faktöriyelini hesaplayan bir Rust programı oluşturmaya geçtik. Son olarak bu programı basit bir web uygulamasına entegre ettik.

Rust ve WebAssembly arasındaki sinerji, yüksek performanslı, güvenli ve verimli web uygulamaları oluşturmak için çok sayıda fırsat sunuyor. İster mevcut bir projeyi optimize etmek ister yeni bir projeye başlamak istiyor olun, bu teknolojiler dikkate alınmaya değer sağlam çözümler sunar.

Web teknolojileri gelişmeye devam ettikçe, çağın ilerisinde olmak çok önemlidir. Rust ve WebAssembly yalnızca modern trendler değil; bunlar yeni nesil web uygulamalarının yapı taşlarıdır.

Bu yolculukta bana katıldığınız için teşekkür ederim ve sizi Rust ve WebAssembly dünyasına daha derinlemesine dalmaya teşvik ediyorum. Daha karmaşık özellikler oluşturmaya ve gerçek dünya uygulamalarını keşfetmeye odaklanacağımız gelecek makalelerimiz için bizi takip etmeye devam edin.