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
110
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
210
Introduction to ExtReact, ExtAngular and ExtWebComponents
olgapetrova
0
62
Visual Feature Engineering for ML with React and TensorFlow.js
olgapetrova
0
62
Web Push Notifications
olgapetrova
1
280
How to add D3.js visualization to your Ext JS application
olgapetrova
1
520
Turbo-charged Data Analysis and Visualization using Ext JS 6.2
olgapetrova
3
87
ExtJS 6: one framework for all devices
olgapetrova
1
750
Other Decks in Programming
See All in Programming
Vue3の一歩踏み込んだパフォーマンスチューニング2024
hal_spidernight
3
3.1k
cXML という電子商取引の トランザクションを支える プロトコルと向きあっている話
phigasui
3
2.3k
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
11
2.3k
外部システム連携先が10を超えるシステムでのアーキテクチャ設計・実装事例
kiwasaki
1
230
Synchronizationを支える技術
s_shimotori
1
150
PagerDuty を軸にした On-Call 構築と運用課題の解決 / PagerDuty Japan Community Meetup 4
horimislime
1
110
C#/.NETのこれまでのふりかえり
tomokusaba
1
160
詳細解説! ArrayListの仕組みと実装
yujisoftware
0
480
gopls を改造したら開発生産性が高まった
satorunooshie
8
240
Streams APIとTCPフロー制御 / Web Streams API and TCP flow control
tasshi
1
300
Pinia Colada が実現するスマートな非同期処理
naokihaba
2
160
WEBエンジニア向けAI活用入門
sutetotanuki
0
300
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
107
49k
Embracing the Ebb and Flow
colly
84
4.4k
Docker and Python
trallard
40
3.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
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