Best practice to update the component and template created in classic UI to touch UI without using the migration tool

[zonghuiliu]

Hi Community!

I have some components created in classic UI, and now I plan to upgrade the system to touch UI. 

I will not use the migration tool and i'm wondering what is best process to rebuild those components, also recreate the templates.

Is there any code example showing the best practice to archieve that?

Prefer some help!

Thanks!

[kautuk_sahni]

@Harwinder-singh @Sady_Rifat  Can you please review this Question and share your thoughts? 

[Shashi_Mulugu]

@zonghuiliu can you please explain your thoughts behind why are you not planning to use migration tool built by Adobe?

[zonghuiliu]

Hi Shashi,

Because i'm considering rebuild some of components with a new logic while some of the components remain the same usage. 

[Sady_Rifat]

To migrate from classic UI to touch UI you can keep in mind the following things,

Component Migration:

• Recreate the dialog and use the latest coralUI3 fields.
  Documentation: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/...
  Demo: https://developer.adobe.com/experience-manager/reference-materials/6-5/coral-ui/coralui3/components....
• If you plan to modify the component HTL or Java code, then you should always write associate Sling Model Class instead of using ${properties.sometihing} in HTL.
• For the Sling Model, you should follow the Sling Deligation Pattern Structure.

Template Migration:

• Create editable templates. Where from the developing end create only the blueprints instead of creating the actual page template. As follows the best and recommended practice Author should create the Actual Page Template from the blueprint using touch UI. 
• The `template-types` from the codebase should be very basic and contain the bare minimum structure.
• Detailed Structural Documentation: https://experienceleague.adobe.com/docs/experience-manager-65/developing/platform/templates/page-tem... 
  Simple Guideline: https://www.north-47.com/editable-templates-in-aem-6-5/ 

[Harwinder-singh · Accepted solution]

@zonghuiliu , The AEM modernization suite should be able to help you achieve that. 

Is there any constraint to use this feature from Adobe.

If there is , the only way out to develop a set of custom migration scripts but that would have the following disadvantages : 

• Re-inventing the wheel obviously.
• You may miss out on certain edge cases that the modernization suite is able to take care of.

 https://opensource.adobe.com/aem-modernize-tools/