Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Stimulus 2.0-alpha - What's new?

Stimulus 2.0-alpha - What's new?

Light talk about the upcoming features of Stimulus.js.

Matheus Richard

April 02, 2020
Tweet

More Decks by Matheus Richard

Other Decks in Programming

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