guides-source icon indicating copy to clipboard operation
guides-source copied to clipboard

Give other (more important reason) for refactoring code in Super Rentals tutorial

Open tomas-goncalves opened this issue 4 years ago • 0 comments

In the Super Rental tutorial, Part 1, Interactive Components it is suggested that this code

{{#if this.isLarge}}
  <button type="button" class="image large" {{on "click" this.toggleSize}}>
    <img ...attributes>
    <small>View Smaller</small>
  </button>
{{else}}
  <button type="button" class="image" {{on "click" this.toggleSize}}>
    <img ...attributes>
    <small>View Larger</small>
  </button>
{{/if}}

be refactored into this code

<button type="button" class="image {{if this.isLarge " large"}}" {{on "click" this.toggleSize}}>
  <img ...attributes>
  <small>View {{if this.isLarge "Small" "Large"}}</small>
</button>

the main reason given is code readability but in my opinion the use of the same image element, without removing one and creating another, is much more important, as when you use the first example the image loads each time isLarge is changed, causing a much worst user experience. This is a very important reason for refactoring that, in my opinion, should be outlined in the guide.

tomas-goncalves avatar Aug 09 '21 14:08 tomas-goncalves