Sencha Roadshow 2017: Sencha Upgrades - The Good. The Bad. The Ugly - Eva Luckhiram, SwarmOnline

SENCHA UPGRADES THE GOOD. THE BAD. THE UGLY.

EVA LUCKHIRAM | ENGINEERING LEAD

REASONS WHY COMPANIES DON’T UPGRADE

• Starting all over again• Stick to what they know• Time to upgrade• Can’t afford to invest resources• New contracts that take priority• Complex application• Legacy code• Their scared!

EXAMPLE

• No upgrades for 2 years• iOS & Android updates• Customers moved to newest devices• Features stopped working as they should• Angry Customers

THE GOOD Reap the benefits

• You don’t pay for it now, you pay for it later• Powerful new out of the box components• JS standards and browser compatibility• Sencha support for the latest version• Mobile ready• Sencha tools

SENCHA CMD

• Use it!• Help with future migrations• Quickly create generate components & apps• Compile optimised builds• Reduce application load time• Fashion & Themer• Live browser updates without reload• Helpful error messages

SENCHA THEMER

• No dedicated design team• Strict brand guidelines• Create styles once and apply to multiple apps• Use UI’s for specific styles• Inspect your live app!

SENCHA TEST

• Jasmine, WebDriver & Istanbul• Maintain quality• Command Line or GUI• Integrates into CI tools

• Regression Tests• Test at milestones during the migration• Less overwhelming when things start to fail

• Remove messy code • Get rid of TODO’s • Start documenting your code (JSDuck) • Maintain documentation • Stick to a Coding Standard • Same code formatting for all developers • No bad habits picked up or added

THE BAD Avoid bad practice

• Utilise speed & performance improvements• Stick to best practice• Use the Sencha Docs• Avoid the common pitfalls

MONSTER CLASSES

• Unreadable and unmanageable• Hundred’s of 1000’s LOC• Harder to migrate• Hard to debug• Sencha class structure• MVVM - organise code based on function• ViewControllers• Good for memory management

GLOBAL QUERIES

• Ext.ComponentQuery.query• Is it necessary?• up() or down() from component• lighter in process• Global queries useful for debugging

DECLUTTER YOUR DOM

• Proper component use• Don’t default to panels• Keep view lightweight• Improve overall load time• Create & destroy components on demand

THE UGLY Remove ugly code

• Don’t copy & paste bad code• Review existing code• Identify areas of improvement

OVERNESTING

• Clutters the DOM• Be careful how you structure components• Make use of Sencha layouts• Don’t wrap everything in a container

EXISTING OVERRIDES & CUSTOM COMPONENTS

• Do you still need them?• Why were they created?• Are they solved by the upgrade?• The functions they override may not exist anymore• Overrides affect all instances of component

CODE REUSE

• Simplify your codebase• Don’t repeat code• Make use of ViewModels and data binding

LEGACY CODE

• Overly complicated logic• No one understands it• Culprits no longer at the Company• Undocumented• This is a common issue!• Rework it and make it better

doSomething:function(controllerName,actionName,param1,param2,param3,param4,param5,param6,param7,param8,param9,param10,param11,param12,param13,param14,param15){varcontroller=this.getController(controllerName);controller.init(this);if(controller!==null){if(controller['action'+actionName]!==null){controller['action'+actionName](param1,param2,param3,param4,param5,param6,param7,param8,param9,param10,param11,param12,param13,param14,param15);returntrue;}}returnfalse;}

QUESTIONS