guides-source
guides-source copied to clipboard
Give other (more important reason) for refactoring code in Super Rentals tutorial
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.