Migrating from Ext JS 3 to 4
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Migrating from Ext JS 3 to 4

on

  • 7,511 views

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, ...

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.

Statistics

Views

Total Views
7,511
Views on SlideShare
6,957
Embed Views
554

Actions

Likes
3
Downloads
94
Comments
0

4 Embeds 554

http://www.sencha.com 551
http://sencha.site 1
http://ec2-184-73-169-84.compute-1.amazonaws.com 1
https://www.sencha.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Migrating from Ext JS 3 to 4 Presentation Transcript

  • 1. Wednesday, November 2, 11
  • 2. PRESENTATION NAME Ext JS 3 ➟ 4 MIGRATION Brian Moeskau, Sencha @bmoeskau Mats Bryntse, Bryntum @bryntumWednesday, November 2, 11
  • 3. Brian Moeskau @bmoeskau Cofounded Ext JS Founded Extensible Created Ext Calendar Pro Mats Bryntse @bryntum Founded Bryntum Created Ext Scheduler & Ext GanttWednesday, November 2, 11
  • 4. Overview Why Compatibility? Migration Strategy: The Four R’s For Component Makers Tips & TricksWednesday, November 2, 11
  • 5. Why Compatibility?Wednesday, November 2, 11
  • 6. The Compat Layer Is... A temporary shim for Ext 3.0+ Minimizes “blind” debugging A smart migration assistant Migrate in a controlled mannerWednesday, November 2, 11
  • 7. The Compat Layer Is NOT... A magic bullet A long-term solution 100% Ext 4.0 API coverage Quite as helpful for heavily overridden componentsWednesday, November 2, 11
  • 8. without compatibility...Wednesday, November 2, 11
  • 9. with compatibility...Wednesday, November 2, 11
  • 10. without compatibility... Uncaught TypeError: Object #<Object> has no method regWednesday, November 2, 11
  • 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
  • 12. Migration Strategy The Four R’sWednesday, November 2, 11
  • 13. 1 Get it... RenderedWednesday, November 2, 11
  • 14. 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
  • 15. Incompatible Components The compat layer will not help with: Charts PivotGrid Calendar added in 4.1!Wednesday, November 2, 11
  • 16. 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
  • 17. 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
  • 18. 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
  • 19. Be Bold Take a hatchet to it! Simplify the app entry point Start simple, build on each successWednesday, November 2, 11
  • 20. 2 Get it... Running RenderedWednesday, November 2, 11
  • 21. Fix Runtime Errors Element.child ⬄ Element.down Fix deprecated properties Exceptions not covered by the compat layerWednesday, November 2, 11
  • 22. Big “Pattern” Changes New class system define / extend / alias Data package models, new proxies, associations Grid subclasses ➟ features Tree loader / node ➟ store / modelWednesday, November 2, 11
  • 23. 3 Get it... “Right” Rendered RunningWednesday, November 2, 11
  • 24. Clean Up the Console Date, Function, String, Array myDate.format(‘Y-m-d’) ➟ Ext.Date.format(myDate, ‘Y-m-d’) Config / method / event renames myEl.addClass(‘foo’) ➟ myEl.addCls(‘foo’) Method / event argument changes [tool] handler: function(evt, el, panel) ➟ (evt, el, header)Wednesday, November 2, 11
  • 25. Make Changes in Bulk “Find-and-fix” (not replace) If you figure out a difficult fix... Locate other instances immediately, or Document the problem / fix, or Add the fix to the compat layer (and share!)Wednesday, November 2, 11
  • 26. Consider “Soft” Fixes Consider commenting out rather than replacing code: Teams / distributed development Not 100% sure about some fixes More easily spot regressions Post-migration assessment Documentation for migration #2Wednesday, November 2, 11
  • 27. 4 Get it... Refactored Rendered Running RightWednesday, November 2, 11
  • 28. Dynamic Loading // Enable dynamic loading Ext.Loader.setConfig({enabled: true}); Ext.Loader.setPath(Ext.migration, migration/); // Set up top-level dependencies Ext.require([ Ext.migration.App ]); Ext.onReady(function(){ // Launch the app Ext.create(Ext.migration.App).init(); });Wednesday, November 2, 11
  • 29. 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
  • 30. Form LayoutsWednesday, November 2, 11
  • 31. MVC Ext.application({ name: Pandora, autoCreateViewport: true, models: [Station, Song], stores: [Stations, RecentSongs], controllers: [Station, Song] });Wednesday, November 2, 11
  • 32. For Component MakersWednesday, November 2, 11
  • 33. “The compatibility layer is not quite as helpful for heavily overridden components” but...Wednesday, November 2, 11
  • 34. The Four R’s Still Apply!Wednesday, November 2, 11
  • 35. Get it Rendered Step 0: Understand your base / parent class (well) Grid and Tree Review existing overrides for validity Store / Record Review Ext CSS class usage “.ext-ie” ➟ “.x-ie”Wednesday, November 2, 11
  • 36. Get it Rendered Fix 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
  • 37. Get it Running Focus close to core / parent class Basic grid Add in feature by feature Column locking, grouping, editingWednesday, November 2, 11
  • 38. 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
  • 39. Get it “Right” Future-proof your CSS classes // Instead of overriding Ext CSS... .x-grid-row-over { background: #eee; }Wednesday, November 2, 11
  • 40. 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
  • 41. Get it Refactored Embrace the 4.0 class system js/sch.plugins.lines.js ➟ js/plugin/Lines.js Review code / class structureWednesday, November 2, 11
  • 42. Get it Refactored Never a better time to start unit testing! Find bugs earlier Bugs never happen twice unnoticed Spend less time bug-huntingWednesday, November 2, 11
  • 43. Get it Refactored Selenium http://seleniumhq.org Jasmine http://pivotal.github.com/jasmine Qunit http://docs.jquery.com/Qunit FuncUnit http://funcunit.com Siesta Coming soon ☺Wednesday, November 2, 11
  • 44. More details on the blogWednesday, November 2, 11
  • 45. Tips & TricksWednesday, November 2, 11
  • 46. Choosing a Browser Chrome === Fast Firebug for best general debugging Illuminations for Ext-specific debugging IE for... IE verification ;)Wednesday, November 2, 11
  • 47. Firebug “Unresponsive script” error: about:config > dom.max_script_run_time Blank console? Switch to Chrome. “Reboot” the browser regularlyWednesday, November 2, 11
  • 48. Document Fixes When 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
  • 49. Link Patches When 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 thrown Ext.panel.Table.override({ scrollByDeltaX: function(deltaX) { var horizontalScroller = this.getHorizontalScroller(); if (horizontalScroller) { horizontalScroller.scrollByDeltaX(deltaX); } } });Wednesday, November 2, 11
  • 50. Useful Compat Settings Ext.Compat.silent Ext.Compat.showErrors ?COMPAT_DEBUG=1Wednesday, November 2, 11
  • 51. Reading the Stack Trace For compat debugging, find the first application errorWednesday, November 2, 11
  • 52. “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
  • 53. Need Additional Help?Wednesday, November 2, 11
  • 54. Thanks! Blog post / Migration Guide / Screencasts http://bit.ly/3-to-4 @bmoeskau @bryntumWednesday, November 2, 11