Tips for upgrading older apps to new components

Having completed a big round of upgrades for some very old components, I thought to share my learnings of best practices (as of Dec 2022).

Known breaking changes:

  • buttons lose their events. Upgrade them one at a time, immediately re-adding the event after the upgrade (otherwise you won't remember later what the event was).
  • some initial values (ie dropdowns) changed from null to "". check all queries for {{component.value == null}} and replace with {{!component.value}} instead
  • date selectors lose the .formattedString property, change to .value if you were using that
  • table custom columns sometimes get dropped

There are some other ones too that are already called out during the upgrade process, so pay attention to the warnings given. Most other things went smoothly for me. If you have a lot of components, you can auto-upgrade everything except buttons & tables, then go back and fix your queries, and then do optimizations.

Common non-fixing optimizations made during the upgrades:

  • change table heights to "auto", containers to "hug". replace empty gaps with spacers to better support the resulting height adjustments.
  • new components are often less tall, such as dropdowns with labels on Top. adjust accordingly
  • set label widths to be more uniform, by px (not %)
  • reset colors to theme colors instead of being hard-coded
  • consider where to use new features like header, sidebar, etc

There is probably more but this is what I could remember

2 Likes