Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Daniel Ostrovsky
Falling in Love With Decorators
PROFESSIONAL JS CONFERENCE
8-9 NOVEMBER ‘19 KYIV, UKRAINE
2
Falling in Love With Decorators.
By Daniel Ostrovsky Web Team Lead at Kaltura
@danduh81
@danduh
3
• What decorators is?
• When do we need it and when not.
• Property decorators
• Method decorators
• Class decorators
• ...
4
What decorators is?
Design pattern.
One of the twenty-three well-known GoF design patterns.
Extend the functionality of ...
5
Disclaimer
Decorators are currently at
Stage II
as part of
TC39's process.
Angular, Nest.Js,
Stencil, MobX,
core-decorat...
6
Proposal
Yehuda Katz
2015
7
Proposal
HEY!!!
You GOT a Wrong Guy!!!
8
Proposal
Yehuda Katz
GitHub: wycats
https://yehudakatz.com/
9
Proposal
A decorator is:
• an expression
• that evaluates to a function
• that takes the target, name, and property desc...
10
Common Use Cases
• Functional
o Helpers
o Logger
o Performance measuring
• Web Worker runner
• Validators
• Class mixin...
11
Descriptor
let todoObj = {
summary: 'Write article about descriptors',
assigned: 'me',
deadLine: 1602280800
};
let desc...
12
Descriptor // Output:
{
value: 1602280800,
writable: true,
enumerable: true,
configurable: true
}
• “value” - actual pr...
● The way we can call higher-order function.
● Function that takes another functions, extends its behaviour (without
modif...
● target - class - TodoObject
● key - decorated method/property name - “timeLeft”
● descriptor - descriptor object of deco...
Краще один раз кодувати ніж тисячу разів,
слухати про те, як саме.
A coding is worth a thousand words….
• Class decorator accepts target (class) and returns
constructor.
• constructor - is nothing but a function which is used ...
THANK YOU!!!Articles
@danduh81
Upcoming SlideShare
Loading in …5
×

of

JS Fest 2019/Autumn. Daniel Ostrovsky. Falling in love with decorators ES6/TypeScript Slide 1 JS Fest 2019/Autumn. Daniel Ostrovsky. Falling in love with decorators ES6/TypeScript Slide 2 JS Fest 2019/Autumn. Daniel Ostrovsky. Falling in love with decorators ES6/TypeScript Slide 3 JS Fest 2019/Autumn. Daniel Ostrovsky. Falling in love with decorators ES6/TypeScript Slide 4 JS Fest 2019/Autumn. Daniel Ostrovsky. Falling in love with decorators ES6/TypeScript Slide 5 JS Fest 2019/Autumn. Daniel Ostrovsky. Falling in love with decorators ES6/TypeScript Slide 6 JS Fest 2019/Autumn. Daniel Ostrovsky. Falling in love with decorators ES6/TypeScript Slide 7 JS Fest 2019/Autumn. Daniel Ostrovsky. Falling in love with decorators ES6/TypeScript Slide 8 JS Fest 2019/Autumn. Daniel Ostrovsky. Falling in love with decorators ES6/TypeScript Slide 9 JS Fest 2019/Autumn. Daniel Ostrovsky. Falling in love with decorators ES6/TypeScript Slide 10 JS Fest 2019/Autumn. Daniel Ostrovsky. Falling in love with decorators ES6/TypeScript Slide 11 JS Fest 2019/Autumn. Daniel Ostrovsky. Falling in love with decorators ES6/TypeScript Slide 12 JS Fest 2019/Autumn. Daniel Ostrovsky. Falling in love with decorators ES6/TypeScript Slide 13 JS Fest 2019/Autumn. Daniel Ostrovsky. Falling in love with decorators ES6/TypeScript Slide 14 JS Fest 2019/Autumn. Daniel Ostrovsky. Falling in love with decorators ES6/TypeScript Slide 15 JS Fest 2019/Autumn. Daniel Ostrovsky. Falling in love with decorators ES6/TypeScript Slide 16 JS Fest 2019/Autumn. Daniel Ostrovsky. Falling in love with decorators ES6/TypeScript Slide 17
Upcoming SlideShare
What to Upload to SlideShare
Next

0 Likes

Share

JS Fest 2019/Autumn. Daniel Ostrovsky. Falling in love with decorators ES6/TypeScript

Decorators are part of proposal TC39 (stage 2), this means that sooner or later decorators will become a part of the JS. However, there is no need to wait! We can use decorators in JavaScript (with babel) and in TypeScript. Let's see how decorators can extend the functionality of classes and methods in a clean and declarative fashion. And many other things which gives you more flexibility.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

JS Fest 2019/Autumn. Daniel Ostrovsky. Falling in love with decorators ES6/TypeScript

  1. 1. Daniel Ostrovsky Falling in Love With Decorators PROFESSIONAL JS CONFERENCE 8-9 NOVEMBER ‘19 KYIV, UKRAINE
  2. 2. 2 Falling in Love With Decorators. By Daniel Ostrovsky Web Team Lead at Kaltura @danduh81 @danduh
  3. 3. 3 • What decorators is? • When do we need it and when not. • Property decorators • Method decorators • Class decorators • Arguments decorators (TS) • And many more… Subject
  4. 4. 4 What decorators is? Design pattern. One of the twenty-three well-known GoF design patterns. Extend the functionality of classes and methods in a clean and declarative fashion.
  5. 5. 5 Disclaimer Decorators are currently at Stage II as part of TC39's process. Angular, Nest.Js, Stencil, MobX, core-decorators, ember-decorators, lodash-decorators
  6. 6. 6 Proposal Yehuda Katz 2015
  7. 7. 7 Proposal HEY!!! You GOT a Wrong Guy!!!
  8. 8. 8 Proposal Yehuda Katz GitHub: wycats https://yehudakatz.com/
  9. 9. 9 Proposal A decorator is: • an expression • that evaluates to a function • that takes the target, name, and property descriptor as arguments • and optionally returns a property descriptor to install on the target object https://github.com/tc39/proposal-decorators
  10. 10. 10 Common Use Cases • Functional o Helpers o Logger o Performance measuring • Web Worker runner • Validators • Class mixing/composite • Code analysing • Memoization • Access control and authentication • **Additional functionality • And many more…
  11. 11. 11 Descriptor let todoObj = { summary: 'Write article about descriptors', assigned: 'me', deadLine: 1602280800 }; let descriptor = Object.getOwnPropertyDescriptor(todoObj, 'deadLine'); console.log(descriptor); // Output: { value: 1602280800, writable: true, enumerable: true, configurable: true }
  12. 12. 12 Descriptor // Output: { value: 1602280800, writable: true, enumerable: true, configurable: true } • “value” - actual property value • “writable” - is value of this property can be changed • “enumerable” - is this property is enterable, is it can be used in • for (let key of todoObj) {} / Object.keys(todoObj) • “configurable” - is entire descriptor can be changed
  13. 13. ● The way we can call higher-order function. ● Function that takes another functions, extends its behaviour (without modifying it) and returns it. ● “@” indicator for parser, that we using decorator. ● “readOnly” - name of our higher-order function. Class member @Decorator (methods/properties) 13 export function readOnly(target, key, descriptor) { descriptor.writable = false; return descriptor; } class TodoObject{ @readOnly timeLeft(){} }
  14. 14. ● target - class - TodoObject ● key - decorated method/property name - “timeLeft” ● descriptor - descriptor object of decorated method/property Class member @Decorator (methods/properties) 14 export function readOnly(target, key, descriptor) { descriptor.writable = false; return descriptor; } class TodoObject{ @readOnly timeLeft(){} } const descriptor = Object.getOwnPropertyDescriptor(TodoItem, 'timeLeft');
  15. 15. Краще один раз кодувати ніж тисячу разів, слухати про те, як саме. A coding is worth a thousand words….
  16. 16. • Class decorator accepts target (class) and returns constructor. • constructor - is nothing but a function which is used to add prototype methods and define some initial values. Class Decorators
  17. 17. THANK YOU!!!Articles @danduh81

Decorators are part of proposal TC39 (stage 2), this means that sooner or later decorators will become a part of the JS. However, there is no need to wait! We can use decorators in JavaScript (with babel) and in TypeScript. Let's see how decorators can extend the functionality of classes and methods in a clean and declarative fashion. And many other things which gives you more flexibility.

Views

Total views

129

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×