Stimulus Basics

A presentation about the basics of Stimulus, focusing on context of usage. It uses an small demo app https://github.com/krzykamil/stimuli

Transcript

1. Stimulus.js - basics and context of usage 02.2023
2. Agenda (1/7) 1. Context 2. A professional graph, with informations on it 3. Basics 4. Code 5. When to stimulate yourself 6. A goodbye :(
3. What is context? (2/7) • Saas? • Greenfield? • Start-up? Scale-up? • Internal software? • 1-2 devs? • Other teams depends on your work? • New technology? • Software with lives at stake? • New job? Want to show off? • Deadline • Juniors in project? • Growing, expanding, CD • Paas? • Legacy? • Big Enterprise? FAANG? • Software for client? • 10 devs? • Independent from other engineers? • Prehistoric tech? • Only business value of software? • Want to get fired? • Budget • Only seniors in project? • Maintenance
4. Stimulus, when, why? (3/7) Top of the line, we da best developers, bleeding-edgetech Our app is React/Vue first, backend is our bitch “I am a special boy” Full SPA or a big framework is too much I am a Ruby monkey, JS scary, but I want my app to shine I want to hide this div when I click this button and then kill myself I want to get fired and then die Complexity Possibilities
5. Basics (5/7) <div data-controller=”brug”> <input data-brug-target=”hehe” /> <button data-action=”click/>foo#laugh” /> //div> //app/javascript/controllers/brug_controller.js import { Controller } from "stimulus"; export default class extends Controller { static targets = ["hehe"]; connect() { console.log(‘brug on’) } laugh() { this.heheTarget.value = “HEHE!!!” } }
6. Code (6/7) 127.0.0.1 No place like
7. When to use vs When not to use (7/7) • Small/medium FE project • Lots of CRUD, data-entry app • Existing Rails app • Devs are good at Backend • A lot happens on server-side • Reactivity on client side is mostly a “sprinkle” • Refactoring legacy Rails jQuery into stimulus • Multiple teams on the project • React/Vue etc. already in the app • Highly interactive app • Not the best choice for expanding your JS abilities • You want to level up on popular technologies • Shared components/libraries in the app As a sidenote: if you want more reactivity, but NOT as much to justify JS framework like React or Vue, maybe add Turbo
8. Dziękuję za uwagę