SenchaCon 2016: Upgrading an Ext JS 4.x Application to Ext JS 6.x - Mark Lincoln

63 views

Published on

In this session we'll demonstrate the optimal way to upgrade an Ext JS 4.x application to Ext JS 6.x. Detailed examples, recommended best practices, and a completely upgraded Ext JS application will be demonstrated showing the techniques used to perform the upgrade.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
63
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

SenchaCon 2016: Upgrading an Ext JS 4.x Application to Ext JS 6.x - Mark Lincoln

  1. 1. Upgrading an Ext JS 4.x Application to Ext JS 6.x Mark D. Lincoln Senior Solutions Engineer, Sencha November 9, 2016
  2. 2. 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
  3. 3. 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
  4. 4. Jigsaw Puzzle
  5. 5. Jigsaw Puzzle • How do we assemble a jigsaw puzzle? - Layout the pieces - Find the corners - Assemble the edges - Work toward the middle
  6. 6. Steps to Assemble the Puzzle
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. // 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
  12. 12. // 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
  13. 13. 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
  14. 14. Sencha Fleet
  15. 15. 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
  16. 16. 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
  17. 17. 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

×