Five Tips To Improve Your Ext Js Application

21,267 views

Published on

Ext JS apps can be complex. Out-of-the box, it's not apparent how to structure and build your new application. In this presentation, we will review some simple techniques to improve the design and maintainability of a complex Ext JS application.

Presented at the first Three Pillar Global meeting in Fairfax, VA, on January 19, 2010.

http://www.meetup.com/baltimore-dc-javascript-users/calendar/12219819/

Published in: Technology
4 Comments
20 Likes
Statistics
Notes
No Downloads
Views
Total views
21,267
On SlideShare
0
From Embeds
0
Number of Embeds
1,878
Actions
Shares
0
Downloads
389
Comments
4
Likes
20
Embeds 0
No embeds

No notes for slide

Five Tips To Improve Your Ext Js Application

  1. 1. Five Tips to Improve Your Ext JS Application
  2. 2. @jonathanjulian
  3. 3. 1. Define your own components
  4. 4. Be explicit
  5. 5. reusable modular maintainable
  6. 6. MyApp.MyPanel = function(config) { MyApp.MyPanel.superclass.constructor.call(this, Ext.applyIf(config, { title: 'default title' })); }; Ext.extend(MyApp.MyPanel, Ext.Panel, { // override methods go here }); Ext.reg('mypanel', MyApp.MyPanel);
  7. 7. var p = new MyApp.MyPanel({ title: ‘MY title’ }); var config = { xtype: ‘mypanel’, title: ‘MY title’ };
  8. 8. 2. Use an event manager
  9. 9. UI Logic
  10. 10. Event Manager Event Secondary Event(s)
  11. 11. MyApp.eventManager = new Ext.util.Observable(); MyApp.eventManager.addEvents('selectnode'); .. // in a tree click listener: MyApp.eventManager.fireEvent('selectnode', node); .. // after a grid is defined - wire it up to the tree: MyApp.eventManager.on('selectnode', grid.loadNodeData.createDelegate(grid));
  12. 12. consolidate code simplify adding features
  13. 13. 3. Override the framework properly
  14. 14. Do not edit the library files
  15. 15. DO NOT EDIT THE LIBRARY FILES
  16. 16. DO NOT EDIT THE LIBRARY FILES!
  17. 17. Ext.override
  18. 18. Ext.override(Ext.data.Store, { getByName: function(name) { this.getAt(this.findExact('name', name)); } });
  19. 19. overrides.js
  20. 20. directory structure
  21. 21. +-ext-3.1.0 +-ext-base.js +-ext-all.js +-resources +-css +-ext-all.css +-images +-default +-ux (User eXtensions) +-Ext.ux.tree.TreeFilterX.js +-project-name +-overrides.js +-application.js +-MoviesGrid.js
  22. 22. 4. Remember, it’s still a web app
  23. 23. JSLint
  24. 24. Speed or Perception of Speed
  25. 25. Content delivery: combine minimize gzip
  26. 26. browser cache with Expires header
  27. 27. 5. Prefer an Ext JS SPA to a classic "web app"
  28. 28. var grid = { id: <%= @article.id %>, border: <%= @article.size > 50 ? ‘true’ : ‘false’ %> xtype: ‘grid’, items: [ <%= generate_items(@article) %> ] };
  29. 29. var grid = { AVOID id: <%= @article.id %>, border: <%= @article.size > 50 ? ‘true’ : false %> xtype: ‘grid’, items: [ <%= generate_items(@article) %> ] };
  30. 30. UI - Ext JS J S O N Server Rails, PHP, JSP, ASP.NET,ColdFusion, Perl
  31. 31. "Don't buy a cow and then milk the goat."
  32. 32. "Don't buy a cow and then milk the goat."
  33. 33. jonathanjulian.com

×