window.pipedriveLeadboosterConfig = { basis: 'leadbooster-chat.pipedrive.com', companyId: 11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', versie: 2, } ;(functie () { var w = venster als (w.LeadBooster) { console.warn('LeadBooster bestaat al') } anders { w.LeadBooster = { q: [], on: functie (n, h) { this.q.push({ t: 'o', n: n, h: h }) }, trigger: functie (n) { this.q.push({ t: 't', n: n }) }, } } })() Stimulus.js: Een JS-frameworkalternatief voor Rails-apps - The Codest
The Codest
  • Over ons
  • Diensten
    • Software Ontwikkeling
      • Frontend ontwikkeling
      • Backend ontwikkeling
    • Staff Augmentation
      • Frontend ontwikkelaars
      • Backend ontwikkelaars
      • Gegevensingenieurs
      • Cloud Ingenieurs
      • QA ingenieurs
      • Andere
    • Het advies
      • Audit & Consulting
  • Industrie
    • Fintech & Bankieren
    • E-commerce
    • Adtech
    • Gezondheidstechnologie
    • Productie
    • Logistiek
    • Automotive
    • IOT
  • Waarde voor
    • CEO
    • CTO
    • Leveringsmanager
  • Ons team
  • Case Studies
  • Weten hoe
    • Blog
    • Ontmoetingen
    • Webinars
    • Bronnen
Carrière Neem contact op
  • Over ons
  • Diensten
    • Software Ontwikkeling
      • Frontend ontwikkeling
      • Backend ontwikkeling
    • Staff Augmentation
      • Frontend ontwikkelaars
      • Backend ontwikkelaars
      • Gegevensingenieurs
      • Cloud Ingenieurs
      • QA ingenieurs
      • Andere
    • Het advies
      • Audit & Consulting
  • Waarde voor
    • CEO
    • CTO
    • Leveringsmanager
  • Ons team
  • Case Studies
  • Weten hoe
    • Blog
    • Ontmoetingen
    • Webinars
    • Bronnen
Carrière Neem contact op
Pijl terug KEREN TERUG
2020-05-13
Software Ontwikkeling

Stimulus.js: Een JS-frameworkalternatief voor Rails-apps

The Codest

Pawel Muszynski

Software Engineer

Zoals de makers zeggen, is Stimulus een JavaScript framework met bescheiden ambities, dat niet je hele frontend wil overnemen maar HTML wil uitbreiden met net genoeg gedrag om het te laten schitteren.

Ik weet wat je denkt... Een andere JavaScript kader? Er zijn er al zoveel! Je hebt gelijk, maar deze trok mijn aandacht omdat hij is gemaakt door Basecamp. Je kent dit bedrijf waarschijnlijk wel, het zijn de makers van Ruby on Rails. Ze creëerden ook Turbolinks, en ik noem dit omdat Stimulus er prachtig mee combineert. Dus misschien is het de moeite waard om Stimulus eens te proberen?

Hoe werkt het?

Stimulus werkt door de pagina te monitoren en te wachten op de datacontroller attribuut te verschijnen. De datacontroller waarde verbindt en ontkoppelt Stimulus controllers. Het uitgangspunt is eenvoudig: net zoals klasse een verbinding is tussen HTML en CSS, datacontroller is een brug van HTML naar JavaScript. Stimulus voegt ook de gegevens-actie attribuut, dat beschrijft hoe gebeurtenissen op de pagina de controller-methodes moeten triggeren, en de gegevens-doel attribuut, dat je een handvat geeft om elementen te vinden in het bereik van de controller.

Eenvoudige installatie

Als uw Rails app een webpacker gem gebruikt, kunt u Stimulus installeren met een eenvoudig commando aangezien de webpacker gem een taak voorziet om Stimulus te installeren. Voer gewoon het volgende commando uit in je Rails root directory:

rails webpacker:install:stimulus
Dit voegt stimulans toe aan pakket.json en maakt de volgende twee bestanden: app/javascript/controllers/index.js:

import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

toepassing = toepassing.start()
const context = require.context("controllers", true, /_controller.js$/)
application.load(definitionsFromContext(context))

U kunt zien dat de helper require.context van webpack wordt aangeroepen. Vervolgens wordt de resulterende context doorgegeven aan de methode Application#load. Dit betekent dat onze toepassing op zoek is naar bestanden met de naam[identifier]_controller.js in de app/javascript/controllers/ directory, waar de identifier overeenkomt met de data-controller identifier van de controller in uw HTML. Dit is precies de plek waar we de Stimulus-controllers moeten plaatsen.
De app/javascript/controllers/hello_controller.js wordt ook gegenereerd. Dit is slechts een voorbeeldcontroller waarmee we kunnen spelen.

Basisgebruik

Ok, dus we hebben de hallo_controller.js bestand gemaakt met het volgende code:

importeer { Controller } van "stimulus".

export default class extends Controller {
statische doelen = ["uitvoer"]
connect() {
this.outputTarget.textContent = 'Hallo, Stimulus!
}
}

Maar, zoals je weet, zullen we geen effecten zien als we geen verbinding maken tussen HTML en JavaScript. Laten we wat code toevoegen aan je HTML-weergave. Je kunt dit plaatsen wanneer je maar wilt:

<div data-controller="hello">
<p data-target="hello.output">&nbsp;</p>
</div>

En weet je wat? Dat is alles! Als je je pagina opnieuw laadt en "Hallo, Stimulus!" op je pagina ziet, betekent dit dat de verbinding goed werkt. Simpel, toch?
Oké, maar dit is gewoon een tekstweergave. Kunnen we wat actie krijgen? Ja, dat kan! Zoals ik al eerder zei, is er ook de gegevens-actie attribuut. Laten we dan onze HTML-weergave wijzigen:

<div data-controller="hello">
<p><input type="number" data-target="hello.days"><br><button data-action="click->hello#calculate">Bereken</button></p>
</div>

En de stimuleringsregelaar app/javascript/controllers/hello_controller.js:

importeer { Controller } van "stimulus".

export default class extends Controller {
statische doelen = ["uitvoer", "dagen"]
connect() {
this.outputTarget.textContent = 'Hoe lang ben je al in quarantaine?
}
bereken() {
const element = this.daysTarget
const dagen = element.waarde
const lockdownDagen = 14
laat daysLeft = lockdownDays - days

Als (daysLeft < 1) {
  alert('Je bent vrij!')
}
anders {
  alert(`Hoeveel dagen moet je in quarantaine blijven: ${daysLeft}`)
}

}
}

Hier hebben we een heel eenvoudige app die berekent hoe lang we in quarantaine moeten blijven. We hebben dit voor elkaar gekregen door het data-action attribuut in HTML te gebruiken.
U kunt zien dat we ook "dagen" hebben toegevoegd aan de lijst met doelen in de JavaScript code. Wanneer we dit doen, maakt Stimulus automatisch een dit.dagendoel eigenschap die het eerste overeenkomende doelelement retourneert.

Wat moet je nog meer weten?

Terugbellen

Je hebt waarschijnlijk gemerkt dat er een verbinden() methode in beide voorbeelden. Deze is voor ingebouwde callbacks. Je moet ze allemaal kennen en hun levenscyclus, dus hier zijn ze:
initialiseren: eenmalig, wanneer de controller voor het eerst wordt geïnstantieerd,
aansluiten: wanneer de controller is aangesloten op de DOM,
ontkoppelen: wanneer de controller wordt losgekoppeld van de DOM.

Actiebeschrijving

De gegevens-actie waarde klik->hello#berekenen wordt een actiedescriptor genoemd. Deze descriptor zegt dat:

  • klik op is de naam van de gebeurtenis,
  • hallo is de identificatie van de controller,
  • berekenen is de naam van de methode.

Doelen

Net als bij acties heeft Stimulus een doelomschrijving. De hallo.dagen descriptor zegt dat: hallo is de identificatie van de controller,
dagen is de doelnaam.

In het vorige voorbeeld heb ik gezegd dat Stimulus de dit.dagendoel eigenschap als er "days" in de lijst met doelen staat. Je moet ook weten dat je meer eigenschappen kunt maken. Met betrekking tot het voorbeeld kun je hebben:

dit.dagendoel die evalueert tot het eerste doel in het bereik van de controller. Als er geen doel is, markeert de eigenschap een fout,
this.daysTargets evalueert tot een array van alle brontargets in het bereik van de controller,
this.hasDaysTarget retourneert true als er een doel is of false als dat niet het geval is.

Zoals je kunt zien, is Stimulus eenvoudig en kan het gemakkelijk worden toegevoegd aan je applicatie. Het wint aan populariteit in de RoR gemeenschap en dat verbaast me niet. Als Ruby ontwikkelaar werk ik graag met Stimulus. Dus wat dacht je ervan om het eens uit te proberen?

Lees meer:

  • Web App Ontwikkeling: Waarom is Ruby on Rails een technologie die de moeite waard is om te kiezen?
  • Tijd voor een nieuwe realiteit. Een tijdperk van werken op afstand is een maand geleden begonnen
  • 5 redenen waarom u gekwalificeerde Ruby ontwikkelaars in Polen zult vinden

Verwante artikelen

Software Ontwikkeling

Bouw Toekomstbestendige Web Apps: Inzichten van The Codest's Expert Team

Ontdek hoe The Codest uitblinkt in het creëren van schaalbare, interactieve webapplicaties met geavanceerde technologieën, het leveren van naadloze gebruikerservaringen op alle platforms. Ontdek hoe onze expertise digitale transformatie en business...

DE BESTE
Software Ontwikkeling

Top 10 in Letland gevestigde bedrijven voor softwareontwikkeling

Lees meer over de beste softwareontwikkelingsbedrijven van Letland en hun innovatieve oplossingen in ons nieuwste artikel. Ontdek hoe deze technologieleiders uw bedrijf kunnen helpen verbeteren.

thecodest
Oplossingen voor ondernemingen en schaalvergroting

Essentiële Java-softwareontwikkeling: Een gids voor succesvol uitbesteden

Verken deze essentiële gids over succesvolle outsourcing Java-softwareontwikkeling om de efficiëntie te verbeteren, toegang te krijgen tot expertise en projectsucces te stimuleren met The Codest.

thecodest
Software Ontwikkeling

De ultieme gids voor outsourcing in Polen

De sterke groei van outsourcing in Polen wordt gedreven door economische, educatieve en technologische vooruitgang, die IT-groei en een bedrijfsvriendelijk klimaat stimuleert.

DeCodest
Oplossingen voor ondernemingen en schaalvergroting

De complete gids voor IT-auditmiddelen en -technieken

IT-audits zorgen voor veilige, efficiënte en compliant systemen. Lees het volledige artikel om meer te weten te komen over het belang ervan.

The Codest
Jakub Jakubowicz CTO & medeoprichter

Abonneer je op onze kennisbank en blijf op de hoogte van de expertise uit de IT-sector.

    Over ons

    The Codest - Internationaal softwareontwikkelingsbedrijf met technische hubs in Polen.

    Verenigd Koninkrijk - Hoofdkantoor

    • Kantoor 303B, 182-184 High Street North E6 2JA
      Londen, Engeland

    Polen - Lokale technologieknooppunten

    • Fabryczna kantorenpark, Aleja
      Pokoju 18, 31-564 Krakau
    • Hersenambassade, Konstruktorska
      11, 02-673 Warschau, Polen

      The Codest

    • Home
    • Over ons
    • Diensten
    • Case Studies
    • Weten hoe
    • Carrière
    • Woordenboek

      Diensten

    • Het advies
    • Software Ontwikkeling
    • Backend ontwikkeling
    • Frontend ontwikkeling
    • Staff Augmentation
    • Backend ontwikkelaars
    • Cloud Ingenieurs
    • Gegevensingenieurs
    • Andere
    • QA ingenieurs

      Bronnen

    • Feiten en fabels over samenwerken met een externe partner voor softwareontwikkeling
    • Van de VS naar Europa: Waarom Amerikaanse startups besluiten naar Europa te verhuizen
    • Tech Offshore Ontwikkelingshubs Vergelijking: Tech Offshore Europa (Polen), ASEAN (Filippijnen), Eurazië (Turkije)
    • Wat zijn de grootste uitdagingen voor CTO's en CIO's?
    • The Codest
    • The Codest
    • The Codest
    • Privacy policy
    • Gebruiksvoorwaarden website

    Copyright © 2025 door The Codest. Alle rechten voorbehouden.

    nl_NLDutch
    en_USEnglish de_DEGerman sv_SESwedish da_DKDanish nb_NONorwegian fiFinnish fr_FRFrench pl_PLPolish arArabic it_ITItalian jaJapanese ko_KRKorean es_ESSpanish etEstonian elGreek nl_NLDutch