Stimulus 2.0-alpha - What's new?

Light talk about the upcoming features of Stimulus.js.

Transcript

1. Stimulus 2.0-alpha
   What’s new?
   

   View Slide

2. TLDR
   Two new APIs with a nice surprise
   

   View Slide

3. Data Map API
   

   View Slide

4. Data Map API
   ● A way to pass data to a controller.
   ● Use cases:
   ○ Storing small strings, such as URLs, dates, or
   color values;
   ○ Bootstrapping a controller with a JSON object
   or array.
   

   View Slide

5. HTML Controller
   

   View Slide

6. However, the Data Map API only works
   with string values. That means we must
   manually convert to and from other
   types as needed
   

   View Slide

7. Values API
   

   View Slide

8. Values API
   ● Makes possible to define values (data
   maps) in the controller itself;
   ● Create properties to accessing them.
   

   View Slide

9. Usage
   The Value object keys
   are Data Map keys,
   and the values declare
   their data types
   

   View Slide

10. Value
    Properties
    They work just as the
    Target API works
    

    View Slide

11. A nice surprise:
    Value Changed Callback
    

    View Slide

12. Usage
    Now it’s easier to
    make your good old
    HTML template look
    modern
    

    View Slide

13. How many times have
    you seen the following
    pattern?
    

    View Slide

14. HTML Controller
    

    View Slide

15. We’re coupling the
    controller to the class
    name
    

    View Slide

16. Maybe using the Data
    Map API?
    

    View Slide

17. HTML Controller
    

    View Slide

18. Classes API
    

    View Slide

19. HTML Controller
    

    View Slide

20. All that with a very
    small cost
    

    View Slide

21. Unifying target
    attributes
    Both syntaxes will be
    supported, but using
    the original syntax will
    display a deprecation
    message in the
    developer console
    

    View Slide

22. Excited? Start
    using it now!
    Just add it to your
    package.json
    

    View Slide

23. More info at
    https://github.com/stimulusjs/stimulus/pull/202
    

    View Slide

24. That’s it
    Feel free to ask any question
    

    View Slide