2,697 okumalar

Buh-Bye Webpack ve Node.js, Hello Rails ve İçe Aktarma Haritaları

ile John Vester7m2024/08/07

Çok uzun; Okumak

Rails 7, Node.js ve Webpack'in kullanımını kolaylaştıran yeni özellikler sundu. Yeni Haritaları içe aktarma özelliği, geliştiricilerin haritaları uygulamalarına aktarmalarına olanak tanır. Bu, paketlerin paketlenmesi ve ES6 ile Babel'in aktarılmasıyla ilgili karmaşıklıklarla uğraşma ihtiyacını ortadan kaldırır. Bu makalede, Ruby on Ruby ile yeni Haritaları İçe Aktarma özelliğinin nasıl kullanılacağı açıklanmaktadır.

featured image - Buh-Bye Webpack ve Node.js, Hello Rails ve İçe Aktarma Haritaları

Yeni teknolojileri öğrenerek vakit geçirmekten hoşlanırım. Ancak yeni teknolojilerle çalışmanın çoğu zaman en büyük dezavantajı, erken benimsemeyle birlikte gelen kaçınılmaz sıkıntı noktalarıdır. Bunu, Web3 ile hızlanırken " 2022'de Tam Yığın Geliştiriciden Web3 Öncüsüne Nasıl Geçiş Yapılır? " bölümünde oldukça gördüm.

Yazılım mühendisleri olarak, yeni teknolojiyi deneme sürüşü yaparken bu erken benimseme zorluklarını kabul etmeye alışkınız. Benim için en iyi şey, görünüşte mantıksız adımlar hafızamda kalmadığından, uyguladığım notların ve komutların sürekli bir listesini tutmaktır.

Web3'ün yanı sıra, bu zorluğu JavaScript alanında, Node.js ve Webpack kullanmanın yarı standart gerekliliklerinde de buldum. Node.js ve Webpack ile uğraşmadan JavaScript'i olduğu gibi kullanabileceğim bir çözüm belirlemek istedim. Yakın zamanda Rails 7 sürümünün bu durumu nasıl ele aldığını okudum. Bu makalede ele alacağım kullanım durumu budur.

Raylar Hakkında

Tamamen şeffaf olmak gerekirse, Ruby ve Ruby on Rails ile olan deneyimim yok denecek kadar az. Yıllar önce birisinin tamamen işlevsel bir hizmet oluşturmak için bazı komutlar verdiğini izlediğimi hatırlıyorum ve "Vay canına, bu harika görünüyor" diye düşündüm. Ancak hizmet ve uygulama geliştirme konusunda bu yaklaşımla uğraşarak hiç zaman harcamadım.

Bu demoyu 2006'nın başlarında gördüğüme eminim çünkü Rails ilk olarak 2005'in sonlarında ortaya çıktı. Gösteride gördüğüm gibi, sonuç, model-görünüm-kontrolör (MVC) tasarım modelini destekleyen bir hizmetti; Spring, Struts, JSF ve Seam çerçevelerini ilk kez kullanmaya başladığımda aşinaydım.

Rails, DRY (kendinizi tekrar etmeyin) uygulamalarına bağlı kalarak işleri basit tutma sözünü tutar. Bu sözün yerine getirilmesine yardımcı olmak amacıyla Ruby, mühendislerin projelerine ortak bağımlılıklar katmaları için Gems'i kullanıyor.

Versiyon 7'nin Öne Çıkan Noktaları

2021'in sonlarında Rails'in yedinci büyük sürümü bazı heyecan verici özellikleri tanıttı:

Eşzamansız sorgulama – sorguları seri olarak çalıştırmaktan kurtulmak
Şifreli veritabanı katmanı – hizmet ve kalıcılık katmanları arasındaki verilerin güvenliğinin sağlanması
Karşılaştırma doğrulayıcı - kalıcılıktan önce nesne doğrulamaya izin verir
Haritaları içe aktarın – artık JavaScript kitaplıkları için Node.js ve Webpack'e gerek yok

Bu son özellik beni bu makaleyi yazmaya iten şey oldu.

Haritaları İçe Aktarma Nasıl Çalışır?

Yüksek düzeyde, importmaps-rails Gem, geliştiricilerin haritaları uygulamalarına aktarmalarına olanak tanır. /bin/importmap kullanımı, mühendislerin bağımlılıkları gerektiği gibi güncellemesine, sabitlemesine veya sabitlemesini kaldırmasına olanak tanır. Bu, Maven ve Gradle'ın Java tabanlı projelerdeki çalışma şekline benzer.

Bu, paketlerin paketlenmesi ve ES6 ile Babel'in aktarılmasıyla ilgili karmaşıklıklarla uğraşma ihtiyacını ortadan kaldırır. Elveda Webpack! Elveda Node.js!

Hadi bir şeyler inşa edelim

Neredeyse yirmi yıldır Ruby on Rails'e dokunmadığım için yapmam gereken ilk şey, MacBook Pro'ma Ruby 3.3 yüklemek için bu kılavuzu takip etmekti. Kurulduktan sonra IntelliJ IDEA IDE'min bir parçası olarak Ruby eklentisini kurmam gerekiyordu.

Daha sonra IntelliJ'de import-map adında yeni bir Ruby on Rails projesi oluşturdum ve JavaScript çerçevesi için Importmap kullanımını belirttim:

Oluşturulan projeyle öncelikle yerel bir JavaScript kütüphanesinin kullanımının ne kadar kolay olacağını görmek istedim. Böylece, aşağıdaki içeriğe sahip /public/jvc_utilities.js adında yeni bir JavaScript dosyası oluşturdum:

 export default function() { console.log('*****************'); console.log('* jvc-utilities *'); console.log('* version 0.0.1 *'); console.log('*****************'); }

Varsayılan işlev, bazı komutları JavaScript konsoluna yansıtır.

Daha sonra aşağıdaki içeriğe sahip bir HTML dosyası ( /public/jvc-utilities.html ) oluşturdum:

 <!DOCTYPE html> <html> <head> <title>jvc-utilities</title> </head> <script type="importmap"> { "imports": { "jvc_utilities": "./jvc_utilities.js"} } </script> <script type="module"> import JvcUtilities from "jvc_utilities"; JvcUtilities(); </script> <h3>jvc-utilities.html</h3> <p>Open the console to see the output of the <code>JvcUtilities()</code> function. </p> </html>

Bu örnek, herhangi bir ek çalışma gerektirmeden, yerel bir JavaScript dosyasının genel bir HTML dosyasıyla nasıl kullanılabileceğini gösterir.

Daha sonra Example adında yeni bir denetleyici oluşturdum:

 bin/rails generate controller Example index

Bu örnek için Lodash kütüphanesini kullanmak istedim, bu yüzden kütüphaneyi import-map projeme eklemek için aşağıdaki komutu kullandım:

 bin/importmap pin lodash

Denetleyiciye bazı JavaScript tabanlı işlevler eklemek için javascript/controllers/example_controller.js şu şekilde görünecek şekilde güncelledim:

 import { Controller } from "@hotwired/stimulus" import _ from "lodash" export default class extends Controller { connect() { const array = [1, 2, 3] const doubled = _.map(array, n => n * 2) console.log('array', array) // Output: [1, 2, 3] console.log('doubled', doubled) // Output: [2, 4, 6] this.element.textContent = `array=${array} doubled=${doubled.join(', ')}` } }

Bu mantık üç değerden oluşan bir dizi oluşturur ve ardından değerleri iki katına çıkarır. Bunu yapmak için Lodash map() yöntemini kullanıyorum.

Son olarak, views/example/index.html.erb aşağıdakileri içerecek şekilde güncelledim:

 <h3>Example Controller</h3> <div data-controller="example"></div>

Bu noktada, aşağıdaki URI'ler artık kullanılabilir:

/jvc-utilities.html
/example/index

Haydi Dağıtalım ve Doğrulayalım

Rails hizmetini yerel olarak çalıştırmak yerine Heroku'yu kullanmayı düşündüm. Bu şekilde hizmetimin diğer tüketicilerin de erişebileceğinden emin olabilirim.

Heroku hesabımı kullanarak “ Heroku'ya Ruby ile Başlarken ” kılavuzunu takip ettim. Projeme dayanarak ilk adımım aşağıdaki içeriğe sahip Procfile adında bir dosya eklemek oldu:

 web: bundle exec puma -C config/puma.rb

Daha sonra Heroku'da yeni bir uygulama oluşturmak için Heroku CLI'yi kullandım:

 heroku login heroku create

create komutuyla aşağıdaki uygulamayı çalıştırdım:

 Creating app... done, ⬢ lit-basin-84681 https://lit-basin-84681-3f5a7507b174.herokuapp.com/ | https://git.heroku.com/lit-basin-84681.git

Bu adım aynı zamanda Heroku ekosisteminin kullandığı Git uzaktan kumandasını da yarattı.

Artık tek yapmam gereken en son güncellemelerimi Heroku'ya göndermek ve uygulamayı dağıtmaktı:

 git push heroku main

Bununla birlikte kodum Heroku'ya iletildi ve o da uygulamamı derleyip dağıttı. Bir dakikadan kısa bir süre içinde uygulamamın kullanıma hazır olduğunu bildiren aşağıdakileri gördüm:

 remote: Verifying deploy... done. To https://git.heroku.com/lit-basin-84681.git fe0b7ad..1a21bdd main -> main

Daha sonra, Heroku URL'mi kullanarak /example/index sayfasına gittim (ki bu benim uygulamama özgüdür, ancak o zamandan beri onu kaldırdım): https://lit-basin-84681-3f5a7507b174.herokuapp.com/example/index

Gördüğüm şey şu:

Tarayıcımda JavaScript konsolunu görüntülediğimde aşağıdaki günlükler belirdi:

/jvc-utilities.html adresine gittiğimde aşağıdaki bilgileri gördüm:

Tarayıcımda JavaScript konsolunu görüntülediğimde aşağıdaki günlükleri gördüm:

Başarı. Rails 7 uygulamamda kendi kendine yeten bir JavaScript kitaplığını ve ayrıca halka açık Lodash JavaScript kitaplığını kullanabildim; bunların tümünü İçe Aktarma Haritalarını kullanarak ve Webpack veya Node.js ile uğraşmaya gerek kalmadan yapabildim. Güle güle, Webpack ve Node.js!

Çözüm

Okuyucularım, her BT profesyoneline uygulanabileceğini düşündüğüm kişisel misyon beyanımı hatırlayabilirler:

“Zamanınızı fikri mülkiyetinizin değerini artıran özellikler/işlevsellik sunmaya odaklayın. Diğer her şey için çerçevelerden, ürünlerden ve hizmetlerden yararlanın.” — J. Vester

Bu makalede, öncelikle Rails 7'ye daldım ve Webpack ve Node.js kullanmak zorunda kalmadan JavaScript kitaplıklarını ne kadar kolay kullanabileceğinizi göstermek için Haritaları İçe Aktar'ı kullandım. Rails'i en son çalışırken gördüğümden bu yana yirmi yıldan fazla zaman geçmesine rağmen hedeflerime ulaşmak için gereken zamanın az olmasından oldukça etkilendim.

Dağıtım açısından bakıldığında, Rails uygulamasını Heroku platformuna yerleştirme çabası bir Procfile ve üç CLI komutunun oluşturulmasından oluşuyordu.

Her iki durumda da Rails ve Heroku, müşterilerime değer sunmaya odaklanmış kalmamı ve Webpack, Node.js ve hatta DevOps görevleriyle ilgili zorluklarla boğulmamamı sağlayarak misyon beyanıma uyuyorlar.

Yeni teknolojileri keşfederken pek de ideal olmayan sorunlarla karşılaşmaya devam edeceğimizden eminim, ancak zamanla bu makalede gösterdiğim gibi benzer başarılar göreceğimizden de eminim.

Her zaman olduğu gibi kaynak kodumu GitLab'da burada bulabilirsiniz.

Gerçekten harika bir gün geçirin!