A minimal guide to ECMAScript Decorators

Why ECMAScript Decorators instead of JavaScript Decorators in the title? Because, ECMAScript is a standard for writing scripting languages like JavaScript , it doesn’t enforce JavaScript to support all the specs but a JavaScript engine ( used by different browsers ) may or may not support a feature introduced in ECMAScript or support with little different behaviour.

Consider ECMAScript as language that you speak for example, English . Then JavaScript would be a dialect like British English . A dialect is a language itself but it is based on principals of the language it was derived from. So, ECMAScript is a cookbook for cooking/writing JavaScript and it’s upto the chef/developer to follow all ingredients/rules or not.

Generally, JavaScript adopters follow all the specifications written in language ( or developers will go crazy ) and ship it very late with the new version of JavaScript engine until they make sure that everything is working well. TC39 or Technical Committee 39 at ECMA International is responsible for maintaining ECMAScript language specifications. Members of this team belongs to ECMA International, browser vendors and companies interested in web in general.

As ECMAScript is open standard, anybody can suggest new ideas or features and work on them. Hence, a proposal for new feature goes through 4 main stages and TC39 gets involved in this process until that feature is ready to be shipped.

+-------+-----------+----------------------------------------+
| stage | name      | mission                                |
+-------+-----------+----------------------------------------+
| 0     | strawman  | Present a new feature (proposal)       |
|       |           | to TC39 committee. Generally presented |
|       |           | by TC39 member or TC39 contributor.    |
+-------+-----------+----------------------------------------+
| 1     | proposal  | Define use cases for the proposal,     |
|       |           | dependencies, challenges, demos,       |
|       |           | polyfills etc. A champion              |
|       |           | (TC39 member) will be                  |
|       |           | responsible for this proposal.         |
+-------+-----------+----------------------------------------+
| 2     | draft     | This is the initial version of         |
|       |           | the feature that will be               |
|       |           | eventually added. Hence description    |
|       |           | and syntax of feature should           |
|       |           | be presented. A transpiler such as     |
|       |           | Babel should support and               |
|       |           | demonstrate implementation.            |
+-------+-----------+----------------------------------------+
| 3     | candidate | Proposal is almost ready and some      |
|       |           | changes can be made in response to     |
|       |           | critical issues raised by adopters     |
|       |           |  and TC39 committee.                   |
+-------+-----------+----------------------------------------+
| 4     | finished  | The proposal is ready to be            |
|       |           | included in the standard.              |
+-------+-----------+----------------------------------------+

Right now ( June 2018 ), Decorators are in stage 2 and we have Babel plugin to transpile decorators babel-plugin-transform-decorators-legacy . In stage 2, as syntax of the feature is subjected to change, it’s not recommended to use it in production as of now. In any case, decorators are beautiful and very useful to achieve things quicker.

From here on, we are working on experimental JavaScript, hence your node.js version might not support this feature. Hence, we need Babel or TypeScript transpiler to get started. Use js-plugin-starter plugin to setup very basic project and I have added support for what we are going to cover in this article.