search

Polymer / pwa-starter-kit

Starter templates for building full-featured Progressive Web Apps from web components.
https://pwa-starter-kit.polymer-project.org
2.36k stars 431 forks source link

counter-element.js: are lines 66, 67, 72 and 73 superfluous? #354

Closed ghost closed 5 years ago

ghost commented 5 years ago

Hello,

I'm studying the code and I am trying to understand why lines 66, 67, 72, 73 were useful. When clicking the + and -, we are:

  1. dispatching events counter-incremented/counter-decremented to the parent component,
  2. this triggers an action, (from my-view2.js and to action/counter.js)
  3. modifies the store, (reducers/counter.js)
  4. stateChanged (my-view2.js) updates values of "clicks" and "value"
  5. binding updates values in the counter-element component.

I deleted those lines and the app works fine. As I am learning, I wonder if these lines have another purpose.

Thank you for correcting my understanding if I am wrong.

istvank commented 5 years ago

Hi @Eric02 these lines are presumably there for giving the user immediate feedback upon click. This is one of the principles of good interaction design.

The counter-element's click property is also updated upon a state change in my-view2.js, that's why it is also working if you delete the mentioned lines. However, imagine if the action would result in a server round-trip. If the round-trip takes longer than the human perceivable limit between action-reaction (click-increase), it would be confusing for the user to have to wait (even just half a second) until the timer increases. Especially since the result is non-deterministic, i.e. clicking another time again increases the counter.

Hope this helps. 😃

ghost commented 5 years ago

It does, thank you! I did not think about that... still a lot to learn!