O introducere în Stimulus.js

Web-ul se mișcă destul de repede, iar alegerea unei abordări pentru front-end care să se simtă sensibilă peste un an este dificilă. Cea mai mare teamă a mea ca dezvoltator este să ridic un proiect care nu a fost atins de ceva timp, iar găsirea documentației pentru orice abordare pe care au folosit-o este fie inexistentă, fie nu este ușor de găsit online.

Acum aproximativ un an, am început să folosesc Stimulus și m-am simțit foarte fericit de codul pe care îl expediam. Este o bibliotecă de ~30 kb care încurajează mici stropi reutilizabile de JavaScript în aplicația dvs., organizată astfel încât să lase mici indicii în HTML-ul dvs. accesibil despre unde să găsiți JavaScript-ul la care este conectat. Face ca înțelegerea modului în care o bucată de JavaScript va interacționa cu pagina ta este aproape ca și cum ar citi un pseudocod.

Stimulus a fost creat de echipa de la Basecamp — au lansat recent serviciul de e-mail HEY — pentru a ajuta la menținerea JavaScript-ului pe care îl scriu pentru aplicațiile lor web. Din punct de vedere istoric, Basecamp a fost destul de bun în menținerea proiectelor open-source, așa că sunt destul de încrezător că Stimulus a fost testat temeinic și va fi menținut în următorii câțiva ani.

Stimulus mi-a permis să construiesc aplicații într-un mod care să pară reutilizabil și accesibil. Deși nu cred că Stimulus va prelua web-ul ca React și Vue, cred că este un instrument util de învățat.

Terminologie

Ca toate cadrele, Stimulus are termeni preferați pentru a descrie anumite lucruri. Din fericire (și unul dintre principalele motive pentru care mi-a plăcut Stimulus), există doar două despre care va trebui să știți:

• Controlor
  Aceasta se referă la cazuri de clase JavaScript care sunt elementele de bază ale aplicației dvs. Este sigur să spunem că atunci când vorbim despre Stimulus Controllers, vorbim despre clase JavaScript.
• Identificator
  Acesta este numele pe care îl vom folosi pentru a face referire la controlerul nostru în HTML, folosind un atribut de date care este comun bazelor de coduri Stimulus.
  

Să intrăm în stimulare!

În următoarele câteva exemple, voi folosi codul pe care îl puteți introduce în browser pentru a începe imediat prin biblioteca distribuită prin unpkg.com. Mai târziu, voi aborda abordarea pachetului web, care este foarte încurajată, deoarece permite o organizare îmbunătățită a codului dvs. și este abordarea utilizată în Manualul Stimulus.

Boilerplate

Odată ce înțelegeți esenta fragmentului de mai sus, veți avea cunoștințele necesare pentru a vă simți confortabil să ridicați un proiect care utilizează Stimulus.

Destul de grozav, nu? Să sărim în ceea ce face totul!

application.start

Această linie îi spune lui Stimulus să adauge ascultătorii pe pagină. Dacă îl apelați o singură dată în partea de sus a paginii înainte de a adăuga orice cod Stimulus, acesta va returna o instanță a controlerului principal Stimulus, care include register metodei care este folosit pentru a spune Stimulus despre clasele pe care doriți să le conectați. la ea.

Controlori

Atributul data-controller conectează elementul nostru HTML la o instanță a clasei noastre JavaScript. În acest caz, am folosit identificatorul „counter” pentru a conecta o instanță a clasei JavaScript CounterController la elementul nostru div . Am spus Stimulus despre conexiunea dintre acest identificator și controler prin metoda application.register .

Stimulus vă va monitoriza în mod continuu pagina pentru când elementele cu acest atribut sunt adăugate și eliminate. Când o nouă bucată de HTML este adăugată în pagină cu un atribut data-controller , va inițializa o nouă instanță a clasei de controler relevantă, apoi va conecta elementul HTML. Dacă eliminați acel element din pagină, va apela metoda de disconnect din clasa controlerului.

Acțiuni

Stimulus folosește un atribut data-action pentru a defini clar ce funcție a controlerului va fi rulată. Folosind sintaxa event->controller#function oricine citește HTML-ul va putea vedea ce face. Acest lucru este deosebit de util, deoarece reduce riscul de apariție a codului neașteptat din alte fișiere, facilitând navigarea în baza de cod. Când am văzut pentru prima dată abordarea pe care o încurajează Stimulus, mi s-a părut aproape ca și cum am citit pseudocod.

În exemplul de mai sus, când butonul declanșează evenimentul „clic”, acesta va fi transmis funcției addOne din controlerul nostru „contor”.

Ținte

Țintele sunt o modalitate de a defini în mod explicit ce elemente vor fi disponibile controlorului dumneavoastră. Din punct de vedere istoric, am folosit o combinație de ID, nume de clasă CSS și atribute de date pentru a realiza acest lucru, așa că având un singur „Acesta este modul de a face”, care este atât de explicit face codul mult mai consistent.

Acest lucru necesită definirea numelor țintă în cadrul clasei de controler prin intermediul funcției targets și adăugarea numelui unui element prin data-target .

Odată ce ai configurat aceste două piese, elementul tău va fi disponibil în controlerul tău. În acest caz, am setat ținta cu numele „ieșire” și poate fi accesată de this.outputTarget în cadrul funcțiilor din controlerul nostru.

Ținte duplicate

Dacă aveți mai multe ținte cu același nume, le puteți accesa folosind versiunea la plural a metodei țintă, în acest caz, când apelez this.outputTargets , va returna o matrice care conține ambele div-uri mele cu atributul data-target="hello.output" .

Tipuri de evenimente

Ascultați oricare dintre evenimentele pe care le-ați putea atașa de obicei prin metoda JavaScript addEventListener. Deci, de exemplu, puteți asculta când se face clic pe un buton, se trimite un formular sau se modifică o intrare.

Pentru a asculta evenimentele din window sau document (cum ar fi redimensionarea sau utilizatorul se deconecta), va trebui să adăugați „@window” sau „@document” la tipul de event (de exemplu resize@window->console#logEvent va apela funcția logEvent ) de pe controlerul console când fereastra este redimensionată.

Există o modalitate scurtă de a atașa evenimente comune, în care puteți omite tipul de eveniment și are o acțiune implicită pentru tipul de element. Cu toate acestea, descurajez cu tărie folosirea scurtăturii evenimentului, deoarece crește cantitatea de presupuneri pe care cineva care este mai puțin familiarizat cu Stimulus trebuie să le facă despre codul dvs.

Folosește mai multe controlere în același element

Destul de des, poate doriți să împărțiți două bucăți de logică în clase separate, dar să le faceți să apară aproape una de alta în HTML. Stimulus vă permite să conectați elemente la mai multe clase, plasând referințe la ambele în HTML.

În exemplul de mai sus, am configurat un obiect basket care se preocupă doar de numărarea numărului total de articole din coș, dar am adăugat și un obiect child care arată cantitatea de saci per articol.

Transmiterea datelor către obiectul dvs

Stimulus oferă metodele this.data.get și this.data.set în cadrul clasei de controler, acest lucru vă va permite să schimbați atributele de date care se află în același spațiu de nume ca și identificatorul. Prin aceasta vreau să spun, dacă doriți să transmiteți date controlerului dvs. de stimul din HTML, trebuie doar să adăugați un atribut precum data-[identifier]-a-variable la elementul dvs. HTML.

Când apelați this.data.set , va actualiza valoarea din HTML, astfel încât să puteți vedea modificarea valorii atunci când inspectați elementul folosind instrumentele de dezvoltare ale browserului.

Utilizarea atributelor de date cu spații de nume este o modalitate foarte bună de a ajuta la clarificarea atributului de date pentru ce bucată de cod.

Inițializați, conectați, deconectați

Pe măsură ce aplicația dvs. crește, probabil că va trebui să vă conectați la „evenimentele ciclului de viață” pentru a seta valori implicite, a prelua date sau a gestiona comunicarea în timp real. Stimulus are trei metode integrate care sunt numite pe parcursul ciclului de viață al unei clase de Stimulus.

Când Stimulus vede un element cu un atribut data-controller care se potrivește, va crea o nouă versiune a controlerului și va apela funcția de initialize . Acesta va rula adesea când încărcați pagina pentru prima dată, dar va fi rulat și dacă ar fi să adăugați un nou HTML la pagina dvs. (de exemplu, prin AJAX) care conține o referință la controlerul dumneavoastră. Nu va rula atunci când mutați un element într-o nouă poziție în DOM.

După ce o clasă a fost inițializată, Stimulus o va conecta la elementul HTML și va apela funcția de connect . De asemenea, va apela connect dacă ar fi să mutați un element în DOM. Deci, dacă ar fi să luați un element, să-l eliminați dintr-un element, apoi să îl adăugați în altă parte, veți observa că va fi apelat doar connect .

Funcția de disconnect va fi rulată atunci când eliminați un element din pagina dvs., așa că, de exemplu, dacă ar trebui să înlocuiți corpul HTML-ului, puteți demola orice cod care ar putea fi necesar să fie reluat dacă elementul nu se află în aceeasi pozitie. De exemplu, dacă ați avut un editor WYSIWYG de lux care adaugă o mulțime de HTML suplimentar unui element, l-ați putea reveni la starea inițială când a fost apelată disconnect .

Moștenirea funcționalității

Ocazional, poate doriți să împărtășiți o mică funcționalitate comună între controlerele dvs. Stimulus. Lucrul tare despre Stimulus este că (sub capotă) conectați clase JavaScript oarecum vanilate la elemente HTML, așa că funcționalitatea de partajare ar trebui să vă fie familiară.

În acest exemplu, am configurat o clasă părinte numită ParentController , care este apoi extinsă de o clasă copil numită ChildController . Acest lucru mi-a permis să moștenesc metode de la ParentController , astfel încât să nu trebuiască să dublez codul în ChildController .

Folosind-o în producție

Am demonstrat mai sus câteva exemple de sine stătătoare despre cum să utilizați Stimulus, care ar trebui să vă ofere o idee despre ceea ce puteți realiza. De asemenea, m-am gândit că ar trebui să abordez cum îl folosesc în producție și cum a funcționat pentru mine.

Webpack

Dacă utilizați Webpack, vă bucurați de un răsfăț! Stimulus a fost creat pentru a fi folosit cu Webpack. Documentația lor are chiar și un kit de pornire minunat pentru Webpack. Vă va permite să vă împărțiți controlerele în fișiere separate, iar Stimulus va decide numele corect de utilizat ca identificator.

Nu trebuie să utilizați webpack dacă doriți să utilizați Stimulus, dar curăță experiența o grămadă. Personal, Stimulus a fost biblioteca care m-a ajutat să fac cunoștință cu Webpack și să simt cu adevărat valoarea pe care o oferă.

Convenții de nume de fișiere

Am menționat în introducerea acestui articol că mi-a plăcut să folosesc Stimulus pentru că mi s-a părut organizat. Acest lucru devine evident atunci când îl combinați cu Webpack, care permite încărcarea automată și înregistrarea controlerelor.

Odată ce ați configurat Stimulus în Webpack, vă va încuraja să vă denumiți fișierele ca [identifier]_controller.js , unde identificatorul este ceea ce veți transfera în atributul HTMLs data-controller .

Pe măsură ce proiectul dvs. crește, este posibil să doriți să mutați controlerele Stimulus în subfoldere. Într-un mod magic, Stimulus va converti liniuțele de subliniere în liniuțe, iar barele oblice în două liniuțe, care vor deveni apoi identificatorul tău. Deci, de exemplu, numele de fișier chat/conversation_item_controller.js va avea identificatorul chat--conversation-item .

Menținerea mai puțin JavaScript

Unul dintre citatele mele preferate este „The Best Code is No Code At All”, încerc să aplic această abordare tuturor proiectelor mele.

Browserele web evoluează foarte mult, sunt destul de convins că majoritatea lucrurilor pentru care am nevoie pentru a scrie JavaScript pentru astăzi vor deveni standardizate și integrate în browser în următorii 5 ani. Un bun exemplu în acest sens este elementul de detalii, când am început dezvoltarea, era foarte obișnuit să trebuiască să codificați manual acea funcționalitate folosind jQuery.

Drept urmare, dacă pot scrie HTML accesibil cu o stropire de JavaScript pentru a-mi îndeplini nevoile, cu mentalitatea „Asta face treaba astăzi, dar în 5 ani vreau să îl înlocuiesc cu ușurință”, voi fi fericit. dezvoltator. Acest lucru este mult mai realizabil atunci când ați scris mai puțin cod, pentru care se pretează Stimulus.

Mai întâi HTML, apoi JavaScript

Un aspect care îmi place foarte mult la abordarea pe care o încurajează Stimulus este că mă pot concentra pe trimiterea de cod HTML către utilizatorii mei, care este apoi un pic mai învățat cu JavaScript.

Întotdeauna am fost un fan al utilizării primelor milisecunde din atenția unui utilizator pentru a obține ceea ce am de împărtășit cu ei - în fața lor. Apoi vă faceți griji să configurați stratul de interacțiune în timp ce utilizatorul poate începe să proceseze ceea ce văd.

În plus, dacă JavaScript ar eșua din orice motiv, utilizatorul poate vedea conținutul și poate interacționa cu acesta fără JavaScript. De exemplu, în loc să fie trimis un formular prin AJAX, acesta va fi trimis printr-o cerere de formular tradițională care reîncarcă pagina.

Concluzie

Îmi place să construiesc site-uri care au nevoie doar de mici stropi de JavaScript care poate fi întreținut pentru a îmbunătăți experiența utilizatorului, uneori este plăcut să construiesc ceva care să pară mai simplu. A avea ceva ușor este grozav, îmi place foarte mult că, fără prea multă încărcare cognitivă, este destul de clar cum să-ți organizezi fișierele și să configurezi mici pesmeturi care sugerează cum va rula JavaScript cu o bucată de HTML.

Mi-a plăcut foarte mult să lucrez cu Stimulus. Nu este prea mult, așa că curba de învățare este destul de blândă. Sunt destul de încrezător că, dacă aș transmite codul meu altcuiva, aceștia vor fi dezvoltatori fericiți. Recomand cu căldură să-l încerci, chiar dacă este doar din pură curiozitate.

Elefantul din cameră este cum se comportă în comparație cu React și Vue, dar în opinia mea, sunt instrumente diferite pentru o cerință diferită. În cazul meu, redau adesea HTML de pe serverul meu și adaug puțin JavaScript pentru a îmbunătăți experiența. Dacă aș face ceva mai complex, aș lua în considerare o abordare diferită (sau aș respinge cerințele pentru a ajuta la menținerea codului meu simplu).

Lectură suplimentară

• Pagina de pornire Stimulus
  Au un manual fantastic care intră în conceptele pe care le-am subliniat mai sus într-o profunzime mult mai mare.
• Depozitul GitHub de stimulare
  Am învățat atât de multe despre cum funcționează Stimulus explorând codul lor.
• Cheatsheet de stimulare
  Manualul rezumat pe o singură pagină.
• Forumul de stimulare
  Văzând alți oameni lucrând cu Stimulus m-a făcut să simt că este folosit în sălbăticie.