Sencha Class System, Jacky Nguyen

The Sencha Class System
Jacky Nguyen, Sencha

jacky@sencha.com @nktpro

Wednesday, November 2, 11

Best User Experience


Better
Developer Experience


Class System

Event System

Data Package

Widgets & Layouts

...


Prototype-based Class-based

=
Predictability
Sencha
Class System
Flexibility Programmer
Familiarity


✓Consistent
✓Familiar
Learn

✓DRY
✓Debuggable
Develop ✓Testable

✓Automatic dependency resolution
Deploy

Better Developer Experience

Coding Convention


Namespacing & Code Organization

1. OrganizationName.group[.subgroup].ClassName
2. One class per file
3. File name matches class name

‣ Ext.chart.Label -> Ext/chart/Label.js
‣ Ext.data.writer.Xml -> Ext/data/writer/Xml.js
‣ MyApp.field.Password -> MyApp/field/Password.js


Class Definition


The Good Old Ext.extend()
Ext.ns('My.sample');

My.sample.Person = Ext.extend(Object, {
constructor: function(name) {
this.name = name;
},

walk: function(steps) {
alert(this.name + ' is walking ' + steps + ' steps');
}
});


Introducing Ext.define()
Ext.define('My.sample.Person', {
this.name = name;
},

}
});

var tommy = new My.sample.Developer('Tommy');
tommy.walk(5); // alerts 'Tommy is walking 5 steps'


Ext.define() vs Ext.extend()
this.name = name;
},

}
});

‣Class deﬁnition is more than just inheritance
‣Automatic namespace allocation
‣Classes are now aware of their own names
‣Asynchronous vs. synchronous


Inheritance


Inheritance
this.name = name;
},
}
});

Ext.define('My.sample.Developer', {
extend: 'My.sample.Person',
code: function(language) {
alert(this.name + ' is coding in ' + language);
}
});

tommy.walk(5); // 'Tommy is walking 5 steps
tommy.code('JavaScript'); // 'Tommy is coding in JavaScript'


Inheritance
code: function(language) { /* ... */ },
if (steps > 100) {
alert('Are you serious? That's too far! I'm lazy...');
}
else {
My.sample.Developer.superclass.walk.apply(this, arguments);
this.callParent(arguments);
}
}
});

tommy.walk(50); // alerts "Tommy is walking 50 steps"
tommy.walk(101); // alerts "Are you serious? That's too far! I'm
lazy..."


Mixins


Mixins

Sing Performer

Play Instruments Composer

Compose Songs Singer-songwriter


Mixins
Ext.define('My.ability.Sing', {
sing: function(songName) {
alert("I'm singing " + songName);
}
});

Ext.define('My.ability.PlayInstruments', {
play: function(instrument) {
alert("I'm playing " + instrument);
}
});

Ext.define('My.ability.ComposeSongs', {
compose: function(songName) {
alert("I'm composing " + songName);
}
});


Mixins
Ext.define('My.sample.Performer', {
mixins: {
canSing: 'My.ability.Sing',
canPlay: 'My.ability.PlayInstruments'
}
});

Ext.define('My.sample.Composer', {
mixins: {
canPlay : 'My.ability.PlayInstruments',
canCompose: 'My.ability.ComposeSongs'
}
});

Ext.define('My.sample.SingerSongwriter', {
mixins: {
canSing : 'My.ability.Sing',
canPlay : 'My.ability.PlayInstruments',
canCompose: 'My.ability.ComposeSongs'
}
});

Mixins
Ext.define('My.sample.Performer', {
mixins: { prototype of
canSing: 'My.ability.Sing',
canPlay: 'My.ability.PlayInstruments'
},

sing: function() {
alert("Here we go!");

this.mixins.canSing.sing.call(this);

alert("I'm done singing!");
}
});

var jamie = new My.sample.Performer("Jamie");
jamie.sing("November Rain"); // alerts "Here we go!"
// alerts "I'm singing November Rain"
// alerts "I'm done singing!";


Dependency
Management


Dependency Management

<head>

<script src="ext.js"></script>
src="ext-all-debug.js"></script>

<script src="My/sample/Person.js"></script>
<script src="My/ability/PlayInstruments.js"></script>
src="My/sample/Location.js"></script>
<script src="My/ability/Sing.js"></script>
src="My/sample/Developer.js"></script>
<script src="My/sample/Performer.js"></script>
<script>
var tommy = new My.sample.Developer('Tommy'); 'Tommy');
Ext.create('My.sample.Developer',
var jamie = new My.sample.Performer('Jamie'); 'Jamie');
Ext.create('My.sample.Performer',
</script>
</head>

Dependency Management

<head>

<script src="ext.js"></script>
<script>
Ext.require([
'My.sample.Developer',
'My.sample.Performer'
]);

Ext.onReady(function() {
var jamie = new My.sample.Performer('Jamie');
});
</script>
</head>

Config


Config
name: 'Anonymous',
age: 0,
gender: 'Male',

constructor: function(config) {
config = config || {};

Ext.apply(this, config);
}
});

var robert = new My.sample.Person({
name: 'Robert',
age: 21
});


Config
name: 'Anonymous',
age: 0,
gender: 'Male',

if (Ext.isObject(config)) {
if (config.hasOwnProperty('name')) {
this.name = config.name;
}
if (config.hasOwnProperty('age')) {
this.age = config.age;
}
if (config.hasOwnProperty('gender')) {
this.gender = config.gender;
}
}
}
});


Config
name: 'Anonymous',
age: 0,
gender: 'Male',

if (Ext.isObject(config)) {
if (config.hasOwnProperty('name')) {
this.setName(config.name);
}
if (config.hasOwnProperty('age')) {
this.setAge(config.age);
}
if (config.hasOwnProperty('gender')) {
this.setGender(config.gender);
}
}
},
});


setName: function(name) {
this.name = name;
return this;
},
getName: function() {
return this.name;
},

setAge: function(age) {
this.age = age;
return this;
},
getAge: function() {
return this.age;
},

setGender: function(gender) {
this.gender = gender;
return this;
},
getGender: function() {
return this.gender;
}

Config
config: {
name: 'Anonymous',
age: 0,
gender: 'Male'
},

this.initConfig(config);
}
});

var robert = new My.sample.Person({
name: 'Robert',
age: 21
});

robert.setName('Rob');
alert(robert.getAge()); // alerts '21'
robert.setAge(22);
alert(robert.getAge()); // alerts '22'

Config: Deep Merging
extend: My.sample.Person,
config: {
level: 'Junior',
location: {
city: 'Unknown', state: 'Unknown', country: 'Unknown'
}
}
});

var edward = new My.sample.Developer({
age: 26,
level: 'Senior',
location: { city: 'Palo Alto', state: 'CA', country: 'USA' }
});

edward.setName('Edward');
alert(edward.getLocation().city); // alerts 'Palo Alto'


Config: Setter’s Process
✓Validation
✓Filtering
Before ✓Transformation

✓Actual assignment
Set

✓Notiﬁcation
✓Updating dependencies
After


Config: Magic Methods
getFoo()
return this.foo

setFoo()

Before processedValue = applyFoo(newValue, oldValue)

Set this.foo = processedValue

After updateFoo(processedValue, oldValue)


Config
/* ... */
applyAge: function(age) {
if (typeof age != 'number' || age < 0) {
alert("Invalid age, must be a positive number");
return;
}
return age;
},
updateAge: function(newAge, oldAge) {
alert("Age has changed from " + oldAge + " to " + newAge);
}
});

var aaron = new My.sample.Person({
name: 'Aaron',
age: -100
}); // alerts "Invalid age, must be a positive number"

alert(aaron.getAge()); // alerts 0
alert(aaron.setAge(35)); // alerts "Age has changed from 0 to 35"
alert(aaron.getAge()); // alerts 35

Dependency Injection
with Ext.factory()


Ext.define('My.sample.Location', {
config: {
city: 'Unknown',
state: 'CA',
country: 'USA'
}
});

var nicolas = new My.sample.Developer({
location: { city: 'Palo Alto' }
});

alert(nicolas.getLocation() instanceof My.sample.Location); //alerts true
alert(nicolas.getLocation().getCity()); // alerts 'Palo Alto'

var nicolas = new My.sample.Developer({
location: new My.sample.Location({ city: 'Austin', state: 'TX' })
});

alert(nicolas.getLocation().getState()); // alerts 'TX'


nicolas.setLocation({
city: 'Austin'
}); // nicolas.getLocation().setCity('Austin');

nicolas.setLocation(new My.sample.Location({
city: 'Austin',
state: 'TX'
}));

nicolas.setLocation(new My.sample.DetailedLocation({
longitude: -122.18235,
latitude: 37.44923
}));


Ext.factory()

config: {
level: 'Junior',
location: {}
},

applyLocation: function(location, currentLocation) {
return Ext.factory(
location, My.sample.Location, currentLocation
);
}
}); given value from setLocation()
default Class existing instance


Debugging


Debugging: Nightmare


Debugging: Dream Comes True


Deployment


Deployment

Ext.Loader.history === [
'My.sample.Person',
'My.sample.Location',
'My.sample.Developer',
'My.ability.Sing',
'My.ability.PlayInstruments',
'My.ability.ComposeSongs',
'My.sample.Performer',
Concatenate Minify app.js
'My.sample.Composer',
'My.sample.SingerSongwriter',
/* ... */
];

http://www.sencha.com/products/sdk-tools


Summary


Thank
you!

Sencha Class System, Jacky Nguyen

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Mehr von Sencha

Mehr von Sencha (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Sencha Class System, Jacky Nguyen