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
240
Introduction to ExtReact, ExtAngular and ExtWebComponents
olgapetrova
0
68
Visual Feature Engineering for ML with React and TensorFlow.js
olgapetrova
0
69
Web Push Notifications
olgapetrova
1
290
How to add D3.js visualization to your Ext JS application
olgapetrova
1
570
Turbo-charged Data Analysis and Visualization using Ext JS 6.2
olgapetrova
3
94
ExtJS 6: one framework for all devices
olgapetrova
1
780
Other Decks in Programming
See All in Programming
Result型で“失敗”を型にするPHPコードの書き方
kajitack
4
530
CursorはMCPを使った方が良いぞ
taigakono
1
200
Benchmark
sysong
0
280
PicoRuby on Rails
makicamel
2
110
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
Discover Metal 4
rei315
2
100
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
710
#QiitaBash MCPのセキュリティ
ryosukedtomita
0
420
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
110
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
270
Create a website using Spatial Web
akkeylab
0
310
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Code Review Best Practice
trishagee
68
18k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Rails Girls Zürich Keynote
gr2m
94
14k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Building Applications with DynamoDB
mza
95
6.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
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