Migrating from Ext JS 3 to 4
-
Upload
sencha -
Category
Technology
-
view
7.529 -
download
4
description
Transcript of Migrating from Ext JS 3 to 4
Wednesday, November 2, 11
PRESENTATION NAME
Brian Moeskau, SenchaMats Bryntse, Bryntum
@bmoeskau@bryntum
Ext JS 3 ➟ 4 MIGRATIONWednesday, November 2, 11
Brian Moeskau@bmoeskauCofounded Ext JSFounded ExtensibleCreated Ext Calendar Pro
Mats Bryntse@bryntumFounded BryntumCreated Ext Scheduler & Ext Gantt
Wednesday, November 2, 11
Overview
Why Compatibility?Migration Strategy: The Four R’s
For Component MakersTips & Tricks
Wednesday, November 2, 11
Why Compatibility?
Wednesday, November 2, 11
The Compat Layer Is...A temporary shim for Ext 3.0+
Minimizes “blind” debugging
A smart migration assistant
Migrate in a controlled manner
Wednesday, November 2, 11
The Compat Layer Is NOT...A magic bullet
A long-term solution
100% Ext 4.0 API coverage
Quite as helpful for heavily overridden components
Wednesday, November 2, 11
without compatibility...
Wednesday, November 2, 11
with compatibility...
Wednesday, November 2, 11
without compatibility...
Uncaught TypeError: Object #<Object> has no method 'reg'
Wednesday, November 2, 11
with compatibility...
[DEPRECATED][4.0][Ext] reg: Calling a separate function to register custom types is no longer necessary. Switch your class definition to use Ext.define with "widget.migration-navtree" as the alias config.
Wednesday, November 2, 11
Migration StrategyThe Four R’s
Wednesday, November 2, 11
Get it...
Rendered
1
Wednesday, November 2, 11
Install the Compat Layer
<!-- Ext 4 --><script src="path/to/ext-all-debug.js"></script>
<!-- Ext 3.x compat layer --><script src="path/to/ext3-core-compat.js"></script><script src="path/to/ext3-compat.js"></script>
<!-- Application --><script src="myApp.js"></script>
Wednesday, November 2, 11
Incompatible ComponentsThe compat layer will not help with:
Charts
PivotGrid
Calendar added in 4.1!
Wednesday, November 2, 11
Fix Old Constructors
// 2.x syntax, BAD:Ext.ux.Foo = function(config){ Ext.apply(this, config); Ext.ux.Foo.superclass.constructor.call(this); // more constructor logic}Ext.extend(Ext.ux.Foo, Ext.Component, { bar: function(){ // etc. }});
Wednesday, November 2, 11
Fix Old Constructors
// 3.x syntax, better:Ext.ux.Foo = Ext.extend(Ext.Component, { constructor: function(config){ Ext.ux.Foo.superclass.constructor.call(this); // more constructor logic } bar: function(){ // etc. }});
Wednesday, November 2, 11
Fix Old Constructors
// 4.0 syntax, best:Ext.define('Ext.ux.Foo', { extend: 'component', constructor: function(config){ this.callParent(arguments); // more constructor logic }, bar: function(){ // etc... }});
Wednesday, November 2, 11
Be BoldTake a hatchet to it!
Simplify the app entry point
Start simple, build on each success
Wednesday, November 2, 11
2
Get it...
Running
Rendered
Wednesday, November 2, 11
Fix Runtime ErrorsElement.child ⬄ Element.down
Fix deprecated properties
Exceptions not covered by the compat layer
Wednesday, November 2, 11
Big “Pattern” ChangesNew class systemdefine / extend / alias
Data packagemodels, new proxies, associations
Gridsubclasses ➟ features
Treeloader / node ➟ store / model
Wednesday, November 2, 11
3
Get it...
Right”“RenderedRunning
Wednesday, November 2, 11
Clean Up the ConsoleDate, Function, String, ArraymyDate.format(‘Y-m-d’) ➟ Ext.Date.format(myDate, ‘Y-m-d’)
Config / method / event renamesmyEl.addClass(‘foo’) ➟ myEl.addCls(‘foo’)
Method / event argument changes[tool] handler: function(evt, el, panel) ➟ (evt, el, header)
Wednesday, November 2, 11
Make Changes in Bulk“Find-and-fix” (not replace)
If you figure out a difficult fix...Locate other instances immediately, orDocument the problem / fix, orAdd the fix to the compat layer (and share!)
Wednesday, November 2, 11
Consider “Soft” FixesConsider commenting out rather than replacing code:
Teams / distributed developmentNot 100% sure about some fixesMore easily spot regressionsPost-migration assessmentDocumentation for migration #2
Wednesday, November 2, 11
4
RenderedRunningRight
Get it...
Refactored
Wednesday, November 2, 11
Dynamic Loading
// Enable dynamic loadingExt.Loader.setConfig({enabled: true});Ext.Loader.setPath('Ext.migration', 'migration/');
// Set up top-level dependenciesExt.require([ 'Ext.migration.App']);
Ext.onReady(function(){ // Launch the app Ext.create('Ext.migration.App').init();});
Wednesday, November 2, 11
Mixins
Ext.define('Ext.AbstractComponent', { mixins: { observable: 'Ext.util.Observable', animate: 'Ext.util.Animate', elementCt: 'Ext.util.ElementContainer', renderable: 'Ext.util.Renderable', state: 'Ext.state.Stateful' }, ...});
Wednesday, November 2, 11
Form Layouts
Wednesday, November 2, 11
MVC
Ext.application({ name: 'Pandora', autoCreateViewport: true, models: ['Station', 'Song'],
stores: ['Stations', 'RecentSongs'],
controllers: ['Station', 'Song']});
Wednesday, November 2, 11
For Component Makers
Wednesday, November 2, 11
“The compatibility layer is not quite as helpful
for heavily overridden components”
but...
Wednesday, November 2, 11
The Four R’sStill Apply!
Wednesday, November 2, 11
Get it RenderedStep 0: Understand your base / parent class (well)Grid and Tree
Review existing overrides for validityStore / Record
Review Ext CSS class usage“.ext-ie” ➟ “.x-ie”
Wednesday, November 2, 11
Get it RenderedFix custom component registration
// 3.x:Ext.reg('myclass', Ext.ux.MyClass);
// 4.0 (temporary):Ext.reg('myclass', 'Ext.ux.MyClass');
// 4.0 (ultimate fix):Ext.define('Ext.ux.MyClass', { alias: 'widget.myclass', // etc.});
Wednesday, November 2, 11
Get it RunningFocus close to core / parent classBasic grid
Add in feature by featureColumn locking, grouping, editing
Wednesday, November 2, 11
Get it “Right”Use mixins for easier reusability
Ext.define("Sch.data.EventStoreAdaptions", { adaptEventStore : function() { this.insert = this.modifiedInsert; this.remove = this.modifiedRemove; }, modifiedInsert : function() { // etc. }, modifiedRemove : function() { // etc. }});
Wednesday, November 2, 11
Get it “Right”Future-proof your CSS classes
// Instead of overriding Ext CSS....x-grid-row-over { background: #eee;}
Wednesday, November 2, 11
Get it “Right”Future-proof your CSS classes
// Add your own rules:.mygrid-itemover { background: #eee;}
Ext.define('MyGrid', { extend: 'Ext.grid.Panel', viewConfig: { overItemCls: 'mygrid-itemover' }});
Wednesday, November 2, 11
Get it RefactoredEmbrace the 4.0 class systemjs/sch.plugins.lines.js ➟ js/plugin/Lines.js
Review code / class structure
Wednesday, November 2, 11
Get it RefactoredNever a better time to start unit testing!
Find bugs earlierBugs never happen twice unnoticedSpend less time bug-hunting
Wednesday, November 2, 11
Get it RefactoredSeleniumhttp://seleniumhq.org
Jasminehttp://pivotal.github.com/jasmine
Qunithttp://docs.jquery.com/Qunit
FuncUnithttp://funcunit.com
SiestaComing soon ☺
Wednesday, November 2, 11
More details on the blog
Wednesday, November 2, 11
Tips & Tricks
Wednesday, November 2, 11
Choosing a BrowserChrome === Fast
Firebug for best general debugging
Illuminations for Ext-specific debugging
IE for... IE verification ;)
Wednesday, November 2, 11
Firebug“Unresponsive script” error:about:config > dom.max_script_run_time
Blank console? Switch to Chrome.
“Reboot” the browser regularly
Wednesday, November 2, 11
Document FixesWhen overriding private code, document well!
Ext.define('Ext.ux.MyGrid', { extend: 'Ext.grid.Panel', constructor: function(config){ this.callParent(arguments);
// HACK / NOTE / TODO: // Reading private member scrollerOwner if (this.scrollerOwner) { ... } }});
Wednesday, November 2, 11
Link PatchesWhen patching, link to the bug report
// http://www.sencha.com/forum/link_to_your_report.html// 1. Render a basic grid panel// 2. Call grid.scrollByDeltaX(100)// 3. Verify no exception is thrownExt.panel.Table.override({ scrollByDeltaX: function(deltaX) { var horizontalScroller = this.getHorizontalScroller(); if (horizontalScroller) { horizontalScroller.scrollByDeltaX(deltaX); } }});
Wednesday, November 2, 11
Useful Compat SettingsExt.Compat.silent
Ext.Compat.showErrors
?COMPAT_DEBUG=1
Wednesday, November 2, 11
Reading the Stack TraceFor compat debugging, find the first application error
Wednesday, November 2, 11
“But I Can’t Migrate X!”Sandbox with Ext 4
Build your own compatibility layer
Wrap with IFrames
Ideally, everything should be migrated.
Realistically, do whatever makes sense for you.
Wednesday, November 2, 11
Need Additional Help?
Wednesday, November 2, 11
Thanks!
Blog post / Migration Guide / Screencasts
http://bit.ly/3-to-4
@bmoeskau@bryntum
Wednesday, November 2, 11