Why use ionic element tags/components vs standard html?

Question

Whats the benefit of using ionic elements like ion-button, ion-item, ion-row, ion-text ion-img instead of regular html?

Answer 1

The first benefit is that each component has been implemented to work properly on mobile devices and with mobile events like clicks, taps, and so on (do you remember the 300 ms delay issue?).

It's also important to notice that Ionic components were designed/implemented according to each platform's design guidelines and recommended patterns. Users expect all apps to respect some UI/UX patterns they are already used to, and Ionic does that extremely well.

Last but not least, some components also encapsulates a lot of logic that would be kind of hard to be implemented with just html elements (for example, the ion-item-sliding component).

But please notice that there're some scenarios where using standard html may be a good option. For example, if you need to show a very long list of items, using ion-items would mean that a new instance of the ion-item component is created for each item of the list, and your Ionic app will need to keep them in memory. Ionic components were implemented to be very performant so this won't be an issue for most of the mobile devices nowadays, but if you need to support old/slow devices this may improve the performance a lot.