How to Re-Architect a JavaScript Class System

Transcript

2. How to Re-Architect a JavaScript Class System Olga Petrova, @tyoushe Developer Advocate, Sencha
3. Olga Petrova, @tyoushe Evolution of Standards and Technologies
4. Olga Petrova, @tyoushe
5. Olga Petrova, @tyoushe
6. Olga Petrova, @tyoushe What Makes Technology Future-Proof?
7. Olga Petrova, @tyoushe
8. Olga Petrova, @tyoushe
9. Olga Petrova, @tyoushe
10. 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();
11. Olga Petrova, @tyoushe
12. Olga Petrova, @tyoushe
13. Olga Petrova, @tyoushe
14. Olga Petrova, @tyoushe
15. Olga Petrova, @tyoushe Ext JS Class System ✔ Inheritance ✔ Config properties ✔ Dependencies ✔ Mixins ✔ Overrides ✔ Build tool
16. 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() { //... } } });
17. 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 } });
18. Olga Petrova, @tyoushe Ext JS Overrides var MyComponent = new Ext.Component({}); Ext.override(MyComponent, { myProperty: 'My Text', myMethod: function () { //... } });
19. 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); } });
20. 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
21. Olga Petrova, @tyoushe
22. Olga Petrova, @tyoushe ECMAScript6 Class system
23. Olga Petrova, @tyoushe
24. Olga Petrova, @tyoushe
25. Olga Petrova, @tyoushe
26. Olga Petrova, @tyoushe ECMAScript6 Class Systems ✔ Inheritance ✔ Dependencies ✔ Build tool ❌ Config properties ❌ Mixins ❌ Overrides
27. Olga Petrova, @tyoushe
28. Olga Petrova, @tyoushe + =
29. Olga Petrova, @tyoushe + =
30. Olga Petrova, @tyoushe
31. 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
32. Olga Petrova, @tyoushe JavaScript Decorators
33. Olga Petrova, @tyoushe @wrap Method class C { @wrap(f) method() { } } class C { method() { } } C.prototype.method = f(C.prototype.method); =>
34. Olga Petrova, @tyoushe @wrap Class @wrap(f) class C { } class C { } C = f(C); =>
35. Olga Petrova, @tyoushe JavaScript Class Fields
36. Olga Petrova, @tyoushe Class Fields class MyComponent { myField = 42; }
37. 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
38. Olga Petrova, @tyoushe Class @define({ prototype: { myProperty: "My text" }, static: { myStaticProperty: 42 } }) class MyOwnComponent extends Component { // }
39. Olga Petrova, @tyoushe Configs @define class MyOwnComponent extends Component { @config('nullify') myConfig = 42; applyMyConfig (value, oldValue) { //validation return value; } updateMyConfig (value, oldValue) { //side effects } }
40. Olga Petrova, @tyoushe Mixins @define class Mixin extends Base { processData (data) {...} } @define({ mixins: [ Mixin ] }) class MyComponent extends Component { @junction processData (data) { super.processData(data); } }
41. Olga Petrova, @tyoushe Overrides class MyComponent extends Component {} @override(MyComponent) class MyComponentOverride { myProperty = ‘My Text’; myMethod () { //... } }
42. Olga Petrova, @tyoushe Life-cycle Methods class MyComponent extends Component { ctor () { // do constructor-like things } setup() { // finalize configuration } dtor () { // do destructor-like things } }
43. Olga Petrova, @tyoushe Lessons Learned
44. Olga Petrova, @tyoushe Follow Standards if You Can
45. Olga Petrova, @tyoushe Estimate Effort on Re-write
46. Olga Petrova, @tyoushe Encapsulate
47. Olga Petrova, @tyoushe Keep your Eyes on New Standards
48. Olga Petrova, @tyoushe Start to Adapt Earlier
49. Olga Petrova, @tyoushe Keep Decorator/Adapter/Facade Patterns in Mind
50. Olga Petrova, @tyoushe 3