How do you migrate legacy Ext JS applications that use classic toolkit to modern toolkit?

1 Assess your migration needs

Before you start migrating your legacy Ext JS applications, you need to assess your migration needs and goals. Why do you want to migrate? What are the benefits and risks of migrating? How much time and resources do you have for the migration? How complex and customized are your legacy applications? How many dependencies and external libraries do they have? How compatible are they with the modern toolkit? These questions will help you determine the scope and feasibility of your migration project, and also help you choose the best migration strategy for your situation.

2 Choose a migration strategy

There are two main migration strategies for moving from the classic to the modern toolkit: the hybrid approach and the rewrite approach. The hybrid approach involves using both toolkits in the same application, and gradually replacing the classic components with the modern ones. This way, you can migrate your application incrementally, without disrupting the existing functionality or user experience. The rewrite approach involves creating a new application from scratch, using only the modern toolkit. This way, you can take advantage of the latest features and best practices of the modern toolkit, but you also need to rewrite all the logic and UI of your legacy application.

3 Prepare your environment and code

Before you start migrating your code, you need to prepare your environment and code for the migration. You need to upgrade your Ext JS framework version to the latest one that supports both toolkits, such as Ext JS 7. You also need to upgrade your Sencha Cmd tool to the latest version that can generate and build hybrid applications. You need to update your app.json file to include both toolkits and their respective themes and packages. You also need to refactor your code to follow the MVVM (Model-View-ViewModel) pattern, which is the recommended architecture for both toolkits. You need to separate your views, models, stores, and view models into different files and folders, and use data binding and formulas to connect them.

4 Migrate your components and views

The next step is to migrate your components and views from the classic to the modern toolkit. You need to identify which components and views are compatible with both toolkits, and which ones are specific to the classic toolkit. You can use the Ext JS Upgrade Advisor tool to scan your code and find the compatibility issues and recommendations. You can also use the Sencha Themer tool to customize the appearance and styles of your components and views. You need to replace the classic components and views with the modern equivalents, or create custom components and views if there is no equivalent. You also need to test and debug your components and views to ensure they work as expected in the modern toolkit.

5 Migrate your logic and functionality

The final step is to migrate your logic and functionality from the classic to the modern toolkit. You need to identify which logic and functionality are compatible with both toolkits, and which ones are specific to the classic toolkit. You can use the Ext JS Upgrade Advisor tool to scan your code and find the compatibility issues and recommendations. You need to replace the classic logic and functionality with the modern equivalents, or create custom logic and functionality if there is no equivalent. You also need to test and debug your logic and functionality to ensure they work as expected in the modern toolkit.

6 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?