Your SlideShare is downloading. ×
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Five Tips To Improve Your Ext Js Application
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Five Tips To Improve Your Ext Js Application

19,501

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 …

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
18 Likes
Statistics
Notes
No Downloads
Views
Total Views
19,501
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
370
Comments
4
Likes
18
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Five Tips to Improve Your Ext JS Application
  • 2. @jonathanjulian
  • 3. 1. Define your own components
  • 4. Be explicit
  • 5. reusable modular maintainable
  • 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. var p = new MyApp.MyPanel({ title: ‘MY title’ }); var config = { xtype: ‘mypanel’, title: ‘MY title’ };
  • 8. 2. Use an event manager
  • 9. UI Logic
  • 10. Event Manager Event Secondary Event(s)
  • 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. consolidate code simplify adding features
  • 13. 3. Override the framework properly
  • 14. Do not edit the library files
  • 15. DO NOT EDIT THE LIBRARY FILES
  • 16. DO NOT EDIT THE LIBRARY FILES!
  • 17. Ext.override
  • 18. Ext.override(Ext.data.Store, { getByName: function(name) { this.getAt(this.findExact('name', name)); } });
  • 19. overrides.js
  • 20. directory structure
  • 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. 4. Remember, it’s still a web app
  • 23. JSLint
  • 24. Speed or Perception of Speed
  • 25. Content delivery: combine minimize gzip
  • 26. browser cache with Expires header
  • 27. 5. Prefer an Ext JS SPA to a classic "web app"
  • 28. var grid = { id: <%= @article.id %>, border: <%= @article.size > 50 ? ‘true’ : ‘false’ %> xtype: ‘grid’, items: [ <%= generate_items(@article) %> ] };
  • 29. var grid = { AVOID id: <%= @article.id %>, border: <%= @article.size > 50 ? ‘true’ : false %> xtype: ‘grid’, items: [ <%= generate_items(@article) %> ] };
  • 30. UI - Ext JS J S O N Server Rails, PHP, JSP, ASP.NET,ColdFusion, Perl
  • 31. "Don't buy a cow and then milk the goat."
  • 32. "Don't buy a cow and then milk the goat."
  • 33. jonathanjulian.com

×