Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
How to Re-Architect a JavaScript Class System
Search
Olga
May 13, 2019
Programming
0
120
How to Re-Architect a JavaScript Class System
Olga
May 13, 2019
Tweet
Share
More Decks by Olga
See All by Olga
Visual Feature Engineering for Machine Learning with React
olgapetrova
0
220
Introduction to ExtReact, ExtAngular and ExtWebComponents
olgapetrova
0
63
Visual Feature Engineering for ML with React and TensorFlow.js
olgapetrova
0
63
Web Push Notifications
olgapetrova
1
290
How to add D3.js visualization to your Ext JS application
olgapetrova
1
540
Turbo-charged Data Analysis and Visualization using Ext JS 6.2
olgapetrova
3
90
ExtJS 6: one framework for all devices
olgapetrova
1
760
Other Decks in Programming
See All in Programming
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
Spring gRPC について / About Spring gRPC
mackey0225
0
220
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.3k
ARA Ansible for the teams
kksat
0
150
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
41
15k
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.1k
技術を根付かせる / How to make technology take root
kubode
1
240
Open source software: how to live long and go far
gaelvaroquaux
0
620
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
Featured
See All Featured
Become a Pro
speakerdeck
PRO
26
5.1k
Designing Experiences People Love
moore
139
23k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
4 Signs Your Business is Dying
shpigford
182
22k
Navigating Team Friction
lara
183
15k
The Language of Interfaces
destraynor
156
24k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Scaling GitHub
holman
459
140k
Done Done
chrislema
182
16k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Transcript
None
How to Re-Architect a JavaScript Class System Olga Petrova, @tyoushe
Developer Advocate, Sencha
Olga Petrova, @tyoushe Evolution of Standards and Technologies
Olga Petrova, @tyoushe
Olga Petrova, @tyoushe
Olga Petrova, @tyoushe What Makes Technology Future-Proof?
Olga Petrova, @tyoushe
Olga Petrova, @tyoushe
Olga Petrova, @tyoushe
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();
Olga Petrova, @tyoushe
Olga Petrova, @tyoushe
Olga Petrova, @tyoushe
Olga Petrova, @tyoushe
Olga Petrova, @tyoushe Ext JS Class System ✔ Inheritance ✔
Config properties ✔ Dependencies ✔ Mixins ✔ Overrides ✔ Build tool
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() { //... } } });
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 } });
Olga Petrova, @tyoushe Ext JS Overrides var MyComponent = new
Ext.Component({}); Ext.override(MyComponent, { myProperty: 'My Text', myMethod: function () { //... } });
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); } });
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
Olga Petrova, @tyoushe
Olga Petrova, @tyoushe ECMAScript6 Class system
Olga Petrova, @tyoushe
Olga Petrova, @tyoushe
Olga Petrova, @tyoushe
Olga Petrova, @tyoushe ECMAScript6 Class Systems ✔ Inheritance ✔ Dependencies
✔ Build tool ❌ Config properties ❌ Mixins ❌ Overrides
Olga Petrova, @tyoushe
Olga Petrova, @tyoushe + =
Olga Petrova, @tyoushe + =
Olga Petrova, @tyoushe
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
Olga Petrova, @tyoushe JavaScript Decorators
Olga Petrova, @tyoushe @wrap Method class C { @wrap(f) method()
{ } } class C { method() { } } C.prototype.method = f(C.prototype.method); =>
Olga Petrova, @tyoushe @wrap Class @wrap(f) class C { }
class C { } C = f(C); =>
Olga Petrova, @tyoushe JavaScript Class Fields
Olga Petrova, @tyoushe Class Fields class MyComponent { myField =
42; }
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
Olga Petrova, @tyoushe Class @define({ prototype: { myProperty: "My text"
}, static: { myStaticProperty: 42 } }) class MyOwnComponent extends Component { // }
Olga Petrova, @tyoushe Configs @define class MyOwnComponent extends Component {
@config('nullify') myConfig = 42; applyMyConfig (value, oldValue) { //validation return value; } updateMyConfig (value, oldValue) { //side effects } }
Olga Petrova, @tyoushe Mixins @define class Mixin extends Base {
processData (data) {...} } @define({ mixins: [ Mixin ] }) class MyComponent extends Component { @junction processData (data) { super.processData(data); } }
Olga Petrova, @tyoushe Overrides class MyComponent extends Component {} @override(MyComponent)
class MyComponentOverride { myProperty = ‘My Text’; myMethod () { //... } }
Olga Petrova, @tyoushe Life-cycle Methods class MyComponent extends Component {
ctor () { // do constructor-like things } setup() { // finalize configuration } dtor () { // do destructor-like things } }
Olga Petrova, @tyoushe Lessons Learned
Olga Petrova, @tyoushe Follow Standards if You Can
Olga Petrova, @tyoushe Estimate Effort on Re-write
Olga Petrova, @tyoushe Encapsulate
Olga Petrova, @tyoushe Keep your Eyes on New Standards
Olga Petrova, @tyoushe Start to Adapt Earlier
Olga Petrova, @tyoushe Keep Decorator/Adapter/Facade Patterns in Mind
Olga Petrova, @tyoushe 3