n this world of Microservices, I am building a Monolith app. In this world of React and Vue, am building a server-side rendered app. However, I need Javascript. I can’t avoid that. I need some parts of the page updated dynamically. I need to show/hide certain parts of the page depending upon user actions. I don’t want JQuery for the obvious reasons. Slow.., Heavy and then, of course, it can easily create spaghetti code. That is when I came across Stimulus JS - a modest Javascript framework. It sprinkles Javascript to add behaviour to your HTML. It has a controller, action and targets (i.e. the HTML elements). Moreover, it pairs well with Turbolinks. So I don’t need to do the circus of converting JSON to DOM. I’ve been using Stimulus for over a year and its been quite good. This talk is about my experiences with Stimulus with a few examples. I will share recommendations on where it might be useful and where it is not.

1. Sprinkle Javascript
using StimulusJS
@leenasn

2. Good Karma
Story-telling CRM because Facts Tell but Stories Sell http://goodkarmayoga.in/

3. https://pixabay.com/photos/old-tv-records-vhs-tapes-retro-tv-1149416/

4. https://unsplash.com/photos/SpVHcbuKi6E

5. Simplicity https://pixabay.com/photos/lotus-nature-plants-flowers-pink-614421/

6. https://unsplash.com/photos/MGRv3qZfyTs

7. Can’t ignore Javascript
https://pixabay.com/vectors/false-error-missing-absent-x-red-2061132/

10. https://pixabay.com/photos/bmx-sports-jump-championship-97095/
Hijack

12. You might not need jQuery http://youmightnotneedjquery.com/

13. https://pixabay.com/photos/food-dessert-cupcake-sprinkles-2589686/

14. https://stimulusjs.org/

15. https://stimulusjs.org/
Stimulus is a JavaScript framework with modest
ambitions. It doesn’t seek to take over your entire
front-end—in fact, it’s not concerned with rendering
HTML at all. Instead, it’s designed to augment your HTML
with just enough behavior to make it shine.
Stimulus pairs beautifully with Turbolinks to provide a
complete solution for fast, compelling applications with
a minimal amount of effort.

16. https://stimulusjs.org/

17. Building Blocks
● Controllers
● Actions
● Targets
● Datamaps

18. Controllers
Basic unit of a Stimulus application
https://stimulusjs.org/

19. Actions
Handles DOM events in your controllers
https://stimulusjs.org/

20. Targets
Reference important elements in the HTML
https://stimulusjs.org/

21. Datamaps
Access special data attributes on the controller’s element
https://stimulusjs.org/

23. Lifecycle Callbacks https://stimulusjs.org/

24. ● Webpack
● Babel, other build systems
● Without build systems
Installation https://stimulusjs.org/handbook/installing

25. ● Modern browsers
● Polyfills for old browsers
Browser support https://stimulusjs.org/handbook/installing

26. Separation of concernshttps://medium.com/continuousdelivery/do-one-thing-really-well-d8d3ea2a271d

27. Readability https://pixabay.com/photos/glasses-see-overview-sharpness-812183/

28. Convention over configurationhttps://pixabay.com/illustrations/icon-stamp-arrangement-pen-sign-2383802/

32. https://pixabay.com/photos/scale-justice-weight-health-2634795/

33. Javascript app
Server-side rendered app
Vs

34. https://pixabay.com/illustrations/compare-comparison-scale-balance-643305/

35. Javascript app

36. Server-side rendered app

37. Do one thing well https://pixabay.com/vectors/glossy-number-numbers-numerals-one-1293833/

38. Javascript framework for adding
behaviour for HTML
https://medium.com/continuousdelivery/do-one-thing-really-well-d8d3ea2a271d

39. Origin of Stimulus
Documentation
Source
References

40. Leena S N
@leenasn / leena.sn@multunus.com
https://www.linkedin.com/in/leenasn/
https://medium.com/@leenasn