Upgrading your Sencha applications to the latest version of the framework can be a little overwhelming, particularly if you’ve spent years developing on the same version and are now several versions behind the latest and greatest.
Don’t panic! Think of it as an opportunity to improve your application, removing any “messy” unnecessary code and ultimately making it more efficient and performant. It’s not always a smooth process as there are many things to consider like the complexity of the application and the current version of the framework. The upgrade path can differ for each company and application, but from our experience it is something worth doing as soon as possible.
The Good
There are several reasons why companies may choose to stick to old Sencha versions, however the longer it is left the harder it will be to upgrade in the future. Older versions of the framework are no longer supported and ExtJS 6 is a much more powerful option. It offers many new and useful components and events and will improve overall application memory and performance. Another reason to upgrade is to utilise the handy tools Sencha has recently released that will make developing your ExtJS 6 applications more efficient:
- Sencha Themer – a simple tool which makes creating eye-catching themes quick and painless.
- Sencha Test – a tool to help you create unit and end-to-end functional tests quickly and run them on multiple browsers simultaneously
- Sencha CMD – this tool has been around for a while but if you’re not already using it we suggest you start. It will help you to create optimised builds and Fashion when used with Themer allows you to see live style updates without ever reloading your browser.
The Bad
The latest version of ExtJS was written with speed and performance in mind, so don’t move over any code that will detract from this. Things to watch out for:
- “Big” controllers – although keeping all logic in one controller will work, they can be hard to read and maintain. Avoid doing this, instead making use of the MVVM architecture that Sencha now offers.
- Global Queries – if you ever find yourself writing Ext.ComponentQuery.query stop and ask yourself why? Is it absolutely necessary? Or can you make it more efficient by querying from a component using up() or down()
- Proper component use – reduce clutter from the DOM by making sure you are using the most appropriate component. Don’t use a panel when a container will suffice.
The Ugly
Before starting a Sencha upgrade consider taking time to review the current version of the application. Check for any unnecessary or “sticky plaster” code that should not be moved into the new version. Take a look at the following areas of your application:
- Existing overrides – are they still necessary?
- Custom components – why were they needed and can they be removed?
- Code reuse – are there any areas of the application that could be simplified by creating reusable components?
- Legacy code – Are there any parts of the code that is so complex that now no one understands how it works? It tends to be the case with larger companies to have a lot of legacy code written by someone who has since left, leaving no documentation around how the logic works.
If you are considering upgrading but don’t know where to start, we can help! We have experience upgrading all types of Sencha applications and understand the pitfalls to avoid.
To find out more join us next week at the Sencha Roadshow 2017 in London where we will expand on this topic and be available to answer any queries.
