older Sencha versions?! • Demand for new apps, takes resources! • Application seems stable! • Application is complex! • Original developers are not in the company anymore!
updates! • Hard to maintain and support! • No Sencha support! • Performance, memory usage ! • Doesn’t work on mobile! • No access to new Sencha features! • Changing business demands! 6!
in legacy Ext JS versions! Pros • Least effort (short term)! • Current team has legacy Ext JS skills! Cons • Does not remove risks! • The longer you leave migration, the more risk increases! • Investing in an app that has to be migrated! • Isn’t optimized for mobile! 7!
3 & below! • Data Layer -> Model! • Component Definition -> View! • Data between View and Model -> ViewModel! • Business logic, Event handlers -> ViewController ! 25!
• Every fields needs to be declared in Model! • Model Relations was difficult! Ext JS 6 • Set fields for converted data only! • Custom field types / validations! • Simplified Associations! • Chained Stores! ! 58! Data package improvements!
Touch 2 & below • Odd behavior on a desktop! ! Ext JS 6 • Modern toolkit on a desktop:! • List can scroll with a mouse! • Keyboard navigation! 60! Introduced in Ext JS 6
JS 6 project, with the same namespace! 65! Modern only (Migrating Sencha Touch mobile app)! Classic only (Migrating Ext JS desktop app)! Simple migration!
Requirement had no matching files (Ext.data.UuidGenerator) – myapp/app/model/MyModel:5:7 Look in the API Docs, and see: Ext.data.UuidGenerator is deprecated, ! use Ext.data.identifier.Uuid instead.! ! • root in the Proxy reader is deprecated. Use rootProperty instead.! ! • Ext JS 6 Stores don’t automatically set the storeId to the name of the class! ! ! 72! Simple migration!
• When you generate a new project, the microloader expects the new viewport is: ! app/view/main/Main.js! ! Therefore, your browser errors this:! GET http://localhost:1841/myapp/app/view/main/Main.js?_dc=1402907827207 404 (Not Found) bootstrap.js:511 [E] [Ext.Loader] Some requested files failed to load. • Fix, this by renaming the Viewport.js file or setting the mainView, property in app.js! 73! Simple migration!
• Charts in Ext JS 6 are packages. You can choose to take the legacy SVG charts or the modern Canvas charts. When you see this error:! ! [ERR] com.sencha.exceptions.ExNotFound: Unknown definition for dependency : Ext.chart.Chart ! Use this fix in app.json:! "requires": [ "charts" //ext-charts for legacy charts ], 74! Simple migration!
No longer you need to define every field in the fields array! • You retrieve the data from a feed! • You set fields, only for data conversion! 75! Simple migration!
in the Controller is deprecated. Use onLaunch() instead! ! • Pictos icons are replaced by FontAwesome, you can set it like this:! iconCls: ‘x-fa fa-cog’ ! • Sencha Touch validations are now called validators TIP: http://docs.sencha.com/extjs/6.0/api_diffs/600_modern_diff.html! 76! Simple migration!
4 & Sencha Touch 2! • Create view subfolders! • Create a ViewModel (Ext.app.ViewModel), wire up the data (stores)! • Migrate Global Controllers to ViewControllers (Ext.app.ViewController) • Link VC and VM to View! • TIP: Generate a view with Sencha Cmd (sencha generate view MyView), generates the subfolder with the 3 classes.! 82! Advanced migration!
• Copy over the Ext JS 4 / 5 contents of app to the classic/src folder! • Copy over the Sencha Touch contents of app folder to the modern/src folder! • (You can follow the approach of MVVM migration)! 94! Universal app migration!
"builds": { "desktopprofile": { "toolkit": "classic", "theme": "theme-triton“, }, "iphoneprofile": { "toolkit": "modern", "theme": "theme-cupertino", } },! Every profile can have a Toolkit and a Theme. You will need to create builds for every profile. sencha app build Universal app migration!
compatible with Ext JS 5! 107! • It shares the same core! • You just need to re-generate the project with the Ext JS 6 sdk & copy over! • Additionally you want to switch to Triton theme in app.json! • You might want to create universal views!
Services team stands ready to provide you and your team with hands-on expert assistance in the use of Sencha frameworks and tools! 109! Enterprise mentoring and architectural planning! Embedded development expertise! Code review and best practices knowledge transfer! Custom application and component development!
support and maintenance service available to commercial license holders, provides access to software patches and updates! • Technical advice for all stages of application development process, from design through to deployment! 110! Free upgrade to next major release! Access to Premium Forums! Early access to custom bug fixes! Access to online ticketing system! Performance tuning! Remote troubleshooting!
savelee
sogaoh
lycorp_recruit_jp
tomoki10
coosuke
segavvy
shinyakato_
aiandrox
nenonaninu
mikanichinose
smartbank
masaaki_k
goataka
productmarketing
3n
brad_frost
ammeep
orderedlist
vanstee
smashingmag
philnash
csswizardry
jcasabona
eitanlees
kneath
![CONFIDENTIAL • Sencha Inc. ©2015 Some examples! • [ERR] C2008:](https://files.speakerdeck.com/presentations/7421c4939c9a4cbc97be8e7549d3ed3f/slide_71.jpg){kind=link}
