How to Re-Architect a JavaScript Class System

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

How to Re-Architect a JavaScript Class System Olga Petrova, @tyoushe Developer Advocate, Sencha

Slide 3

Slide 3 text

Olga Petrova, @tyoushe Evolution of Standards and Technologies

Slide 4

Slide 4 text

Olga Petrova, @tyoushe

Slide 5

Slide 5 text

Olga Petrova, @tyoushe

Slide 6

Slide 6 text

Olga Petrova, @tyoushe What Makes Technology Future-Proof?

Slide 7

Slide 7 text

Olga Petrova, @tyoushe

Slide 8

Slide 8 text

Olga Petrova, @tyoushe

Slide 9

Slide 9 text

Olga Petrova, @tyoushe

Slide 10

Slide 10 text

Olga Petrova, @tyoushe Inheritance via Prototyping function MyComponent() {} MyComponent.prototype.init = function() { //... } function MyChildComponent() {} MyChildComponent.prototype = Object.create(new MyComponent()); MyChildComponent.prototype.destroy = function() { //... } var cmp = new MyChildComponent(); cmp.init(); cmp.destroy();

Slide 11

Slide 11 text

Olga Petrova, @tyoushe

Slide 12

Slide 12 text

Olga Petrova, @tyoushe

Slide 13

Slide 13 text

Olga Petrova, @tyoushe

Slide 14

Slide 14 text

Olga Petrova, @tyoushe

Slide 15

Slide 15 text

Olga Petrova, @tyoushe Ext JS Class System ✔ Inheritance ✔ Conﬁg properties ✔ Dependencies ✔ Mixins ✔ Overrides ✔ Build tool

Slide 16

Slide 16 text

Olga Petrova, @tyoushe Ext JS Class Ext.define('My.own.Component', { extend: 'Ext.Component', requires: ['My.Component.Dependency'], myProperty: true, myMethod: function() { //... this.callParent(arguments); }, statics: { staticMethod: function() { //... } } });

Slide 17

Slide 17 text

Olga Petrova, @tyoushe Ext JS Config Properties Ext.define('My.own.Component', { extend: 'Ext.Component‘, config: { myConfig: 'My Text' }, applyMyConfig: function(newTitle, oldTitle) { //implement validation return newTitle; }, updateMyConfig: function(newTitle, oldTitle) { //implement side effects } });

Slide 18

Slide 18 text

Olga Petrova, @tyoushe Ext JS Overrides var MyComponent = new Ext.Component({}); Ext.override(MyComponent, { myProperty: 'My Text', myMethod: function () { //... } });

Slide 19

Slide 19 text

Olga Petrova, @tyoushe Ext JS Mixins Ext.define('Mixin‘, { processData: function(data) { /**/ } }); Ext.define('MyComponent‘, { mixins: { myMixin: 'Mixin' }, processData: function(data) { //... this.mixins.myMixin.processData.call(this); } });

Slide 20

Slide 20 text

Olga Petrova, @tyoushe 10K CUSTOMERS WORLDWIDE 2M SENCHA DEVS WORLDWIDE 7.2M PRODUCT DOWNLOADS 500K ACTIVE FORUM MEMBERS 60% of Fortune 100 Companies Rely on Sencha

Slide 21

Slide 21 text

Olga Petrova, @tyoushe

Slide 22

Slide 22 text

Olga Petrova, @tyoushe ECMAScript6 Class system

Slide 23

Slide 23 text

Olga Petrova, @tyoushe

Slide 24

Slide 24 text

Olga Petrova, @tyoushe

Slide 25

Slide 25 text

Olga Petrova, @tyoushe

Slide 26

Slide 26 text

Olga Petrova, @tyoushe ECMAScript6 Class Systems ✔ Inheritance ✔ Dependencies ✔ Build tool ❌ Conﬁg properties ❌ Mixins ❌ Overrides

Slide 27

Slide 27 text

Olga Petrova, @tyoushe

Slide 28

Slide 28 text

Olga Petrova, @tyoushe + =

Slide 29

Slide 29 text

Olga Petrova, @tyoushe + =

Slide 30

Slide 30 text

Olga Petrova, @tyoushe

Slide 31

Slide 31 text

Olga Petrova, @tyoushe Decorator pattern is a design pattern that allows behavior to be added to an individual object, dynamically, without affecting the behavior of other objects from the same class

Slide 32

Slide 32 text

Olga Petrova, @tyoushe JavaScript Decorators

Slide 33

Slide 33 text

Olga Petrova, @tyoushe @wrap Method class C { @wrap(f) method() { } } class C { method() { } } C.prototype.method = f(C.prototype.method); =>

Slide 34

Slide 34 text

Olga Petrova, @tyoushe @wrap Class @wrap(f) class C { } class C { } C = f(C); =>

Slide 35

Slide 35 text

Olga Petrova, @tyoushe JavaScript Class Fields

Slide 36

Slide 36 text

Olga Petrova, @tyoushe Class Fields class MyComponent { myField = 42; }

Slide 37

Slide 37 text

Olga Petrova, @tyoushe ECMAScript 6 to Ext JS Class Systems ✔ Inheritance ✔ Dependencies ✔ Build tool ✔ Config properties @define for class & @config for class fields ✔ Mixins @define for class ✔ Overrides @override for class

Slide 38

Slide 38 text

Olga Petrova, @tyoushe Class @define({ prototype: { myProperty: "My text" }, static: { myStaticProperty: 42 } }) class MyOwnComponent extends Component { // }

Slide 39

Slide 39 text

Olga Petrova, @tyoushe Configs @define class MyOwnComponent extends Component { @config('nullify') myConfig = 42; applyMyConfig (value, oldValue) { //validation return value; } updateMyConfig (value, oldValue) { //side effects } }

Slide 40

Slide 40 text

Olga Petrova, @tyoushe Mixins @define class Mixin extends Base { processData (data) {...} } @define({ mixins: [ Mixin ] }) class MyComponent extends Component { @junction processData (data) { super.processData(data); } }

Slide 41

Slide 41 text

Olga Petrova, @tyoushe Overrides class MyComponent extends Component {} @override(MyComponent) class MyComponentOverride { myProperty = ‘My Text’; myMethod () { //... } }

Slide 42

Slide 42 text

Olga Petrova, @tyoushe Life-cycle Methods class MyComponent extends Component { ctor () { // do constructor-like things } setup() { // finalize configuration } dtor () { // do destructor-like things } }