senchacon 2016: upgrading an ext js 4.x application to ext js 6.x - mark lincoln
TRANSCRIPT
Upgrading an Ext JS 4.x Application to Ext JS 6.x
Mark D. LincolnSenior Solutions Engineer, Sencha
November 9, 2016
What Type of Upgrade Do We Want To Do
• Minimalist- Change the framework version
- Get the application running
- Resolve an issues that arise
• Migration- New application
- Migrate the functionality
- Use latest features and functionality wherever possible
How Do We Perform the Upgrade?
• Review the architecture
• Analyze the implementation
• Decompose the source code into logical parts
• Reassemble it into an upgraded application
Jigsaw Puzzle
Jigsaw Puzzle
• How do we assemble a jigsaw puzzle?- Layout the pieces
- Find the corners
- Assemble the edges
- Work toward the middle
Steps to Assemble the Puzzle
Laying Out the Pieces
• Original application requirements
• Implementation heritage- Original version of Ext JS used
- Subsequent versions of Ext JS used
- Existing legacy code
- Sencha MVC pattern
• State of the Ext JS 4.x application- Code quality
- Performance problems
- Memory leaks
7
Finding the Corners
• Create a new workspace with Sencha Cmd
• Create a new application within the workspace
• Review the Source Code for the Views- Identify the location of the functionality
• View
• Controller
• Sencha MVC to Sencha MVVM- Create view controllers
- Create view models
Assembling the Edges
• Decompose global controllers into view controllers- Business or functional controllers become view controllers with business logic
• Migrate event handling- Move selector based listeners to view based listeners
- Move event handling methods from the global controllers to the view controllers
Work Toward the Middle
• Move global data stores to view model stores collection- Localizes store to the view
- Matches store lifetime to the view lifetime
• Optimizations- Two-way data binding
- Using “reference” config and lookup()
• Replace “itemId” config
• Replace “up()”, “down()”, and “query()” in containers
- Move reusable code to packages
// Retrieve a reference to the profile model for the// current user.var userProfileModel = userProfiles.getAt( 0 );// Update the user profile form with the information// from the model.userProfileForm.down( '#UserNumber' ).setValue( userProfileModel.get( 'number' ) );userProfileForm.down( '#FirstName' ).setValue( userProfileModel.get( 'first' ) );userProfileForm.down( '#MiddleName' ).setValue( userProfileModel.get( 'middle' ) );userProfileForm.down( '#LastName' ).setValue( userProfileModel.get( 'last' ) );userProfileForm.down( '#MobileNumber' ).setValue( userProfileModel.get( 'mobile' ) );
Loading Form Data
• Data binding replaces this
• Code can be eliminated
// Retrieve a reference to the profile model for the// current user.var userProfileModel = userProfiles.getAt( 0 );
// Update the user profile with the information from// the form.userProfileModel.set( 'number', userProfile.number );userProfileModel.set( 'first', userProfile.first );userProfileModel.set( 'middle', userProfile.middle );userProfileModel.set( 'last', userProfile.last );userProfileModel.set( 'mobile', userProfile.mobile );
// Save the new user profile to local storage.userProfiles.sync();
Saving Form Data
• Data binding replaces this
• Code can be eliminated
items : [ { xtype : 'textfield', reference : 'UserNumber', anchor : '100%', fieldLabel : 'User #', labelAlign : 'left', labelWidth : 60, name : 'number', allowBlank : false, bind : { value : '{user.number}' } }, { xtype : 'textfield', reference : 'FirstName', anchor : '100%', fieldLabel : 'First', labelAlign : 'left', labelWidth : 60, name : 'first', allowBlank : false, bind : { value : '{user.first}' } }]
Two-Way Data Binding Form
• Replacement for boiler plate code- Reduces load and save functionality
- More efficient
- Easier to maintain
Sencha Fleet
Sencha Fleet
• Origin as a Sencha Services Hackathon Exercise- Mobile application implemented in Sencha Touch 2.x
• Added an application for dispatching deliveries- Desktop application implemented in Ext JS 4.x
• Good candidate for upgrade- Universal application application implemented in Ext JS 6.x
Sencha Services
• Code review, recommendations, and level of effort
• Get your team started in the right direction
• Provide support and periodic assistance
• Perform the entire upgrade
Please Take the Survey in the Mobile App
• Navigate to this session in the mobile app
• Click on “Evaluate Session”
• Respondents will be entered into a drawing to win one of five $50 Amazon gift cards