Stimulus.js'ye Giriş

Web oldukça hızlı hareket ediyor ve ön yüzünüz için bir yıl içinde mantıklı hissettirecek bir yaklaşım seçmek zor. Bir geliştirici olarak en büyük korkum, bir süredir dokunulmamış bir projeyi seçmek ve kullandıkları yaklaşım ne olursa olsun belgeleri bulmak ya yok ya da çevrimiçi olarak kolayca bulunamıyor.

Yaklaşık bir yıl önce Stimulus'u kullanmaya başladım ve gönderdiğim koddan gerçekten çok mutlu oldum. Uygulamanızda JavaScript'in yeniden kullanılabilir küçük parçacıklarını teşvik eden ve bağlı olduğu JavaScript'i nerede bulacağınız konusunda erişilebilir HTML'nizde küçük ipuçları bırakacak şekilde düzenlenmiş ~ 30 kb'lik bir kitaplıktır . Bir JavaScript parçasının sayfanızla nasıl etkileşime gireceğini anlamayı neredeyse sözde kod okumak gibi sağlar.

Stimulus, web uygulamaları için yazdıkları JavaScript'in korunmasına yardımcı olmak için Basecamp ekibi tarafından oluşturuldu - kısa süre önce HEY e-posta hizmetini yayınladılar. Tarihsel olarak, Basecamp açık kaynak projelerini sürdürme konusunda oldukça iyiydi, bu yüzden Stimulus'un kapsamlı bir şekilde test edildiğinden ve önümüzdeki birkaç yıl boyunca sürdürüleceğinden oldukça eminim.

Stimulus, uygulamaları yeniden kullanılabilir ve ulaşılabilir hissettirecek şekilde oluşturmamı sağladı. Stimulus'un React ve Vue gibi web'i ele geçireceğini düşünmesem de, öğrenmeye değer bir araç olduğunu düşünüyorum.

terminoloji

Tüm çerçeveler gibi, Stimulus da belirli şeyleri tanımlamak için terimleri tercih etti. Neyse ki (ve Stimulus'u sevmemin başlıca nedenlerinden biri), bilmeniz gereken sadece iki şey var:

• kontrolör
  Bu, uygulamanızın yapı taşları olan JavaScript sınıflarının örneklerini ifade eder. Stimulus Denetleyicileri hakkında konuştuğumuzda JavaScript sınıflarından bahsettiğimizi söylemek güvenlidir.
• tanımlayıcı
  Bu, Stimulus kod tabanlarında ortak olan bir veri özniteliği kullanarak HTML'mizde denetleyicimize başvurmak için kullanacağımız addır.
  

Hadi Uyarıcıya Geçelim!

Aşağıdaki birkaç örnekte, unpkg.com aracılığıyla dağıtılan kitaplık aracılığıyla hemen başlamak için tarayıcıya bırakabileceğiniz kodu kullanacağım. Daha sonra, kodunuzun daha iyi düzenlenmesine izin verdiği için oldukça teşvik edilen ve Uyaran El Kitabında kullanılan yaklaşım olan web paketi yaklaşımını ele alacağım.

Kazan plakası

Yukarıdaki snippet'in özünü anladıktan sonra, Stimulus kullanan bir projeyi rahatça seçebilecek bilgi birikimine sahip olacaksınız.

Oldukça harika, değil mi? Hadi her şeyin ne yaptığına geçelim!

application.start

Bu satır, Stimulus'a dinleyicileri sayfaya eklemesini söyler. Herhangi bir Stimulus kodu eklemeden önce sayfanızın en üstünde bir kez çağırırsanız, Stimulus'a bağlanmak istediğiniz sınıfları anlatmak için kullanılan yöntem register içeren ana Stimulus denetleyicisinin bir örneğini döndürür. ona.

Kontrolörler

data-controller niteliği, HTML öğemizi JavaScript sınıfımızın bir örneğine bağlar. Bu durumda, CounterController JavaScript sınıfının bir örneğini div öğemize bağlamak için "counter" tanımlayıcısını kullandık. Stimulus'a bu tanımlayıcı ile denetleyici arasındaki bağlantıyı application.register yöntemiyle anlattık.

Stimulus, bu özniteliğe sahip öğeler eklendiğinde ve kaldırıldığında sayfanızı sürekli olarak izleyecektir. Sayfaya data-controller özniteliği ile yeni bir HTML parçası eklendiğinde, ilgili controller sınıfının yeni bir örneğini başlatacak ve ardından HTML öğesini bağlayacaktır. Bu öğeyi sayfadan kaldırırsanız, denetleyici sınıfındaki disconnect yöntemini çağırır.

Hareketler

Stimulus, denetleyicinin hangi işlevinin çalıştırılacağını açıkça tanımlamak için bir veri özniteliği data-action kullanır. Sözdizimi event->controller#function kullanarak HTML'yi okuyan herkes ne yaptığını görebilir. Bu, diğer dosyalardan beklenmeyen kod riskini azalttığı ve kod tabanında gezinmeyi kolaylaştırdığı için özellikle yararlıdır. Stimulus'un teşvik ettiği yaklaşımı ilk gördüğümde, neredeyse sözde kod okumak gibi hissettim.

Yukarıdaki örnekte, düğme "tıklama" olayını tetiklediğinde, "sayaç" denetleyicimizdeki addOne işlevine iletilecektir.

Hedefler

Hedefler, denetleyiciniz için hangi öğelerin kullanılabileceğini açıkça tanımlamanın bir yoludur. Geçmişte bunu başarmak için bir kimlik, CSS sınıf adları ve veri özniteliklerinin bir karışımını kullandım, bu nedenle çok açık olan tek bir “Bunu yapmanın yolu bu” olması kodu çok daha tutarlı hale getirir.

Bu, controller sınıfınız içinde hedef adınızın targets işlevi aracılığıyla tanımlanmasını ve adın data-target aracılığıyla bir öğeye eklenmesini gerektirir.

Bu iki parça kurulumunu yaptıktan sonra, öğeniz kontrol cihazınızda mevcut olacaktır. Bu durumda, hedefi “output” adıyla kurdum ve buna controller'ımızdaki fonksiyonlar içerisinden this.outputTarget ile erişilebilir.

Yinelenen Hedefler

Aynı ada sahip birden fazla hedefiniz varsa, onlara hedef yöntemin çoğul sürümünü kullanarak erişebilirsiniz, bu durumda this.outputTargets , her iki div'imi de data-target="hello.output" özniteliği ile içeren bir dizi döndürür data-target="hello.output" .

Etkinlik Türleri

JavaScript yöntemi addEventListener aracılığıyla genellikle ekleyebileceğiniz olaylardan herhangi birini dinlersiniz. Örneğin, bir düğmeye tıklandığında, bir form gönderildiğinde veya bir giriş değiştirildiğinde dinleyebilirsiniz.

window veya document olaylarını (yeniden boyutlandırma veya kullanıcının çevrimdışı olması gibi) dinlemek için event türüne “@window” veya “@document” eklemeniz gerekir (örn. resize@window->console#logEvent arayacaktır). pencere yeniden boyutlandırıldığında console denetleyicisindeki logEvent ) işlevi.

Olay türünü atlayabileceğiniz ortak olayları eklemenin kısa bir yolu vardır ve bu, öğe türü için varsayılan bir eyleme sahiptir. Bununla birlikte, Stimulus'a daha az aşina olan birinin kodunuz hakkında yapması gereken varsayımların miktarını artırdığından, olay stenografisini kullanmayı kesinlikle önermiyorum.

Aynı Öğede Birden Çok Denetleyici Kullanıyor

Oldukça sık olarak, iki mantık parçasını ayrı sınıflara ayırmak isteyebilirsiniz, ancak bunların HTML içinde birbirine yakın görünmesini sağlayın. Stimulus, HTML'nizde her ikisine de referanslar yerleştirerek öğeleri birden çok sınıfa bağlamanıza olanak tanır.

Yukarıdaki örnekte, yalnızca sepetteki toplam ürün sayısını saymakla ilgilenen bir basket nesnesi kurdum, ancak aynı zamanda ürün başına torba miktarını gösteren bir child nesne ekledim.

Nesnenize Veri Geçirme

Stimulus, denetleyici sınıfı içinde this.data.get ve this.data.set yöntemlerini sağlar; bu, tanımlayıcı ile aynı ad alanında bulunan veri özniteliklerini değiştirmenize olanak tanır. Bununla demek istediğim, HTML'nizden uyarıcı denetleyicinize veri iletmek istiyorsanız, HTML data-[identifier]-a-variable gibi bir öznitelik eklemeniz yeterlidir.

this.data.set , tarayıcı geliştirme araçlarınızı kullanarak öğeyi incelediğinizde değer değişimini görebilmeniz için HTML'nizdeki değeri güncelleyecektir.

Ad alanlı veri özniteliklerini kullanmak, hangi veri özniteliğinin hangi kod parçası için olduğunu gerçekten netleştirmeye yardımcı olmanın gerçekten güzel bir yoludur.

Başlat, Bağlandı, Bağlantısı Kesildi

Uygulamanız büyüdükçe, varsayılanları ayarlamak, veri almak veya gerçek zamanlı iletişimi yönetmek için muhtemelen 'yaşam döngüsü olaylarına' bağlanmanız gerekecektir. Stimulus, bir Stimulus sınıfının yaşam döngüsü boyunca çağrılan üç yerleşik yönteme sahiptir.

Stimulus, eşleşen bir data-controller özniteliğine sahip bir öğe gördüğünde, denetleyicinizin yeni bir sürümünü oluşturur ve initialize işlevini çağırır. Bu genellikle sayfayı ilk yüklediğinizde çalışır, ancak sayfanıza denetleyicinize bir referans içeren yeni HTML eklerseniz (örneğin AJAX aracılığıyla) da çalıştırılır. Bir öğeyi DOM'unuz içinde yeni bir konuma taşıdığınızda çalışmayacaktır.

Bir sınıf başlatıldıktan sonra, Stimulus onu HTML öğesine bağlar ve connect işlevini çağırır. Ayrıca, DOM'unuz içinde bir öğeyi taşıyacak olsanız da connect çağırır. Bu nedenle, bir öğeyi alıp bir öğeden çıkaracaksanız, sonra başka bir yere eklerseniz, yalnızca connect çağrılacağını fark edeceksiniz.

Bağlantıyı disconnect işlevi, sayfanızdan bir öğeyi kaldırdığınızda çalışır, bu nedenle, örneğin, HTML'nizin gövdesini değiştirecekseniz, öğe listede değilse yeniden çalıştırılması gerekebilecek herhangi bir kodu yırtabilirsiniz. aynı pozisyon. Örneğin, bir öğeye çok fazla HTML ekleyen süslü bir WYSIWYG düzenleyiciniz varsa, disconnect onu orijinal durumuna geri döndürebilirsiniz.

İşlevselliği Devralma

Bazen, Stimulus denetleyicileriniz arasında biraz ortak işlevsellik paylaşmak isteyebilirsiniz. Stimulus'la ilgili harika olan şey, (başlığın altında) biraz vanilya JavaScript sınıflarını HTML öğelerine bağlamanızdır, bu nedenle paylaşım işlevselliği tanıdık gelmelidir.

Bu örnekte, daha sonra ChildController adlı bir alt sınıf tarafından genişletilen ParentController adında bir üst sınıf oluşturdum. Bu, yöntemleri ParentController devralmama izin verdi, böylece ChildController içinde kodu çoğaltmak zorunda kalmadım.

Üretimde Kullanmak

Yukarıda Stimulus'un nasıl kullanılacağına dair oldukça bağımsız bazı örnekler gösterdim, bu da size neleri başarabileceğinize dair bir fikir verecektir. Ayrıca üretimde nasıl kullandığıma ve benim için nasıl çalıştığına da değinmeliyim diye düşündüm.

Web paketi

Webpack kullanıyorsanız, bir tedavi içindesiniz! Uyarıcı tamamen Webpack ile kullanılmak üzere yapılmıştır. Belgelerinde Webpack için güzel bir başlangıç ​​seti bile var. Denetleyicilerinizi ayrı dosyalara ayırmanıza izin verecek ve Stimulus, tanımlayıcı olarak kullanılacak doğru ada karar verecektir.

Stimulus'u kullanmak istiyorsanız web paketini kullanmak zorunda değilsiniz, ancak bu deneyimi bir sürü temizler. Şahsen Stimulus, Webpack'i tanıtmama ve sunduğu değeri gerçekten hissetmeme yardımcı olan kitaplıktı.

Dosya Adı Kuralları

Bu makalenin girişinde, Stimulus'u düzenli hissettirdiği için kullanmaktan keyif aldığımdan bahsetmiştim. Bu, denetleyicilerin otomatik olarak yüklenmesini ve kaydedilmesini sağlayan Webpack ile birleştirdiğinizde gerçekten ortaya çıkıyor.

Webpack'te Stimulus'u kurduktan sonra, dosyalarınızı [identifier]_controller.js gibi adlandırmanızı teşvik edecektir; burada tanımlayıcı, HTMLs data-controller özniteliğinize geçireceğiniz şeydir.

Projeniz büyüdükçe, Stimulus denetleyicilerinizi alt klasörlere de taşımak isteyebilirsiniz. Sihirli bir şekilde Stimulus, alt çizgileri tirelere ve klasör eğik çizgilerini iki tireye dönüştürecek ve daha sonra tanımlayıcınız olacaktır. Örneğin, chat/conversation_item_controller.js dosya adı chat--conversation-item tanımlayıcısına sahip olacaktır.

Daha Az JavaScript Bakımı

En sevdiğim alıntılardan biri “En İyi Kod Hiç Kod Değildir”, bu yaklaşımı tüm projelerimde uygulamaya çalışıyorum.

Web tarayıcıları çok gelişiyor, bugün için JavaScript yazmak için ihtiyaç duyduğum şeylerin çoğunun önümüzdeki 5 yıl içinde standart hale getirileceği ve tarayıcıda hazırlanacağı konusunda oldukça ikna oldum. Buna iyi bir örnek ayrıntılar öğesidir, geliştirmeye ilk başladığımda bu işlevi jQuery kullanarak elle kodlamak zorunda kalmak çok yaygındı.

Bunun sonucunda, “Bugün bu işi yapıyor ama 5 yıl sonra bunu kolayca değiştirmek istiyorum” zihniyetiyle, ihtiyaçlarımı karşılamak için JavaScript serpme erişilebilir HTML yazabilirsem mutlu olacağım. geliştirici. Başlamak için daha az kod yazdığınızda, Stimulus'un kendisini ödünç aldığı bu, çok daha fazla elde edilebilir.

Önce HTML, Sonra JavaScript

Stimulus'un teşvik ettiği yaklaşımın gerçekten sevdiğim bir yönü, kullanıcılarıma kablo üzerinden HTML göndermeye odaklanabiliyor olmam ve bu da JavaScript ile biraz canlandırılıyor.

Her zaman, bir kullanıcının dikkatinin ilk birkaç milisaniyesini, onlarla paylaşmak zorunda olduğum şeyi önlerinde kullanmanın hayranı oldum. Ardından, kullanıcı gördüklerini işlemeye başlayabilirken etkileşim katmanını ayarlama endişesi.

Ayrıca, JavaScript herhangi bir nedenle başarısız olursa, kullanıcı yine de içeriği görebilir ve JavaScript olmadan onunla etkileşim kurabilir. Örneğin, AJAX aracılığıyla gönderilen bir form yerine, sayfayı yeniden yükleyen geleneksel bir form isteği aracılığıyla gönderilir.

Çözüm

Kullanıcı deneyimini geliştirmek için yalnızca küçük, bakımı yapılabilir JavaScript parçacıklarına ihtiyaç duyan siteler oluşturmayı seviyorum, bazen daha basit hissettiren bir şey oluşturmak güzeldir. Hafif bir şeye sahip olmak harika, çok fazla bilişsel yük olmadan dosyalarınızı nasıl düzenleyeceğinizi ve JavaScript'in bir HTML parçasıyla nasıl çalışacağına dair ipucu veren küçük kırıntıları nasıl ayarlayacağınızı gerçekten seviyorum.

Stimulus ile çalışmaktan gerçekten keyif aldım. Çok fazla bir şey yok, bu yüzden öğrenme eğrisi oldukça yumuşak. Kodumu başka birine iletirsem, onların mutlu geliştiriciler olacağından oldukça eminim. Tamamen meraktan olsa bile denemenizi şiddetle tavsiye ederim.

Odadaki fil, React ve Vue'ya kıyasla nasıl birikiyor, ama bence onlar farklı bir gereksinim için farklı araçlar. Benim durumumda, genellikle sunucumdan HTML oluşturuyorum ve deneyimi geliştirmek için biraz JavaScript ekliyorum. Daha karmaşık bir şey yapıyor olsaydım, farklı bir yaklaşım düşünürdüm (veya kodumu basit hissettirmek için gereksinimleri geri iterdim).

Daha fazla okuma

• Uyarıcı Ana Sayfası
  Yukarıda ana hatlarıyla belirttiğim kavramları çok daha derinlemesine ele alan harika bir el kitabına sahipler.
• Stimulus GitHub Deposu
  Kodlarını keşfederek Stimulus'un nasıl çalıştığı hakkında çok şey öğrendim.
• Uyarıcı Hile Sayfası
  El kitabı tek bir sayfada özetlenmiştir.
• Teşvik Forumu
  Stimulus'la çalışan diğer insanları görmek bana gerçekten onun vahşi doğada kullanıldığını hissettirdi.