migrating from ext js 3 to 4
DESCRIPTION
Anyone with existing code based on Ext 3.x or earlier will sooner or later want to start taking advantage of the new capabilities offered by Ext 4. From MVC to charting to infinite grid scrolling, there are many reasons to upgrade, but where to begin? This session will provide practical strategies for migrating to Ext 4, including following the “Four R’s” of migration, dealing with common problems and pitfalls, debugging best practices, migrating custom components and much more. We’ll introduce the Ext 3 Compatibility layer and outline how it can minimize the time and effort required to convert your existing applications to Ext 4.Brian Moeskau has over 17 years of experience as a software developer and technical architect. His focus for the past decade has been on web application development and client side framework development. An original cofounder of Ext JS, Brian has been deeply involved in the Ext framework since even before version 1.0. Now as a developer with Sencha Brian continues to work on Ext JS and most recently wrote the Ext 3 compatibility layer that shipped with Ext 4.Mats Bryntse has been a software developer for over 10 years, working mainly with JavaScript and .NET. For the past four years he’s been fully focused on Ext JS and he is frequently supporting fellow users in the Sencha forums. Mats also founded two Ext JS user groups in both San Francisco and Malmö, which combined have over 400 members.Currently Mats is running his own company Bryntum, which creates advanced components and extensions for Ext JS and Sencha Touch.TRANSCRIPT
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