Wprowadzenie do Stimulus.js

Sieć porusza się dość szybko, a wybór takiego podejścia do frontendu, który będzie rozsądny za rok, jest trudny. Moją największą obawą jako programisty jest wybranie projektu, który nie był dotykany przez jakiś czas, a znalezienie dokumentacji dla dowolnego podejścia, którego użyli, albo nie istnieje, albo nie jest łatwo znaleźć w Internecie.

Mniej więcej rok temu zacząłem używać Stimulus i byłem naprawdę zadowolony z kodu, który wysyłałem. Jest to biblioteka o wielkości ~30 KB, która zachęca do niewielkich, wielokrotnego użytku posypek JavaScript w Twojej aplikacji, zorganizowaną w taki sposób, że pozostawia niewiele wskazówek w dostępnym kodzie HTML, gdzie znaleźć kod JavaScript, z którym jest połączona. To sprawia, że ​​zrozumienie, w jaki sposób fragment kodu JavaScript będzie oddziaływać na twoją stronę, jest prawie jak czytanie pseudokodu.

Stimulus został stworzony przez zespół Basecamp — który niedawno udostępnił usługę poczty e-mail HEY — aby pomóc w utrzymaniu JavaScript, który piszą dla swoich aplikacji internetowych. W przeszłości Basecamp radził sobie całkiem nieźle z utrzymaniem swoich projektów open source, więc jestem przekonany, że Stimulus został dokładnie przetestowany i będzie utrzymywany przez kilka następnych lat.

Stimulus umożliwił mi tworzenie aplikacji w sposób, który wydaje się możliwy do ponownego użycia i przystępny. Chociaż nie sądzę, że Stimulus przejmie sieć, jak React i Vue, uważam, że warto się go nauczyć.

Terminologia

Podobnie jak wszystkie ramy, Stimulus preferuje terminy opisujące pewne rzeczy. Na szczęście (i jeden z głównych powodów, dla których polubiłem Stimulus), są tylko dwa, o których musisz wiedzieć:

• Kontroler
  Odnosi się to do instancji klas JavaScript, które są blokami konstrukcyjnymi Twojej aplikacji. Można śmiało powiedzieć, że kiedy mówimy o kontrolerach bodźców, mamy na myśli klasy JavaScript.
• Identyfikator
  Jest to nazwa, której będziemy używać do odwoływania się do naszego kontrolera w naszym kodzie HTML za pomocą atrybutu danych, który jest wspólny dla baz kodu Stimulus.
  

Przejdźmy do bodźca!

W kilku poniższych przykładach użyję kodu, który możesz wrzucić do przeglądarki, aby od razu zacząć korzystać z biblioteki dystrybuowanej za pośrednictwem unpkg.com. Później omówię podejście webpack, które jest bardzo zalecane, ponieważ pozwala na lepszą organizację kodu i jest podejściem zastosowanym w podręczniku Stimulus Handbook.

Płyta kotłowa

Gdy zrozumiesz sedno powyższego fragmentu, będziesz mieć wiedzę, aby swobodnie wybierać projekt wykorzystujący Stimulus.

Całkiem niesamowite, prawda? Przejdźmy do tego, co robi wszystko!

application.start

Ta linia mówi Stimulusowi, aby dodał słuchaczy do strony. Jeśli wywołasz go tylko raz na górze strony przed dodaniem jakiegokolwiek kodu Stimulus, zwróci on instancję głównego kontrolera Stimulus, która zawiera register metod używany do poinformowania Stimulus o klasach, z którymi chcesz się połączyć do niego.

Kontrolery

Atrybut data-controller łączy nasz element HTML z instancją naszej klasy JavaScript. W tym przypadku użyliśmy identyfikatora „counter”, aby podłączyć instancję klasy CounterController JavaScript do naszego elementu div . Poinformowaliśmy Stimulus o połączeniu między tym identyfikatorem a kontrolerem za pomocą metody application.register .

Stimulus będzie stale monitorować Twoją stronę pod kątem dodawania i usuwania elementów z tym atrybutem. Kiedy nowy fragment kodu HTML zostanie dodany do strony z atrybutem data-controller , zainicjuje on nową instancję odpowiedniej klasy kontrolera, a następnie połączy element HTML. Jeśli usuniesz ten element ze strony, wywoła on metodę disconnect w klasie kontrolera.

działania

Stimulus wykorzystuje data-action aby jasno określić, która funkcja kontrolera zostanie uruchomiona. Używając składni event->controller#function każdy, kto czyta HTML, będzie mógł zobaczyć, co robi. Jest to szczególnie przydatne, ponieważ zmniejsza ryzyko nieoczekiwanego kodu z innych plików, ułatwiając nawigację po bazie kodu. Kiedy po raz pierwszy zobaczyłem podejście, które zachęca Stimulus, poczułem się prawie jak czytanie pseudokodu.

W powyższym przykładzie, gdy przycisk wywoła zdarzenie „klik”, zostanie ono przekazane do funkcji addOne w naszym kontrolerze „licznik”.

Cele

Cele to sposób na jawne zdefiniowanie, które elementy będą dostępne dla twojego kontrolera. Historycznie używałem kombinacji identyfikatorów, nazw klas CSS i atrybutów danych, aby to osiągnąć, więc posiadanie jednego „Tak to zrobić”, które jest tak wyraźne, sprawia, że ​​kod jest o wiele bardziej spójny.

Wymaga to zdefiniowania nazw targets w klasie kontrolera za pomocą funkcji Targets i dodania nazwy do elementu za pomocą data-target .

Po skonfigurowaniu tych dwóch elementów Twój element będzie dostępny w kontrolerze. W tym przypadku ustawiłem cel o nazwie „wyjście” i można do niego uzyskać dostęp poprzez this.outputTarget w funkcjach naszego kontrolera.

Zduplikowane cele

Jeśli masz wiele celów o tej samej nazwie, możesz uzyskać do nich dostęp, używając liczby mnogiej wersji metody celu, w tym przypadku, gdy this.outputTargets , zwróci tablicę zawierającą oba moje div z atrybutem data-target="hello.output" .

Rodzaje wydarzeń

Nasłuchujesz wszelkich zdarzeń, które zwykle możesz dołączyć za pomocą metody JavaScript addEventListener. Na przykład możesz nasłuchiwać, kiedy kliknięto przycisk, przesłano formularz lub zmieniono dane wejściowe.

Aby nasłuchiwać zdarzeń window lub document (takich jak zmiana rozmiaru lub przejście użytkownika w tryb offline), musisz dołączyć „@window” lub „@document” do typu event (np. resize@window->console#logEvent wywoła funkcja logEvent ) na kontrolerze console , gdy rozmiar okna zostanie zmieniony.

Istnieje skrócony sposób dołączania typowych zdarzeń, gdzie można pominąć typ zdarzenia i ma domyślną akcję dla typu elementu. Zdecydowanie odradzam jednak używanie skrótów dotyczących zdarzeń, ponieważ zwiększa to liczbę założeń, które osoba mniej zaznajomiona z programem Stimulus musi poczynić w odniesieniu do Twojego kodu.

Używa wielu kontrolerów w tym samym elemencie

Dość często możesz chcieć podzielić dwa elementy logiki na oddzielne klasy, ale sprawić, by pojawiły się blisko siebie w kodzie HTML. Stimulus umożliwia łączenie elementów z wieloma klasami poprzez umieszczanie odwołań do obu w kodzie HTML.

W powyższym przykładzie utworzyłem obiekt basket , który zajmuje się tylko zliczaniem całkowitej liczby przedmiotów w koszyku, ale dodałem również obiekt child , który pokazuje ilość toreb na przedmiot.

Przekazywanie danych do obiektu

Stimulus udostępnia metody this.data.get i this.data.set w klasie kontrolera, co pozwoli ci zmienić atrybuty danych, które znajdują się w tej samej przestrzeni nazw co identyfikator. Rozumiem przez to, że jeśli chcesz przekazać dane do kontrolera bodźców z kodu HTML, po prostu dodaj atrybut taki jak data-[identifier]-a-variable do elementu HTML.

Wywołanie this.data.set spowoduje zaktualizowanie wartości w kodzie HTML, dzięki czemu można zobaczyć zmianę wartości podczas sprawdzania elementu za pomocą narzędzi programistycznych przeglądarki.

Używanie atrybutów danych z przestrzenią nazw jest naprawdę dobrym sposobem na wyjaśnienie, który atrybut danych jest dla którego fragmentu kodu.

Inicjalizacja, połączenie, rozłączenie

W miarę rozwoju aplikacji prawdopodobnie będziesz musiał podłączyć się do „zdarzeń cyklu życia”, aby ustawić wartości domyślne, pobrać dane lub obsłużyć komunikację w czasie rzeczywistym. Stimulus ma trzy wbudowane metody, które są wywoływane przez cały cykl życia klasy Stimulus.

Gdy Stimulus zobaczy element z pasującym atrybutem data-controller , utworzy nową wersję kontrolera i wywoła funkcję initialize . Będzie to często uruchamiane podczas pierwszego ładowania strony, ale zostanie również uruchomione, jeśli dodasz nowy kod HTML do swojej strony (np. przez AJAX) zawierający odwołanie do kontrolera. Nie uruchomi się, gdy przeniesiesz element do nowej pozycji w DOM.

Po zainicjowaniu klasy Stimulus połączy ją z elementem HTML i wywoła funkcję connect . Wywoła również connect , jeśli przeniesiesz element w swoim DOM. Więc jeśli weźmiesz element, usuniesz go z jednego, a następnie dołączysz w innym miejscu, zauważysz, że zostanie wywołane tylko connect .

Funkcja disconnect zostanie uruchomiona, gdy usuniesz element ze strony, więc na przykład, gdybyś miał zastąpić treść swojego kodu HTML, możesz zniszczyć dowolny kod, który może wymagać ponownego uruchomienia, jeśli element nie znajduje się w ta sama pozycja. Na przykład, jeśli masz fantazyjny edytor WYSIWYG, który dodaje dużo dodatkowego kodu HTML do elementu, możesz przywrócić go do pierwotnego stanu po wywołaniu disconnect .

Dziedziczenie funkcjonalności

Czasami możesz chcieć udostępnić trochę wspólnych funkcji między kontrolerami Stimulus. Fajną rzeczą w Stimulus jest to, że (pod maską) łączysz nieco waniliowe klasy JavaScript z elementami HTML, więc udostępnianie funkcji powinno być znajome.

W tym przykładzie konfiguruję klasę nadrzędną o nazwie ParentController , która jest następnie rozszerzona o klasę podrzędną o nazwie ChildController . To pozwoliło mi dziedziczyć metody z ParentController , więc nie musiałem duplikować kodu w moim ChildController .

Używanie go w produkcji

Powyżej zademonstrowałem kilka dość samodzielnych przykładów korzystania z bodźca, które powinny dać przedsmak tego, co możesz osiągnąć. Pomyślałem też, że powinienem poruszyć temat tego, jak go wykorzystuję w produkcji i jak mi się to udało.

Pakiet internetowy

Jeśli korzystasz z Webpack, czeka Cię nie lada gratka! Stimulus został całkowicie stworzony do użycia z pakietem Webpack. Ich dokumentacja zawiera nawet piękny zestaw startowy do Webpacka. Umożliwi to rozbicie kontrolerów na osobne pliki, a Stimulus zdecyduje o właściwej nazwie do użycia jako identyfikator.

Nie musisz używać webpacka, jeśli chcesz korzystać z programu Stimulus, ale to znacznie poprawia wrażenia. Osobiście Stimulus była biblioteką, która pomogła mi wprowadzić mnie w Webpack i naprawdę poczuć jego wartość.

Konwencje nazw plików

Wspomniałem we wstępie do tego artykułu, że lubiłem używać Stimulus, ponieważ czułem się zorganizowany. To naprawdę staje się widoczne, gdy połączysz go z Webpackiem, który umożliwia automatyczne ładowanie i rejestrację kontrolerów.

Gdy już skonfigurujesz Stimulus w Webpack, będzie on zachęcał do nadawania nazw plikom, takich jak [identifier]_controller.js , gdzie identyfikator jest tym, co przekażesz do atrybutu data-controller HTMLs.

W miarę rozwoju projektu możesz również przenieść kontrolery Stimulus do podfolderów. W magiczny sposób Stimulus przekształci podkreślenia w myślniki, a ukośniki do przodu w dwie myślniki, które następnie staną się Twoim identyfikatorem. Na przykład nazwa pliku chat/conversation_item_controller.js będzie miała identyfikator chat--conversation-item .

Utrzymywanie mniej JavaScript

Jednym z moich ulubionych cytatów jest „Najlepszy kod to brak kodu”. Staram się stosować to podejście do wszystkich moich projektów.

Przeglądarki internetowe bardzo się rozwijają, jestem przekonany, że większość rzeczy, których potrzebuję na dzisiaj do napisania JavaScript, zostanie ustandaryzowana i zapieczętowana w przeglądarce w ciągu najbliższych 5 lat. Dobrym tego przykładem jest element details, kiedy po raz pierwszy zaczynałem programować, bardzo często musiałem ręcznie kodować tę funkcjonalność za pomocą jQuery.

W rezultacie, jeśli potrafię napisać przystępny HTML z odrobiną JavaScript do moich potrzeb, z nastawieniem „Dzisiaj to działa, ale za 5 lat chcę to łatwo zastąpić” będę szczęśliwy deweloper. Jest to o wiele bardziej osiągalne, gdy na początek napisałeś mniej kodu, do którego nadaje się Stimulus.

Najpierw HTML, potem JavaScript

Jednym z aspektów, które bardzo mi się podoba w podejściu, które zachęca Stimulus, jest to, że mogę skupić się na wysyłaniu kodu HTML do moich użytkowników, który jest następnie nieco podrasowany przez JavaScript.

Zawsze byłem fanem wykorzystywania pierwszych kilku milisekund uwagi użytkownika na zdobywaniu tego, czym mam się z nim podzielić — na oczach użytkownika. Następnie martw się konfiguracją warstwy interakcji, podczas gdy użytkownik może zacząć przetwarzać to, co widzi.

Co więcej, jeśli JavaScript z jakiegoś powodu ulegnie awarii, użytkownik nadal może zobaczyć zawartość i wchodzić z nią w interakcję bez JavaScript. Na przykład zamiast formularza przesyłanego przez AJAX, zostanie on przesłany za pomocą tradycyjnego żądania formularza, które ponownie ładuje stronę.

Wniosek

Uwielbiam budować witryny, które wymagają tylko niewielkich kropelków łatwego w utrzymaniu JavaScript, aby poprawić wrażenia użytkownika, czasami fajnie jest po prostu zbudować coś, co wydaje się prostsze. Posiadanie czegoś lekkiego jest świetne, naprawdę podoba mi się to, że bez zbytniego obciążenia poznawczego jest całkiem jasne, jak organizować pliki i ustawiać małe okruszki, które podpowiadają, jak JavaScript będzie działał z fragmentem HTML.

Naprawdę podobała mi się praca ze Stimulus. Nie ma w tym zbyt wiele, więc krzywa uczenia się jest dość łagodna. Jestem przekonany, że jeśli przekażę swój kod komuś innemu, będą oni szczęśliwymi programistami. Gorąco polecam spróbować, nawet jeśli to tylko z czystej ciekawości.

Słoń w pokoju to sposób, w jaki się układa w porównaniu do React i Vue, ale moim zdaniem są to różne narzędzia do innych wymagań. W moim przypadku często renderuję HTML z mojego serwera i dodaję trochę JavaScript, aby poprawić wrażenia. Gdybym robił coś bardziej złożonego, rozważyłbym inne podejście (lub odepchnąłem wymagania, aby mój kod był prosty).

Dalsza lektura

• Strona główna bodźca
  Mają fantastyczny podręcznik, który znacznie głębiej opisuje koncepcje, które przedstawiłem powyżej.
• Repozytorium GitHub Stimulus
  Dowiedziałem się tak wiele o tym, jak działa Stimulus, badając ich kod.
• Ściągawka bodźca
  Podręcznik podsumowany na jednej stronie.
• Forum bodźców
  Widząc innych ludzi pracujących ze Stimulusem, poczułem się, jakby był używany na wolności.