Define order of tag script properties/methods and lifecycle events

[MartinMuzatko]

I'd define more than just properties/methods.

While it is usual for angular/angular2 to have the lifecycle events at the top (constructor/ngOnInit) I'd put them at the bottom. That is to be discussed.

So I'd declare this structure as best practice / well organized:

1. mixins
2. opts properties
3. properties
4. eventhandlers
5. methods
6. lifecycle events

e.g.:

// MIXINS
this.mixin('selectable')

// OPTS PROPERTIES
this.min = opts.min || 0
this.max = opts.max || 100

// PRIVATE / MODULE SPECIFIC PROPERTIES
this.maxWidth = '800px'

// EVENTS
add(event) {
    /* ... */
}

edit(event) {
    /* ... */
}

toggle(event) {
    /* ... */
}

// METHODS

this.setup = function() {

}

// LIFECYCLE EVENTS

this.on('mount', () => {
    this.setup()
})

[jbmoelker]

I fully agree with having mixins on top. I personally don't mind if properties and "opts properties" are mixed as it's just a matter of initiation. In practice I think those are mostly moved to .on('update'). And I would maybe combine lifecycle other event handlers, as they are both just event listeners. And otherwise I would prefer mount, update, updated, otherEvents, unmount as that would basically be the chronological order.

So simplified order:

1. mixins
2. properties
3. methods
4. (lifecycle) event listeners

I wouldn't mind extending "put tag properties and methods on top".