Starting your application on the right foot is important. You’re probably excited to start coding, but it’s important to think about the architecture you’ll need. In this session, we’ll cover architectural best practices including the difference between MVC and MVVM, how to start architecting your application, and using the Ext JS router to your advantage.

1. Ext JS Architecture
Best Practices
Mitchell Simoens
Senior Software Engineer, Sencha
mitch@sencha.com
@LikelyMitch

2. Let’s Start Coding!
So excited to start coding the new project! Wait!!!!

3. Planning
• Feature list you get is a high level list.
- As a developer, you have to create a technical list.
• Plan your namespaces.
- Features are a great namespace outline.
- Sections may be namespacable.
- Don’t be afraid to subclass.
• Use view controllers instead of global controllers, where possible.
• Don’t forget about the router!
3

4. Namespacing

6. Sample Portal Namespaces
Portal.view.main.Main (Cmd generated)
Portal.view.main.Center
Portal.view.header.Container
Portal.view.user.login.Form

8. Sample Fiddle Namespaces
Fiddle.view.main.Main (Cmd generated)
Fiddle.view.main.Center
Fiddle.view.main.Menu
Fiddle.view.header.Container
Fiddle.view.header.Title
Fiddle.view.header.Framework
Fiddle.view.user.login.Form
Fiddle.view.user.login.Window
Fiddle.view.user.Header
Fiddle.view.user.Menu
Fiddle.view.user.Settings
Fiddle.view.file.Tree
Fiddle.view.file.Menu
Fiddle.view.editor.Container
Fiddle.view.editor.item.Item
Fiddle.view.editor.item.Data
Fiddle.view.editor.item.Direct
Fiddle.view.search.Container
Fiddle.view.search.Form
Fiddle.view.search.Results

9. Code Reuse

10. Means of Code Reuse
• Subclassing/Abstracts
- Great for common UIs (think grids).
• Plugin
- Share common functionality with different components. Methods/configs not on class prototype.
• Mixin
- Not used much in apps. Like plugins but applies methods/configs onto the class prototype.
• Singleton
- Great for logic extraction.
• Cmd Package
- Share among many apps, can have any of the above.

11. MVC vs MVVM

12. MVC vs MVVM
Which to use and why?
• Debate is only on which controller to use really.
• Debate is really not a valid debate.
• Use them both! Depends on the need.
- Ext.app.Controller is global.
• Since ViewController was created, Controller shouldn’t listen to user interactions.
- Ext.app.ViewController is local.
• Think views as widgets.
• Shouldn’t know about anything other than the view it’s attached to.

13. Controller/ViewController Communication
// don’t do this
var controller = MyApp.app.getController(‘Foo’);
controller.doSomething();
----------
// do this instead
this.fireEvent(‘didsomething’, this);
// in other controller
listen : {
controller : {
‘*’ : {
didsomething : ‘doSomething’
}
}
}
// or use global events
Ext.fireEvent(‘didsomething’, this);
// in other controller
listen : {
global : {
didsomething : ‘doSomething’
}
}
// or
Ext.on(‘didsomething’, function() {});

14. Router

15. Router
Plan to use it before it’s too late!
• Allows the browser’s back/forward button to navigate in your app.
- Do not undervalue this!
• Allows deep linkage into your app.
- Do not undervalue this!
- Bookmark or email a link.
• Let routes do the work, not the view listeners.
- Become route centric!
• Can be hard to refactor at the end to support routes. Support it at the beginning.

16. onItemDblClick : function(gridview, record) {
this.redirectTo(‘user/’ + record.getId());
}
routes : {
’user:id’ : {
action : ‘onUser’,
conditions : {
//make id optional but only digits
‘:id’ : ‘(?:(?:/){1}(d+))?’
}
}
},
onUser : function(id) {
if (!this.hasUserGrid()) {
this.showUserGrid();
}
if (id) {
this.showUserForm(id);
} else if (this.hasUserForm()) {
this.destroyUserForm();
}
}
Route Centricity
• Use redirectTo more instead of doing
the thing in the event listener.
• Requires a change of thought.
• Reaction to a user interaction is more
async.

17. To Config or Not To Config

18. config : {
userId : null
},
applyUserId : function(id) {
return parseInt(id);
},
updateUserId : function(id) {
Ext.Ajax.request({
url : ‘/user’,
params : {
id : id
},
scope : this,
success : this.onUserLoad,
failure : this.onUserFail
});
}
Configs
• Use the getter and setter, not the
actual property
• Use applier to transform and sanitize
the value *if needed
• Use updater to react to value changes
- Use this to make your class dynamic

19. Route Reaction
onUser : function(id) {
if (!this.hasUserGrid()) {
this.showUserGrid();
}
if (id) {
this.showUserForm(id);
} else if (this.hasUserForm()) {
this.destroyUserForm();
}
}
showUserForm : function(id) {
var form = this.getUserForm();
if (form) {
form.setUserId(id);
} else {
this.createUserForm(id);
}
}

20. When to use a config
Should everything be a config?
• Sure
• There is a cost to generating the getter/setter
• There is a cost when initConfig is called
• Weigh the need with the cost
- Your class can be more dynamic and reactive
• Remember to clean up!
- Unless you are using Ext JS 6.2.0+ (thank you reaper!)